Input Prefix

A decorative element placed before a text input to provide context about the expected value (e.g., a currency symbol or icon). Must be used inside a c-input-group wrapper alongside c-text-input. Follows USWDS input prefix patterns.

Props

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

Slots

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

Example Usage

Dollar Sign Prefix

<c-label id="price" label="Item price" hint="Enter the dollar amount." />
<c-input-group>
    <c-input-prefix>$</c-input-prefix>
    <c-text-input
        id="price"
        name="price"
        type="text"
        inputmode="numeric"
    />
</c-input-group>

Credit Card Icon Prefix

<c-label id="cc-number" label="Credit card number" hint="Enter your 16-digit card number." />
<c-input-group>
    <c-input-prefix>
        <c-icon icon="credit_card" />
    </c-input-prefix>
    <c-text-input
        id="cc-number"
        name="cc_number"
        type="text"
        inputmode="numeric"
    />
</c-input-group>

Usage Notes

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

{% load cotton %}

<div class="component-variants">
    <h1>Input Prefix Component</h1>
    <p class="usa-intro">Use input prefixes to show symbols or abbreviations that help users enter the right type of information before 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 input-prefix %}{% if variant.prefix_text %}{{ variant.prefix_text }}{% endif %}{% if variant.prefix_icon %}{% cotton icon icon="{{ variant.prefix_icon }}" %}{% endcotton %}{% endif %}{% endcotton %}
            {% 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 %}
        {% endcotton %}
    </div>
    {% endfor %}
    
</div>

name: Input Prefix
context:
  variants:
    - title: "Dollar Sign Prefix"
      id: "prefix-dollar"
      name: "price"
      label: "Item price"
      type: "text"
      hint: "Enter the dollar amount"
      prefix_text: "$"
      inputmode: "numeric"


    - title: "Credit Card Prefix"
      id: "prefix-credit-card"
      name: "cc_number"
      label: "Credit card number"
      type: "text"
      hint: "Enter your 16-digit card number"
      prefix_icon: "credit_card"
      inputmode: "numeric"