imitation
Selector
A grid of selectable chips, every option visible at once.
Task tagsPick any number; every option stays on screen
In context
New taskChips with a description line: one project, one or more tags
Add a task
Project
Tags
Props
| Prop | Type | Required | Default |
|---|---|---|---|
options | SelectorOption<T>[] | Yes | — |
multiple | boolean | undefined | No | false |
value | T[] | undefined | No | — |
defaultValue | T[] | undefined | No | [] |
onValueChange | ((value: T[]) => void) | undefined | No | — |
disabled | boolean | undefined | No | false |
columns | number | undefined | No | — |
chipRole | "button" | "choice" | undefined | No | button |
aria-label | string | undefined | No | — |
className | string | undefined | No | — |
data-rebar-* attributes
data-rebar-component="selector" on the root; parts: chip, chip-label, chip-description.
Migrating to Ant Design
Not codemod-covered — the antd-mobile pattern. AntD desktop has no direct equivalent; a Checkbox.Group/Radio.Group with optionType="button" is the closest structural match.
Grid columns and choice semantics
columns lays the chips out as a real grid (display: grid with that many equal columns). chipRole="choice" swaps the default toggle buttons (aria-pressed) for role="checkbox" with aria-checked when multiple, or role="radio" inside a radiogroup otherwise (arrow keys move and select; the selected chip is the tab stop).
<Selector options={sizes} columns={3} chipRole="choice" aria-label="Size" />