Design documented
Component Status
React documented
Flutter documented
Design
Up to date
React
Up to date
Flutter
Up to date
Introduction
Checkboxes make it easy to compare available options and select multiple values.
Using one checkbox is the same as using a toggle (between two states). The difference is that a toggle triggers the change of state directly, whereas a checkbox only marks the state as changed, which needs to then be submitted.
When to use
Forms
Checkboxes be used in full page forms, in modals, on side panels, or floating panels.
Filtering and batch actions
Checkboxes can be used to filter data on a page, in a menu, or within a component. They can be found in tables for batch editing purposes.
Terms and conditions
Turning the checkbox input on or off can indicate whether you agree to terms and conditions, or not.
Related components
Checkboxes are used in forms on a full page, in modals, or in side panels.
Other selection components include the toggle or radio button .