Compact selectable chip for filters. Host owns grouping and multi-select.
Also known as: filter chip, choice chips, selectable chip, filter pill
Install with the CLI, or copy the component source into your project.
Add choice-chip (npm)
1npx --yes -p @default-file/ui df-ui add choice-chip
Selectable chips for compact filters.
Small, medium, and large.
Compact selectable chip for filters and quick choices. Label ink is optically centered to cap height with text-box when available, and a 1cap line box otherwise.
| Prop | Type | Default | Notes |
|---|---|---|---|
| selected | boolean | - | Selected (pressed) appearance. |
| size | "sm" | "md" | "lg" | "md" | T-shirt height and type size. |
| disabled | boolean | - | Non-interactive chip. |
| children | ReactNode | - | Chip label. |
| className | string | - | Additional styles. |
Theme defaults live on :root. Override these globally or on a local host.
| Token | Type | Default | Notes |
|---|---|---|---|
| --primary | CSS color | var(--df-neutral-850, var(--df-neutral-900)) | Selected fill. |
| --border | CSS color | var(--df-neutral-100) | Unselected border. |
| --muted | CSS color | var(--df-neutral-50) | Hover fill. |
| --background | CSS color | var(--df-neutral-0) | Unselected fill. |
| --spacing-unit | CSS length | 0.25rem | Base unit for padding and gap. |
| --df-label-line-height | CSS line-height | var(--df-leading-none) | Line box for label flex centering. Defaults to --df-leading-none. When text-box is unavailable and the cap unit is supported, the kit sets this to 1cap so flex centering matches cap-height ink. |