Input Group

An input with icons, text, keyboard hints or buttons attached to either side.

When to use

An input with something attached inside its border: a search icon, a unit or a prefix (https://), a keyboard hint, a copy or clear button.
A textarea with actions under it, such as a prompt box with a Send button (InputGroupTextarea with a block-end addon).

When not to use

Install

npx shadcn@latest add @clinia/input-group

⌘K

https://

Anatomy

1Groupdata-slot="input-group"border-input · rounded-lg
2Addon[data-slot=input-group-addon][data-align=inline-start]text-muted-foreground
3Inputdata-slot="input-group-control"border-0 · bg-transparent
4Addon button[data-slot=input-group-addon] buttonghost · icon-xs

Clinia rules

The group draws the border and the focus ring: the input token at rest, the Trust ring when the inner control has focus, and a destructive ring when it's aria-invalid.
InputGroupButton defaults to type="button", ghost and xs, so an addon button never submits the form by accident. Use one addon button per side.
Addon text is text-muted-foreground. Keep it short: a unit, a prefix or a hint, never the field's label.

Do and don't

Do attach a short prefix, unit or action.

Don't crowd the field with buttons.

Do keep the label outside, above the group.

Endpoint

Don't put the label inside as an addon.

States

default

invalid

https://

disabled

focus

Focus cells apply the component's focus-visible classes statically. Toggle the site theme to review both themes.

Sizes

Size	Height	Padding x	Gap	Radius	Type
xs	h-6 · 24px	px-1.5 · 6px	gap-1 · 4px	--radius-md	text-sm · 14px
sm	h-8 · 32px	px-2.5 · 10px	gap-1.5 · 6px	--radius-md	text-sm · 14px
icon-xs	size-6 · 24px	–	gap-2 · 8px	--radius-md	text-sm · 14px
icon-sm	size-8 · 32px	–	gap-2 · 8px	--radius-lg	text-sm · 14px

Accessibility

Built in

Addons are decorative, so the input still needs its own label or aria-label.
The resting border is the input token, like Input, so the group clears 3:1 on the page and on cards.
A click on an addon that isn't a button moves focus to the input.

Your responsibility

Give icon-only addon buttons (icon-xs, icon-sm) an aria-label, such as Copy API key.
If a prefix or unit changes what the value means (https://, days), say it in the label or the description too: a screen reader doesn't read addons with the input.

How to test

Press Tab into the input: the Trust ring wraps the whole group.
Press Tab again: focus moves to the addon button, which shows its own ring. Enter or Space activates it without submitting the form.
Click the icon or the prefix text: focus lands in the input.
With a screen reader, the input is announced with its label, and the icon-only button with its aria-label.

API

InputGroupAddon

Prop	Values	Default	Description
align	`inline-startinline-endblock-startblock-end`	`inline-start`	Where the addon sits: at the start or end of the line, or above or below the input.

InputGroupButton

Prop	Values	Default	Description
size	`xssmicon-xsicon-sm`	`xs`	`xs` is 24px and `sm` 32px; both fit inside the group. `icon-*` are square and need an `aria-label`.
type	`buttonsubmitreset`	`button`	Defaults to `button`, so an addon button never submits the form by accident.

All other props come from the native div element.