Build · New

Chip

Small interactive elements: they suggest, act as shortcuts, filter, hold entered values or work as multi-select options.

Preview

Mirrored is the same English content laid out right to left: it separates a mirroring bug from a translation one.

SoonInstalling from the registry opens at launch. Until then the command below is what it will be.

npx shadcn@latest add @ritla/chip

Dependencies it brings: @base-ui/react, @phosphor-icons/react

import { FilterChip, SuggestionChip } from "@/components/ui/chip";

<SuggestionChip size="lg" onClick={() => setAmount(100)}>100 SAR</SuggestionChip>
<FilterChip defaultSelected>Income</FilterChip>

A shortcut with an icon or a flag, and an optional count with badge.

A toggle button: selected shows a check, and caret adds a caret for a chip that opens its options.

A value the person picked; onRemove adds a remove button with a clear name (Remove Layla Haddad).

A multi-select option with a real checkbox; the whole chip is its label.

Prop	Type	Default	Description
`children`	`ReactNode`		Figma's Label.
`size`	`"sm" \| "lg"`	`"sm"`	Figma's Size: 24 or 32px.
`badge`	`ReactNode`		Figma's Show Badge: a count after the label.
`leading / flag`	`IconComponent \| ReactNode / string`		Assist: Figma's Style = Icon or Flag.
`…button props`	`ComponentProps<"button">`		`onClick`, `disabled` and the rest.

Prop	Type	Default	Description
`selected / defaultSelected`	`boolean`		Figma's Selected.
`onSelectedChange`	`(selected: boolean) => void`		When it's toggled.
`caret`	`boolean`	`false`	Figma's Show Trailing: a caret while selected.

Prop	Type	Description
`leading / flag`	`IconComponent \| ReactNode / string`	Figma's Leading: an icon, an avatar or a flag.
`onRemove`	`() => void`	Adds the remove button.
`disabled`	`boolean`	Disabled.

Prop	Type	Description
`checked / defaultChecked / onCheckedChange`	`…`	Figma's Selected, as on Checkbox.
`leading / flag`	`IconComponent \| ReactNode / string`	Figma's Leading.
`name / value / disabled`	`…`	For forms.

Keys are written for left-to-right. In right-to-left the arrow keys swap: the one pointing toward the reading direction moves forward.

Key	Action
`Tab`	Between chips and remove buttons.
`SpaceEnter`	Activates or toggles the chip (the checkbox with Space).

Suggestion and assist chips are buttons; the filter chip is a button with aria-pressed; the checkbox chip is role="checkbox" named by its text.
The remove button is named "Remove" plus the value, in the page language.
The touch target is 48px tall, even for the small chip.

Icons, flags and the checkbox sit at the chip's start (the right), the remove button and the caret at its end.

Numerals: Amounts and counts in chips follow numerals through formatNumber.
Arabic typography: label-12 at sm and label-14 at lg, Medium.