components
Choice (design)
A visual alternative to radio buttons and checkboxes. They allow a selection of single or multiple options from a set of predefined options.
Usage
The choice component can be used when a user has to choose from a list of grouped options. They are a visual alternative to radio's and checkboxes and allow a selection of single or multiple options. Besides being a visual alternative, Choices are primarily used to create a list of related options that can be expanded. When selected, they can contain extra content or actions.
Single selection
When a user has to pick a single option, use the radio type choice.
Mulitple selections
When a user can choose from a set of multiple options, use the checkbox type choice.
Collapsible choices
Choices have the option to add extra body content (text, actions, form elements,...) that can be revealed after selecting an option.
Guidelines
The choice component should:
- Take up 100% available width of it's parent container.
- Info and Caption are optionable, the Title is always required.
Related components
- When a user has to make selection from more than 4 options, consider using the Select component.
- To create a simple list of options where the user needs to make a single selection, use the Radio component.
- To create a simple list of option where the user can make multiple selections, use the Checkbox component.
- To create a list of items that can be expanded and collapsed, use the Accordion component.