Choicebox
Large selectable cards for one or many choices.
Single choice
Use this for one choice, such as a plan. The user selects one item.
Selected: Starter
Multiple choice
Use multiple when the user can select more than one item, such as products. Set multiple on Choicebox.Group.
Selected: Product analytics
Disabled item
An unavailable item has a dashed border and a hatched fill.
Usage
These are defaults, not laws. Break one when you have a good reason, or when it makes the design more cohesive or more interesting.
- Choose the input from the number of options and what the user picks.
Component Use it for Radio One choice from 2 or 3 options that stay visible. Select One choice from 4 to about 10 options, or fewer options when space is tight. Combobox One or more choices from a long list, with typing to filter. Autocomplete Free text, with suggestions that the user can ignore. Choicebox A choice where each option needs a description, such as a plan. Checkbox An on or off value in a form that the user submits. Switch A setting that applies at once. - Name the group with
aria-labeloraria-labelledby. - The whole card is a label. Do not put links or buttons in an item.
API
Choicebox is a site component. Its parts accept standard HTML props unless listed below.
Choicebox.Group
| Prop | Type | Default | Description |
|---|---|---|---|
| multiple | boolean | false | Allows more than one selected item. |
| value | string | string[] | – | Controls the selection. Use an array when multiple is true. |
| defaultValue | string | string[] | – | Sets the initial selection. |
| onValueChange | (value, eventDetails) => void | – | Receives the value and Base UI event details. |
Choicebox.Item
| Prop | Type | Default | Description |
|---|---|---|---|
| value | string | – | Identifies the item in its group. |
| disabled | boolean | false | Prevents selection of the item. |