Chip Group

Chip group with icons: one or several options. Free, MIT · Forms and input › Selects

Installation

npx valyro-cli@latest add chip-group

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

npm install valyro-ui

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

Prop	Type	Default
`items`	`ChipGroupItem[]`		The chips, in order. Or compose them as children: `ChipGroup.Item`.
`children`	`ReactNode`		The compound form instead of `items`: `ChipGroup.Item` elements.
`selectionMode`	`'single' \| 'multiple'`	`'multiple'`	`multiple`: any number of chips (checkboxes); `single`: one at a time (radios). Default `multiple`.
`value`	`string[]`		Selected values (controlled).
`defaultValue`	`string[]`		Initial `value` when uncontrolled.
`onValueChange`	`(value: string[]) => void`		Called with the new `value` when it changes.
`name`	`string`		Name of the native inputs, so the selection submits with a form.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Chip height and text size. Default `md`.
`variant`	`'soft' \| 'outline'`	`'soft'`	`soft`: filled chips; `outline`: bordered chips. Default `soft`.
`disabled`	`boolean`	`false`	Disables every chip.
`label`	`ReactNode`		Visible name above the chips, linked to the group. Outside a FormField a group needs a name (this, or an `aria-label` / `aria-labelledby`); inside one, the field's label names it.
`invalid`	`boolean`	`false`	Error state, e.g. from a FormField: aria-invalid on the group and a danger edge on the chips.

ChipGroup.Item (ChipGroupItemPart)