Inputs — Leading and trailing addons

Four labelled fields show attached text, a currency pair, an inset icon and a trailing action. Use when a field needs context inside its boundary.

ReactHTML

1440 × 480

Open in new tab

Component.tsx42 lines

export default function InputsLeadingTrailingAddons() {
  return (
    <div className="grid w-72 gap-4 text-neutral-900 sm:w-80">
      <div>
        <label htmlFor="addons-website" className="mb-1.5 block text-sm font-medium">Website</label>
        <div className="flex h-10 items-center rounded-md border border-neutral-300 bg-white has-[input:focus-visible]:outline-2 has-[input:focus-visible]:outline-offset-2 has-[input:focus-visible]:outline-neutral-900">
          <span aria-hidden="true" className="flex h-full shrink-0 items-center rounded-l-md border-r border-neutral-300 bg-neutral-50 px-3 text-sm text-neutral-600">https://</span>
          <input id="addons-website" name="website" type="text" autoComplete="url" aria-describedby="addons-website-hint" placeholder="Enter domain" className="h-full w-full min-w-0 rounded-md border-0 bg-white px-3 text-sm placeholder:text-neutral-500 focus-visible:outline-hidden" />
        </div>
        <p id="addons-website-hint" className="sr-only">Enter the domain after https://.</p>
      </div>
      <div>
        <label htmlFor="addons-amount" className="mb-1.5 block text-sm font-medium">Amount</label>
        <div className="flex h-10 items-center rounded-md border border-neutral-300 bg-white has-[input:focus-visible]:outline-2 has-[input:focus-visible]:outline-offset-2 has-[input:focus-visible]:outline-neutral-900">
          <span aria-hidden="true" className="pl-3 text-sm text-neutral-500">$</span>
          <input id="addons-amount" name="amount" type="text" inputMode="decimal" aria-describedby="addons-amount-hint addons-currency" placeholder="0.00" className="h-full w-full min-w-0 rounded-md border-0 bg-white px-3 text-sm placeholder:text-neutral-500 focus-visible:outline-hidden" />
          <span id="addons-currency" className="pr-3 text-sm text-neutral-500">USD</span>
        </div>
        <p id="addons-amount-hint" className="sr-only">Enter the amount in US dollars.</p>
      </div>
      <div>
        <label htmlFor="addons-email" className="mb-1.5 block text-sm font-medium">Email</label>
        <div className="flex h-10 items-center rounded-md border border-neutral-300 bg-white has-[input:focus-visible]:outline-2 has-[input:focus-visible]:outline-offset-2 has-[input:focus-visible]:outline-neutral-900">
          <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="ml-3 size-4 shrink-0 text-neutral-500"><rect x="3" y="5" width="18" height="14" rx="2" /><path d="m3 7 9 6 9-6" /></svg>
          <input id="addons-email" name="email" type="email" autoComplete="email" aria-describedby="addons-email-hint" placeholder="name@example.com" className="h-full w-full min-w-0 rounded-md border-0 bg-white px-3 text-sm placeholder:text-neutral-500 focus-visible:outline-hidden" />
        </div>
        <p id="addons-email-hint" className="sr-only">Enter your contact email address.</p>
      </div>
      <div>
        <label htmlFor="addons-reference" className="mb-1.5 block text-sm font-medium">Reference</label>
        <div className="flex h-10 items-center rounded-md border border-neutral-300 bg-white has-[input:focus-visible]:outline-2 has-[input:focus-visible]:outline-offset-2 has-[input:focus-visible]:outline-neutral-900">
          <input id="addons-reference" name="reference" type="text" readOnly defaultValue="AC-1042" aria-describedby="addons-reference-hint" placeholder="Reference ID" className="h-full w-full min-w-0 rounded-md border-0 bg-white px-3 text-sm placeholder:text-neutral-500 focus-visible:outline-hidden" />
          <button type="button" aria-label="Copy reference" className="inline-flex h-full shrink-0 items-center justify-center gap-1.5 rounded-r-md border-l border-neutral-300 bg-white px-3 text-sm font-medium text-neutral-900 transition-colors hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900">
            <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-4"><rect x="8" y="8" width="12" height="12" rx="2" /><path d="M16 8V4H4v12h4" /></svg>
            Copy
          </button>
        </div>
        <p id="addons-reference-hint" className="sr-only">Read-only reference for this account.</p>
      </div>
    </div>
  )
}

Pattern notes

When to use: Use for URL prefixes, units, icon hints and attached field actions. Pick inputs-field-anatomy for fields whose messages matter more than addons. Variations: change currency to a measurement unit, use a phone prefix segment, or replace Copy with a reveal action.
Hierarchy: Labels precede the four examples: Website, Amount, Email and Reference. Prefix and suffix clarify format; Copy is the only action. Label slots up to 2 words, domain placeholder up to 3, currency suffix up to 3 characters, reference value up to 12 characters. Screen-reader hints explain each field; USD is also linked as a description.
Responsive: Only the root width changes at 640px, from 288px to 320px. Inputs flex and keep min-w-0; addon segments and icons keep their widths. The four groups remain stacked at every viewport.
Layout: A 288px (w-72) column, 320px (sm:w-80) from 640px, with 16px gaps between four fields. Labels are 14px medium with 6px bottom spacing. Each 40px wrapper carries a 1px neutral-300 border and 6px radius. The URL prefix is a neutral-50 segment with a right divider; currency prefix and suffix flank a flexible min-w-0 input. Mail and copy icons are 16px. The attached Copy button shares the boundary and has a left divider.
States: An input keyboard focus draws a 2px neutral-900 wrapper outline offset 2px through has-[input:focus-visible]. Inputs use focus-visible:outline-hidden, which preserves a transparent 2px focus outline in forced-colors mode. Copy has its own outline and neutral-50 hover fill. Placeholders are neutral-500. Copy is a static action slot for host behaviour.

Desktop wireframe

┌─────────────────────────────────────────────┐
│ Website                                     │
│ ┌─────────┬───────────────────────────────┐ │
│ │ https://│ Enter domain                  │ │
│ └─────────┴───────────────────────────────┘ │
│ Amount                                      │
│ ┌─────────────────────────────────────────┐ │
│ │ $  0.00                             USD │ │
│ └─────────────────────────────────────────┘ │
│ Email                                       │
│ ┌─────────────────────────────────────────┐ │
│ │ Mail icon   name@example.com            │ │
│ └─────────────────────────────────────────┘ │
│ Reference                                   │
│ ┌──────────────────────────────┬──────────┐ │
│ │ AC-1042                      │ [Copy]   │ │
│ └──────────────────────────────┴──────────┘ │
└─────────────────────────────────────────────┘

View all

Inputs — Date range with a shared note
Layout tags: split,form,compact
Inputs — Dimensions with proportions and units
Layout tags: split,form,numbers,compact
Inputs — Field grid with mixed widths
Layout tags: grid,form,compact

Inputs — Leading and trailing addons

Pattern notes

More in Inputs

Inputs — Date range with a shared note

Inputs — Dimensions with proportions and units

Inputs — Field grid with mixed widths