Input Suffix

A decorative element placed after a text input to provide context about the expected value (e.g., a unit of measurement or icon). Must be used inside a c-input-group wrapper alongside c-text-input. Follows USWDS input suffix patterns.

Props

Prop	Default	Description
`class`		Additional CSS classes for the suffix element

Slots

Slot	Description
(default)	Suffix content: a text string or a `c-icon` component

Example Usage

Unit of Measurement Suffix

<c-label id="weight" label="Weight" hint="Enter weight in pounds." />
<c-input-group>
    <c-text-input
        id="weight"
        name="weight"
        type="text"
        inputmode="numeric"
    />
    <c-input-suffix>lbs</c-input-suffix>
</c-input-group>

Search Icon Suffix

<c-label id="search-field" label="Search" hint="Enter search terms." />
<c-input-group>
    <c-text-input
        id="search-field"
        name="search"
        type="search"
    />
    <c-input-suffix>
        <c-icon icon="search" />
    </c-input-suffix>
</c-input-group>

Usage Notes

c-input-suffix must be placed inside a c-input-group wrapper
The suffix is marked aria-hidden="true" automatically; it is decorative and not read by screen readers
Use text strings for units or abbreviations (e.g., lbs, USD, %) and c-icon for icon suffixes
To add both a prefix and a suffix, use c-input-group with both c-input-prefix and c-input-suffix; see the c-input-group component for that pattern

{% load cotton %}

<div class="component-variants">
    <h1>Input Suffix Component</h1>
    <p class="usa-intro">Use input suffixes to show symbols or abbreviations that help users enter the right type of information after the input field.</p>

    {% for variant in variants %}
    <div class="component-variant">
        <h2 class="variant-title">{{ variant.title }}</h2>
        {% cotton label id="{{ variant.id }}" label="{{ variant.label }}" %}{% endcotton %}
        {% cotton input-group %}
            {% cotton text-input id="{{ variant.id }}" name="{{ variant.name }}" type="{{ variant.type }}" value="{{ variant.value }}" label="{{ variant.label }}" hint="{{ variant.hint }}" error="{{ variant.error }}" success="{{ variant.success }}" disabled="{{ variant.disabled }}" readonly="{{ variant.readonly }}" required="{{ variant.required }}" width="{{ variant.width }}" inputmode="{{ variant.inputmode }}" %}{% endcotton %}
            {% cotton input-suffix %}{% if variant.suffix_text %}{{ variant.suffix_text }}{% endif %}{% if variant.suffix_icon %}{% cotton icon icon="{{ variant.suffix_icon }}" %}{% endcotton %}{% endif %}{% endcotton %}
        {% endcotton %}
    </div>
    {% endfor %}
    
</div>

name: Input Suffix
context:
  variants:
    - title: "Pounds Weight Suffix"
      id: "suffix-lbs"
      name: "weight"
      label: "Weight"
      type: "text"
      hint: "Enter weight in pounds"
      suffix_text: "lbs"
      inputmode: "numeric"


    - title: "Search Icon Suffix"
      id: "suffix-search-icon"
      name: "search"
      label: "Search"
      type: "search"
      hint: "Enter search terms"
      suffix_icon: "search"