Components / inputs

Chip

Selectable pill for filtering or choosing among a few options.

import { Chip } 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 { Chip } from '@basiiik/ui';

<Chip>Open</Chip>

• Hover and Focused are CSS. Selected is selected for a standalone chip (aria-pressed) or the parent ChipGroup's value (radio or toggle). Disabled uses the disabled attribute.
• Storybook: Inputs/Chip.

Props

Other props

States. Hover and Focused are CSS. Selected is selected for a standalone chip (aria-pressed) or the parent ChipGroup's value (radio or toggle). Disabled uses the disabled attribute.

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

Use it when

• Filtering a list or result set by a few categories
• Choosing among a small set of options where seeing all of them helps

Do not use it when

• Removable values the user typed or picked (use Tag)
• Read-only status (use Badge)
• Switching views (use Tabs)
• More than about 8 options (use Select or Combobox)

Rules for agents

• Put related Chips in a ChipGroup, which owns selection; standalone, a Chip is a toggle with selected and onClick
• Give every Chip in a group a unique value
• Keep labels short so the Chips fit on one or two lines
• Use icon only as decoration next to the label

Avoid

• A Chip for a removable value (use Tag)
• A Chip for read-only status (use Badge)
• Setting selected on Chips inside a ChipGroup (the group ignores it)
• Chips that run actions instead of selecting (use Button)

Writing the content

• One to three words: 'Open', 'In progress', 'Design'
• Use sentence case

Keyboard

• Space and Enter toggle
• Tab moves between chips (multiple) or into the group (single)
• Arrow keys move and select within a single-choice group

Accessibility

• aria-pressed reflects Selected for toggle chips
• role="radio" with aria-checked for single choice
• Disabled uses the native disabled attribute, so a disabled Chip is skipped by Tab

Colour tokens it reads

Related

• Chip Group
• Tag
• Badge

inputs 16 Figma variants Try it in the live demo