Input Group
A field with icons, text, and actions in one row.
Overview
InputGroup draws the border and background. InputGroupInput and InputGroupTextarea are the native fields. Addons, text, and buttons sit in the same row. Pair it with Kbd or Button when the page already installs those components.
Preview
Customize
Installation
Add the component with the CLI. It copies the files in and installs anything they depend on.
npx vinyaas add input-groupUsage
import { InputGroup, InputGroupAddon, InputGroupInput } from "@/components/ui/input-group";
export function SearchField() {
return (
<InputGroup>
<InputGroupAddon>Search</InputGroupAddon>
<InputGroupInput aria-label="Search" placeholder="Search users" />
</InputGroup>
);
}Examples
Search
A leading icon sits in the same field as the text.
Currency
A text addon names the unit without a second control.
URL
The protocol stays visible beside the editable host.
Command
A keyboard hint uses Kbd inside the same row.
Trailing action
A button inside the group submits or copies the value.
Textarea
A multiline field can share the group with a count.
15 characters
In practice
A documentation search pairs a labeled InputGroup with a Search button and a short shortcut tip.
API
Other attributes for the underlying element are passed through.
| Name | Type | Default | Description |
|---|---|---|---|
className | string | — | Merged onto the group, addon, field, or button with cn. |
disabled | boolean | — | Forwarded to InputGroupInput, InputGroupTextarea, and InputGroupButton. |
placeholder | string | — | Forwarded to InputGroupInput or InputGroupTextarea. |
variant | "icon" | "text" | "currency" | "action" | "icon" | Demo layout variant shown in the preview. |
Accessibility
- Name the input or textarea with aria-label or a label.
- Icons inside an addon are decorative.
- InputGroupButton is a native button.