Components
Input Group
A field with slots: put symbols, icons, units, buttons or menus before and after the input.
Import
import { InputGroup, InputGroupInput, InputGroupAddon } from '@rinzai/zen';Examples
With button
Controls in addons keep their own clicks; the text around them focuses the input.
API reference
<InputGroup>
A field with slots: compose an InputGroupInput with InputGroupAddons before or after it (a currency symbol, an icon, a unit, a button, a menu trigger). The whole group looks like one field and glows while anything in it has focus; clicking an addon's text focuses the input.
| Prop | Type | Default |
|---|---|---|
invalidShow the field in its error state (e.g. alongside aria-invalid on the input). | boolean | — |
<InputGroupInput>
The input inside an InputGroup: borderless, filling the space between the addons.
No props of its own; it accepts the props of the element it renders.
<InputGroupAddon>
Content before or after the input: text, an icon, a button or a menu trigger.
No props of its own; it accepts the props of the element it renders.