Input Group
Attaches icons, text and buttons to an input.
Installation
npx shadcn@latest add @blank/input-groupUsage
import {
InputGroup,
InputGroupAddon,
InputGroupButton,
InputGroupInput,
InputGroupText,
} from "@/components/ui/input-group"<InputGroup>
<InputGroupAddon>
<SearchIcon />
</InputGroupAddon>
<InputGroupInput placeholder="Search" />
</InputGroup>Examples
Sizes
The group carries the height, so the input inside never needs its own size.
Keyboard hint
Textarea
align="block-end" puts the addon under the field. That is the layout for a composer with attachments and a send button.
52% used
API Reference
InputGroup
Every div prop, plus:
| Prop | Type | Default |
|---|---|---|
size | "sm" | "default" | "lg" | "default" |
variant | "default" | "secondary" | "default" |
InputGroupAddon
Every div prop, plus:
| Prop | Type | Default |
|---|---|---|
align | "inline-start" | "inline-end" | "block-start" | "block-end" | "inline-start" |
InputGroupButton
A Button with these defaults:
| Prop | Type | Default |
|---|---|---|
variant | any Button variant | "ghost" |
size | any Button size | "xs" |
type | "button" | "submit" | "reset" | "button" |
InputGroupInput, InputGroupTextarea, InputGroupText
InputGroupInput and InputGroupTextarea take every prop of Input and Textarea; InputGroupText is a span for static prefixes and suffixes.