Input Group Component
Capsule-shaped input groups with addons, icons, and buttons featuring flat ink borders and orbit hover.
With Icon
With Text Addon
With Button
Complex Examples
With Keyboard Shortcut
With Textarea
GPT-4 Turbo
States
This field is required
Hover over inputs to see the orbit hover effect with expanding outline.
API Reference
InputGroup
Container for grouped input with addons.
| Prop | Type | Default |
|---|---|---|
| className | string | - |
InputGroupAddon
Addon container for icons, text, or buttons.
| Prop | Type | Default |
|---|---|---|
| align | "inline-start" | "inline-end" | "block-start" | "block-end" | "inline-start" |
InputGroupButton
Button styled for use inside input groups.
| Prop | Type | Default |
|---|---|---|
| size | "xs" | "sm" | "icon-xs" | "icon-sm" | "xs" |
| variant | "default" | "ghost" | "outline" | "accent" | "ghost" |