Input Group
shadcn/ui
v4 only
Input with prefix/suffix addons — icons, text labels, and action buttons. Renders as a single visual unit.
@/components/ui/input-groupPatterns
| Pattern | Preview | Usage |
|---|---|---|
| Leading icon | Search bars, email fields, URL inputs | |
| Trailing icon button | Clearable inputs, password reveal | |
| Prefix text | https:// | URL fields, domain inputs |
| Suffix text | EUR | Currency, unit fields (km, %, days) |
| Trailing action button | API keys, invite links, sharable values | |
| Icon + trailing button | Smart filter bar with search + filter trigger |
States
| State | Preview | Token |
|---|---|---|
| Default | border-input bg-background | |
| Focus | ring-ring/50 — ring wraps entire group | |
| Disabled | opacity-50 cursor-not-allowed | |
| Error | border-destructive on InputGroupInput |
In context — ticket filter bar
Tickets
Search uses bg-muted border-transparent to blend with toolbar background
Sub-components
| Component | Role |
|---|---|
| InputGroup | Wrapper — manages border radius and focus ring as a unit |
| InputGroupInput | The actual <input> — same API as Input |
| InputGroupAddon | Container for icon/text/button addons. align: "inline-start" (default) | "inline-end" |
| InputGroupText | Non-interactive text label (https://, EUR, USD) |
| InputGroupButton | Interactive button addon — same variants/sizes as Button |
On this page