Components
Checkbox
Checkboxes allow users to select one or more items from a set. Checkboxes can turn an option on or off.
Interactive demo
This demo lets you preview the checkbox component.
<CodeViewerExample> <Checkbox checked onChange={function noRefCheck() {}} value="123" /> </CodeViewerExample>
Usage
Use checkboxes to:
- Select one or more options from a list
- Present a list containing sub-selections
- Turn an item on or off in a desktop environment
Principles
Appropriate selection controls
Checkboxes should be used instead of radio buttons if multiple options can be selected from a list.
Other selection controls
Selection controls allow users to complete tasks which involve making choices such as selecting options, switching settings on or off, or adding or removing items.
Radio buttons is an alternative selection control that can be used to enter decisions or declare preferences such as settings or dialogs.
Formatting
Anatomy
Checkbox consists of the checkbox itself that may be disabled or enabled. In addition, the checkbox may contain a label text to the right.
- Disabled checkbox
a. Container (disabled)
b. Label - Enabled checkbox
a. Container (enabled)
b. Label
Checkbox sizes
Checkbox has a default size and should always be used unless otherwise specified.
Default size
Behavior
Input fields collect user input in the following ways:
- Via a single-line text field
- Single-line text field only display one line of text.
- Via a text area
- Text areas are fixed-height fields.
Selecting multiple items in a list using checkboxes
Turning an item on or off using a checkbox