Pickers
Pickers can be radios, checkboxes, filters, and toggles.
Last updated
Pickers can be radios, checkboxes, filters, and toggles.
Last updated
Pickers allow users to select an option (or options) before taking an action. Pickers can be found on booking flows and filters.
1. Radio Pickers (picker-radio)
2. Checkboxes (picker-checkboxes)
Radio buttons describe complex choices or provide all the available options next to each other. Radio groups must be stacked vertically.
1. Current Selection
2. Content Header (a-text-paragraph)
3. Supporting Content (a-text-paragraph) Supporting Content is optional and used to give extra information about that particular option.
4. Unselected Option:
5. Dividing Line
Checkboxes have the same structure as radio groups but are only used when the user can select multiple options. Each checkbox is independent of all other checkboxes in the list.
1. Current Selection
2. Content Header (a-text-paragraph)
3. Supporting Content (a-text-paragraph) Supporting Content is optional and used to give extra information about that particular option.
4. Unselected Option
5. Dividing Line
Filter pickers are used when the user can only select one option. Unlike radio groups, filter options are short (can only be one word or number) and there are less than 5 options in total.
1. Selection Filter pickers always have a default selection. Color is used to denote a selection.
2. Corner Radius
3. Structure
Toggles are used specifically for settings & preferences (Account, Pro Settings) when the user has a choice turning a certain state on or off.
1. Pill Structure: Off
2. Pill Structure: On
