Components / inputs

Chip Group

A wrapping row of Chips for choosing one or several options, such as filters.

import { ChipGroup } from '@basiiik/ui';

The snippet an agent gets

From get_component_snippet, with the required props filled in from the spec. Every snippet is type-checked against the library before it is shipped.

import { ChipGroup, Chip } from '@basiiik/ui';

<ChipGroup aria-label="Status"><Chip value="open">Open</Chip><Chip value="closed">Closed</Chip></ChipGroup>

• Example values were filled in for the required prop aria-label: replace them with your own.
• type="single" is a radiogroup (one Tab stop, arrows move and select); type="multiple" is a group of toggle buttons. Controlled with value and onValueChange, or uncontrolled with defaultValue. Needs aria-label.
• Compose with: chip.
• Storybook: Inputs/Chip.

Props

Other props

States. type="single" is a radiogroup (one Tab stop, arrows move and select); type="multiple" is a group of toggle buttons. Controlled with value and onValueChange, or uncontrolled with defaultValue. Needs aria-label.

Native attributes such as className, id and data-* are forwarded to the root element.

Use it when

• A handful of short options such as filters or tags to include

Do not use it when

• Long option lists (use Select or Combobox)
• Mutually exclusive options that need descriptions (use Radio)

Rules for agents

• Name the group with aria-label or aria-labelledby; it is required
• Use type="single" for one choice (radio behaviour) and type="multiple" for several (checkbox behaviour)
• Control it with value and onValueChange: a string or null in single mode, an array of strings in multiple mode
• Keep to about 2 to 8 Chips; apply filters as the selection changes

Avoid

• A Chip Group with many options (use Select or Combobox)
• Mutually exclusive options that need descriptions (use Radio)
• Switching views with a single-choice Chip Group (use Tabs)
• Requiring an Apply button for filter Chips that could apply immediately

Writing the content

• The group label names what the Chips filter or choose: "Status", "Team"
• Use sentence case

Keyboard

• Tab enters the group; in single choice one Tab stop with arrow keys moving and selecting
• In multiple choice each chip is a Tab stop; Space toggles

Accessibility

• aria-label or aria-labelledby names the group
• aria-required or aria-invalid when part of a form

Colour tokens it reads

Related

• Chip
• Select
• Radio
• Checkbox

inputs 2 Figma variants Try it in the live demo