Input Group
Wraps an input with addons (prefix/suffix icons, text labels, or buttons) into a single composite control. The seams between the parts are flattened so it looks like one element.
With icon
Leading or trailing icon addon.
With text
Static text label as an addon (currency symbol, units).
USD
API Reference
Props, events, and slots for each sub-component.
InputGroup
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| class | string | — | Wrapper that flattens the seams between the input and its addons. |
InputGroupAddon
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| align | "start" | "end" | "start" | Visual position relative to the input. |
InputGroupButton
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | ButtonVariants["variant"] | "ghost" | Same enum as Button. |
| size | ButtonVariants["size"] | "sm" | Same enum as Button. |
InputGroupInput / InputGroupTextarea
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| class | string | — | Borderless input/textarea variants that sit flush inside the group. |
InputGroupText
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| class | string | — | Static text addon (currency symbol, unit, prefix label). |