Choice cards
Large selectable cards with drawn illustrations for single or multiple choice, with check badges, recommended and disabled states and an optional pick limit.
Preview
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| options | ChoiceOption[] | — | { value, title, description?, illustration?, disabled?, note?, recommended? }. |
| label | ReactNode | — | Question shown as the legend. |
| hint | ReactNode | — | Helper text under the legend. |
| type | "single" | "multiple" | "single" | Radio or checkbox semantics. |
| value | string | null | string[] | — | Controlled selection (string for single, array for multiple). |
| defaultValue | string | string[] | — | Uncontrolled starting selection. |
| onValueChange | (value) => void | — | Called with the new selection. |
| max | number | — | Multiple only: cap on picks; others disable when reached. |
| columns | 2 | 3 | 4 | 2 | Grid columns from the sm breakpoint. |
| layout | "card" | "row" | "card" | Stacked illustration card or compact row. |
| name | string | auto | Form field name for the inputs. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.