Checkbox

An input that lets users select one or more options from a limited number of choices. Each selection is independent (with some exceptions).

Component Status

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.

null

Checkboxes are used in forms on a full page, in modals, or in side panels.

Other selection components include the toggle or radio button .