- Accordion
- Alert
- Alert Dialog
- Aspect Ratio
- Avatar
- Badge
- Breadcrumb
- Button
- Button Group
- Calendar
- Card
- Carousel
- Chart
- Checkbox
- Collapsible
- Combobox
- Command
- Context Menu
- Data Table
- Date Picker
- Dialog
- Drawer
- Dropdown Menu
- Empty
- Field
- Hover Card
- Input
- Input Group
- Input OTP
- Item
- Kbd
- Label
- Menubar
- Native Select
- Navigation Menu
- Pagination
- Popover
- Progress
- Radio Group
- Resizable
- Scroll Area
- Select
- Separator
- Sheet
- Sidebar
- Skeleton
- Slider
- Sonner
- Spinner
- Switch
- Table
- Tabs
- Textarea
- Toggle
- Toggle Group
- Tooltip
- Typography
Installation#
pnpm dlx shadcn@latest add @force-ui-svelte/input-group
Usage#
<script lang="ts">
import * as InputGroup from "$lib/components/ui/input-group/index.js";
</script><InputGroup.Root>
<InputGroup.Input placeholder="Search..." />
<InputGroup.Addon>
<SearchIcon />
</InputGroup.Addon>
</InputGroup.Root>Composition#
Use the following composition to build an InputGroup:
InputGroup.Root
├── InputGroup.Input or InputGroup.Textarea
├── InputGroup.Addon
├── InputGroup.Button
└── InputGroup.TextAlign#
Use the align prop on InputGroup.Addon to position the addon relative to the input.
For proper focus management, InputGroup.Addon should always be placed after
InputGroup.Input or InputGroup.Textarea in the DOM. Use the align prop
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 prop 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.Root variant="filled">
<InputGroup.Input />
<InputGroup.Addon />
</InputGroup.Root>InputGroup.Addon#
Displays icons, text, buttons, or other content alongside inputs.
For proper focus navigation,
InputGroup.Addonshould be placed after the input. Set thealignprop to position the addon.
| Prop | Type | Default |
|---|---|---|
align | "inline-start" | "inline-end" | "block-start" | "block-end" | "inline-start" |
class | string |
<InputGroup.Addon align="inline-end">
<SearchIcon />
</InputGroup.Addon>For <InputGroup.Input />, use the inline-start or inline-end alignment. For <InputGroup.Textarea />, use the block-start or block-end alignment.
The InputGroup.Addon component can have multiple InputGroup.Button components and icons.
<InputGroup.Addon>
<InputGroup.Button>Button</InputGroup.Button>
<InputGroup.Button>Button</InputGroup.Button>
</InputGroup.Addon>InputGroup.Button#
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 |
<InputGroup.Button>Button</InputGroup.Button>
<InputGroup.Button size="icon-xs" aria-label="Copy">
<CopyIcon />
</InputGroup.Button>InputGroup.Input#
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 props are passed through to the underlying <Input /> component.
<InputGroup.Root>
<InputGroup.Input placeholder="Enter text..." />
<InputGroup.Addon>
<SearchIcon />
</InputGroup.Addon>
</InputGroup.Root>InputGroup.Textarea#
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 props are passed through to the underlying <Textarea /> component.
<InputGroup.Root>
<InputGroup.Textarea placeholder="Enter message..." />
<InputGroup.Addon align="block-end">
<InputGroup.Button>Send</InputGroup.Button>
</InputGroup.Addon>
</InputGroup.Root>