Input Group
View on shadcn/uiA flexible component for combining inputs with text, icons, and buttons.
Installation
pnpm dlx shadcn@latest add https://designsystem.wfp.org/r/input-group.jsonUsage
import {
InputGroup,
InputGroupAddon,
InputGroupInput,
} from "@/components/ui/input-group";<InputGroup>
<InputGroupAddon>
<Icon />
</InputGroupAddon>
<InputGroupInput type="text" placeholder="Enter text…" />
</InputGroup>Examples
With text
Combine inputs with text labels or suffixes.
With button
Add buttons to create interactive input groups.
With dropdown
Pair input groups with dropdown menus for filtering and categorization.
With textarea
Use textarea for multi-line input with larger rows for better usability.
Your review
With spinner
Show loading indicators while processing input.
API reference
InputGroup
The root container for the input group.
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Additional CSS classes |
InputGroupAddon
Container for icons, text, or buttons that accompany the input.
| Prop | Type | Default | Description |
|---|---|---|---|
align | "inline-start" | "inline-end" | "block-start" | "block-end" | "inline-start" | Position of the addon |
className | string | - | Additional CSS classes |
InputGroupInput
The input element within the group.
| Prop | Type | Default | Description |
|---|---|---|---|
type | string | "text" | Input type |
placeholder | string | - | Placeholder text |
className | string | - | Additional CSS classes |
InputGroupTextarea
Textarea element for multi-line input.
| Prop | Type | Default | Description |
|---|---|---|---|
rows | number | - | Number of visible text rows |
placeholder | string | - | Placeholder text |
className | string | - | Additional CSS classes |
InputGroupText
Text content within an addon.
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Additional CSS classes |
InputGroupButton
Button element within an addon.
| Prop | Type | Default | Description |
|---|---|---|---|
size | "xs" | "sm" | "icon-xs" | "icon-sm" | "xs" | Button size |
variant | "default" | "ghost" | "outline" | "ghost" | Button style variant |
type | "button" | "submit" | "reset" | "button" | Button type |