Chips

Labeled multi-select group of Chips with Field Wrapper chrome. Preferred over composing Chip alone.

Preview

Code

Inspect

Interests

Select all that apply

⌥-click (Option/Alt) nested elements to edit their props

label

helperText

helperIconName

showHelper

disabled

aria-label

Prop	Type	Description
`size`	`"large" \| "medium" \| "small" \| "extraSmall"`	Pill height and type scale for every chip.
`color`	`"primary" \| "secondary"`	Unselected border treatment.
`labelStyle`	`"thick" \| "thin"`	Chip label weight.
`label`	`ReactNode`	Field label above the chip set.
`helperText`	`ReactNode`	Helper or validation message below.
`helperIconName`	`FaIconName`	Optional icon beside helper text.
`showHelper`	`boolean`	Show helper row when helperText is set.
`options`	`ChipGroupOption[]`	Chip options (value + label; optional icons).
`value`	`string[]`	Controlled selected values (multi-select).
`defaultValue`	`string[]`	Uncontrolled initial selected values.
`onChange`	`(value: string[]) => void`	Called when the selection changes.
`disabled`	`boolean`	Disables the whole group.
`aria-label`	`string`	Accessible name when the field label is insufficient.