- Button
- Date Picker
- Field
- Fields
- Input Group
- File Uploader
- Signature Pad
- Text Area
- Container
- Section Header
- Separator
- Spacer
- Action Row
- Breadcrumb
- Tabs
- Tabs Container
- Card
- Image
- Text
- Title
- Video Player
- Card Collection
- Data Grid
- List Collection
- Table Collection
- Bar Chart
- Big Number
- Line Chart
- Radial Chart
- Hint
- Progress
- Spinner
- Skeleton
- Toast
- Sheet
- Dialog
- Real-world patterns
- Primitives
Input groups extend a standard input with inline addons — text labels, icons, or action buttons — without breaking focus or error state handling.
Prefix Text
Suffix Text
Prefix and Suffix
With Icon
With Button
Use InputGroupButton to embed an action directly inside the input.
Block Addons
Use align="block-start" or align="block-end" to place the addon above or below the input rather than inline.
With Textarea
Use InputGroupTextarea in place of InputGroupInput for multi-line input.
Error State
Add aria-invalid="true" to InputGroupInput or InputGroupTextarea to trigger the error border on the group.
This username is already taken.
API Reference
InputGroup
Wrapper that manages the group border, focus ring, and error state. Extends div.
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Additional CSS classes |
InputGroupAddon
Container for inline or block addons. Click on the addon focuses the child input.
| Prop | Type | Default | Description |
|---|---|---|---|
align | "inline-start" | "inline-end" | "block-start" | "block-end" | "inline-start" | Addon placement relative to the input |
className | string | - | Additional CSS classes |
InputGroupText
Styled span for text and icon content inside an addon.
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Additional CSS classes |
InputGroupButton
A button rendered inside an addon. Wraps the shadcn Button with compact sizing variants.
| Prop | Type | Default | Description |
|---|---|---|---|
size | "xs" | "sm" | "icon-xs" | "icon-sm" | "xs" | Button size |
variant | ButtonProps["variant"] | "ghost" | Visual variant |
type | "button" | "submit" | "reset" | "button" | Button type attribute |
className | string | - | Additional CSS classes |
InputGroupInput
A borderless input that fills available space within the group.
| Prop | Type | Default | Description |
|---|---|---|---|
aria-invalid | "true" | boolean | - | Marks the group as invalid, triggering the error state |
className | string | - | Additional CSS classes |
Accepts all standard input HTML attributes.
InputGroupTextarea
A borderless textarea that fills available space within the group.
| Prop | Type | Default | Description |
|---|---|---|---|
aria-invalid | "true" | boolean | - | Marks the group as invalid, triggering the error state |
rows | number | - | Number of visible rows |
className | string | - | Additional CSS classes |
Accepts all standard textarea HTML attributes.