- Accordion
- Alert
- Alert Dialog
- Aspect Ratio
- Avatar
- Badge
- Breadcrumb
- Button
- Button Group
- Card
- Checkbox
- Collapsible
- Combobox
- Command
- Context Menu
- Dialog
- Dropdown Menu
- Empty
- Field
- Hover Card
- Input
- Input Group
- Input OTP
- Item
- Kbd
- Label
- Native Select
- Pagination
- Popover
- Progress
- Radio Group
- Select
- Separator
- Sheet
- Sidebar
- Skeleton
- Slider
- Sonner
- Spinner
- Switch
- Table
- Tabs
- Textarea
- Toast
- Toggle
- Toggle Group
- Tooltip
- Typography
Installation#
pnpm dlx shadcn@latest add @force-ui-ember/input-group
Usage#
import {
InputGroup,
InputGroupAddon,
InputGroupButton,
InputGroupInput,
InputGroupText,
InputGroupTextarea,
} from '@/ui/input-group';<InputGroup>
<InputGroupInput @placeholder="Search..." />
<InputGroupAddon>
<SearchIcon />
</InputGroupAddon>
</InputGroup>Composition#
Use the following composition to build an InputGroup:
InputGroup
├── InputGroupInput or InputGroupTextarea
├── InputGroupAddon
├── InputGroupButton
└── InputGroupTextAlign#
Use the @align argument on InputGroupAddon to position the addon relative to the input.
For proper focus management, InputGroupAddon should always be placed after
InputGroupInput or InputGroupTextarea in the DOM. Use the @align
argument to visually position the addon.
inline-start#
Use @align="inline-start" to position the addon at the start of the input. This is the default.
inline-end#
Use @align="inline-end" to position the addon at the end of the input.
block-start#
Use @align="block-start" to position the addon above the input.
block-end#
Use @align="block-end" to position the addon below the input.
Examples#
Icon#
Text#
Button#
Kbd#
Dropdown#
Spinner#
Textarea#
Custom Input#
Add the data-slot="input-group-control" attribute to your custom input for automatic focus state handling.
Here's an example of a custom resizable textarea from a third-party library.
Variants#
Use the @variant argument to match standalone Input variants.
API Reference#
InputGroup#
The main component that wraps inputs and addons.
| Prop | Type | Default |
|---|---|---|
@variant | "outline" | "filled" | "underline" | "ghost" | "outline" |
@class | string |
<InputGroup>
<InputGroupInput />
<InputGroupAddon />
</InputGroup>InputGroupAddon#
Displays icons, text, buttons, or other content alongside inputs.
Focus Navigation: For proper focus navigation, the InputGroupAddon component should be placed after the input. Set the @align argument to position the addon.
| Prop | Type | Default |
|---|---|---|
@align | "inline-start" | "inline-end" | "block-start" | "block-end" | "inline-start" |
@class | string |
<InputGroupAddon @align="inline-end">
<SearchIcon />
</InputGroupAddon>For <InputGroupInput />, use the inline-start or inline-end alignment. For <InputGroupTextarea />, use the block-start or block-end alignment.
The InputGroupAddon component can have multiple InputGroupButton components and icons.
<InputGroupAddon>
<InputGroupButton>Button</InputGroupButton>
<InputGroupButton>Button</InputGroupButton>
</InputGroupAddon>InputGroupButton#
Displays buttons within input groups.
| Prop | Type | Default |
|---|---|---|
@size | "xs" | "icon-xs" | "sm" | "icon-sm" | "xs" |
@variant | "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | "ghost" |
@class | string |
<InputGroupButton>Button</InputGroupButton>
<InputGroupButton @size="icon-xs" aria-label="Copy">
<CopyIcon />
</InputGroupButton>InputGroupInput#
Replacement for <Input /> when building input groups. This component has the input group styles pre-applied and uses the unified data-slot="input-group-control" for focus state handling.
| Prop | Type | Default |
|---|---|---|
@class | string |
All other arguments are passed through to the underlying <Input /> component.
<InputGroup>
<InputGroupInput @placeholder="Enter text..." />
<InputGroupAddon>
<SearchIcon />
</InputGroupAddon>
</InputGroup>InputGroupTextarea#
Replacement for <Textarea /> when building input groups. This component has the textarea group styles pre-applied and uses the unified data-slot="input-group-control" for focus state handling.
| Prop | Type | Default |
|---|---|---|
@class | string |
All other arguments are passed through to the underlying <Textarea /> component.
<InputGroup>
<InputGroupTextarea @placeholder="Enter message..." />
<InputGroupAddon @align="block-end">
<InputGroupButton>Send</InputGroupButton>
</InputGroupAddon>
</InputGroup>InputGroupText#
Display text content within input groups.
| Prop | Type | Default |
|---|---|---|
@class | string |
<InputGroupAddon>
<InputGroupText>$</InputGroupText>
</InputGroupAddon>