Input Group
A compound input component for attaching icons, text labels, and action buttons to an input field.
Installation
pnpm dlx stera-ui@latest add input-group
Composition
Use the following composition to build an InputGroup:
InputGroup
├── InputGroupInput or InputGroupTextarea
├── InputGroupAddon
├── InputGroupButton
└── InputGroupTextAlign
Use the align prop on InputGroupAddon to position the addon relative to the input.
For proper focus management, InputGroupAddon should always be placed after
InputGroupInput or InputGroupTextarea 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
Text Addons
With Button
With Kbd
Sizes
| Size | Description |
|---|---|
sm | Small |
md | Medium (default) |
lg | Large |
Textarea
Line 1, Column 1
With Label
Your public-facing URL.
API Reference
InputGroupAddon
| Prop | Type | Description |
|---|---|---|
align | "inline-start" | "inline-end" | "block-start" | "block-end" | Position relative to the input |
Subcomponents
| Component | Description |
|---|---|
InputGroupInput | The text input — accepts all Input props including size |
InputGroupTextarea | A textarea variant of the input control |
InputGroupText | Plain text label inside an addon |
InputGroupButton | Button inside an addon — accepts all Button props |