Input Group
Attaches icons, prefix text, buttons, or dropdowns directly to an input field, creating compact, all-in-one form controls.
Installation
pnpm dlx shadcn@latest add @spaceui/primitives-input-groupUsage
import { Input } from '@/components/ui/input'
import { InputGroup, InputGroupAddon, InputGroupInput, InputGroupText } from '@/components/ui/input-group'<InputGroup>
<InputGroupInput type="email" placeholder="Email" />
<InputGroupAddon>
<MailIcon />
</InputGroupAddon>
</InputGroup>Features
Disabled State
Input group rendered in a disabled state with disabled addons.
API Reference
InputGroup
The main component that wraps inputs and addons.
| Prop | Type | Description |
|---|---|---|
className | string | Additional CSS classes to apply to the component |
...props | React.ComponentProps<'div'> | All standard div attributes are supported |
InputGroupAddon
A container for addons like icons, text, buttons, and other elements. Can be positioned at the start or end (inline), or top or bottom (block) of the input.
| Prop | Type | Default | Description |
|---|---|---|---|
align | inline-start|inline-end|block-start|block-end | inline-start | The position of the addon relative to the input. Use inline-start or inline-end for inputs, and block-start or block-end for textareas |
className | string | Additional CSS classes to apply to the component | |
...props | React.ComponentProps<'div'> | All standard div attributes are supported |
For proper focus navigation, the InputGroupAddon component should be placed after the input in the DOM order.
InputGroupText
A text container component for displaying text content within an InputGroupAddon. Automatically styles text with muted foreground color and handles icon sizing.
| Prop | Type | Description |
|---|---|---|
className | string | Additional CSS classes to apply to the component |
...props | React.ComponentProps<'span'> | All standard span attributes are supported |
InputGroupInput
A specialized input component for use within InputGroup. It's essentially an unstyled Input component that inherits styling from the parent InputGroup.
| Prop | Type | Description |
|---|---|---|
className | string | Additional CSS classes to apply to the component |
...props | InputProps | All props from the Input component are supported, including type, placeholder, disabled, etc. |
InputGroupTextarea
A specialized textarea component for use within InputGroup. It's essentially an unstyled Textarea component that inherits styling from the parent InputGroup.
| Prop | Type | Description |
|---|---|---|
className | string | Additional CSS classes to apply to the component |
...props | TextareaProps | All props from the Textarea component are supported, including placeholder, disabled, rows, etc. |
InputGroupButton
A button styled specifically for embedding within an InputGroupAddon or InputGroup.
| Prop | Type | Description |
|---|---|---|
className | string | Additional CSS classes to apply to the component |
...props | ButtonProps | All standard props from the Button primitive are supported |