Components

Input Group

A field with slots: put symbols, icons, units, buttons or menus before and after the input.

https://.dev

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.

Filter

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
`invalid` Show the field in its error state (e.g. alongside aria-invalid on the input).	`boolean`	`—`
`size` Height, matching Button's: sm (32px), default (40px) or lg (44px).	`"default" \| "lg" \| "sm"`	`default`

<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.