Forms · Application UI
Input Group
Grouped input shell with aligned addons, buttons, and embedded controls.
@byronwade/foundation@byronwade/utils@byronwade/button@byronwade/input@byronwade/textareaclass-variance-authority
Feature showcase
Installation
Features
6 examples
Default, With Button, With Text, Textarea, With Kbd, Validation.
API
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| align | "inline-start" | "inline-end" | "block-start" | "block-end" | "inline-start" | InputGroupAddon: where the addon sits within the group. |
| size | "xs" | "sm" | "icon-xs" | "icon-sm" | "xs" | InputGroupButton: size of an embedded button. |
| className | string | - | Classes merged onto the group shell. |
Dependencies
| Package | Kind | Description |
|---|---|---|
| @byronwade/foundation | registry | Installed through the byronwade/ui registry. |
| @byronwade/utils | registry | Installed through the byronwade/ui registry. |
| @byronwade/button | registry | Installed through the byronwade/ui registry. |
| @byronwade/input | registry | Installed through the byronwade/ui registry. |
| @byronwade/textarea | registry | Installed through the byronwade/ui registry. |
| class-variance-authority | npm | Installed from npm. |
Source and related
| File | Path |
|---|---|
| Component | registry/ui/input-group.tsx |
| Default example | content/examples/input-group/default.tsx |
| With Button example | content/examples/input-group/with-button.tsx |
| With Text example | content/examples/input-group/with-text.tsx |
| Textarea example | content/examples/input-group/textarea.tsx |
| With Kbd example | content/examples/input-group/with-kbd.tsx |
| Validation example | content/examples/input-group/validation.tsx |