Input Group

A field joined with text, buttons and selects in one frame. Free, MIT · Forms and input › Text

One frame for a field and what belongs to it: text, a button, a select, a key hint. Segments are joined (one border between them, rounded only at the outer ends) and the group shows one focus ring. The first child that is not a InputGroup.Text / InputGroup.Addon is the field: it gets the group's id, aria-describedby (plus the ids of the text parts) and invalid, so <FormField> around the group labels the field. className, style, ref and the other props go to the group (role="group").

Installation

npx valyro-cli@latest add input-group

npx shadcn@latest add https://valyro.xyz/r/input-group.json

npm install valyro-ui

import 'valyro-ui/styles.css';
import { InputGroup } from 'valyro-ui';

Props

Prop	Type	Default
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Height and text size of the group; passed to the kit controls inside that do not set their own.
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Segments in a row, or stacked. Block addons stack the group by themselves.
`disabled`	`boolean`	`false`	Disables every control inside.
`invalid`	`boolean`		Error look for the whole group; inside a FormField it follows the field's error.

Compound parts

InputGroup.Text (InputGroupText), InputGroup.Addon (InputGroupAddon)

Related components

Text Input — Text fields
Textarea — Multiline text input
Search Input — Search field
Mentions Input — Text with @mentions and #tags, async suggestions
Tags Input — Tag entry
Select — Pick one option from a list
Multi Select — Pick several options
Combobox — Searchable select
Listbox — Option list on the page: one or several, Shift ranges
Chip Group — Chip group with icons: one or several options
Checkbox Tree — Checkbox tree: cascading, indeterminate state, keyboard
Checkbox — Checkboxes

Previous: Text Input · Next: Textarea · All Forms and input