Input group
Attach icons, text, or buttons to an input.
Add-ons
A leading icon, a trailing unit, and a trailing action button.
API reference
An input with attached add-ons. Wrap an InputGroupInput (or Textarea) with InputGroupAddon slots holding icons, text, or buttons.
Anatomy
InputGroup | Bordered container that visually merges the control and add-ons. |
InputGroupAddon | An add-on slot; align sets inline/block start or end. |
InputGroupButton | A compact button inside an add-on. |
InputGroupText | Muted text inside an add-on (e.g. a unit like kWh). |
InputGroupInput | The text input control inside the group. |
InputGroupTextarea | A multi-line control variant inside the group. |
Props
| Part | Prop | Type | Default |
|---|---|---|---|
InputGroup | align | "inline-start" | "inline-end" | "block-start" | "block-end" | "inline-start" |