Selector

Overview

Checkboxes

Checkboxes are used when there are multiple items to select in a list. Users can select zero, one, or any number of items.

When to use:

• Forms
  • Filtering and batch action
• Terms and conditions
  • Turning the checkbox input on or off can indicate whether you agree to the terms.
• Lists with sub-selections
  • When there is a parent and child relationship. You can use a parent checkbox to make a bulk selection of all list items. Unchecking the parent deselects all of the list items. Alternatively, you can select children individually when the parent is not selected, which is where the indeterminate state comes in to play.

When not to use:

• If a user can select only one option from a list, radio buttons should be used instead of checkboxes. Checkboxes allow the user to select multiple items in a set whereas radio buttons allow the user to select only one option.

Radio Buttons

Use radio buttons when you have a group of mutually exclusive choices and only one selection from the group is allowed.

When to use:

• Forms
  • Can be used in tiles, data tables, modals, side panels, and in forms on full pages.
• Settings
  • Used to change from one setting to another in a menu, page, or component.

When not to use:

• If a user can select from multiple options, use checkboxes instead of radio buttons. Radio buttons allow the user to select only one item in a set whereas checkboxes allow the user to select multiple items.

Demo

Props

Events