Selection controls: checkboxes

Selection controls allow the user to select options.

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

Checkbox hero example for menu options

Contents

Using checkboxes

Checkboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.

Making checkboxes accessible

Flutter's APIs support accessibility setting for large fonts, screen readers, and sufficient contrast. For more information, go to Flutter's accessibility and internationalization pages.

Checkboxes

Checkboxes example

CheckBox

The following example should five checkboxes. The first one is enabled, the second one has tristate enabled, and the last one is disabled.

Checkboxes example.

Checkbox states

Checkboxes can be selected, unselected, or indeterminate. Checkboxes have enabled, disabled, hover, focused, and pressed states.

Checkbox states in an array. Columns are enabled, disabled, hover, focused, pressed. Rows are selected, unselected, or indeterminite

Checkbox key properties

Checkbox attributes

 Property
ColoractiveColor on Checkbox
Checkedvalue on Checkbox
Tristatetristate on Checkbox
Disabledpass null to onChanged on Checkbox

Theming

Checkboxes support Material Theming and can be customized in terms of color, typography and shape.

The following example shows checkboxes with the Material Shrine Theme.

Checkboxes example with Shrine theme.