Switch

The Switch component allows users to toggle between two different states. You can set a specific initial value using the defaultValue prop for an uncontrolled switch or setting the initial value of the state of a controlled switch accordingly. The name prop also needs to be specified for identifying the Switch when submitting it in a form.

OverviewPropertiesUsage

Switch vs. Checkbox

Switch

A Switch has two different states, on and off.

• Use a Switch to toggle an option on or off.
• Use a Switch when an immediate action gets triggered, like turning a setting's option on or off.
• Use a Switch when users toggle independent options on or off.

Checkbox

A Checkbox can have three states, unchecked, checked, and indeterminate.

• Use a Checkbox if multiple related items can be selected from a list.
• Use a single Checkbox when there is no immediate action triggered. For example, a selection needs to be confirmed by a further step, like a submit button in a form.
• Use the indeterminate state to convey that some children of a hierarchically higher Checkbox are checked. For example, a Select all Checkbox in a table header is indeterminate if not all individual child Checkboxes are checked.