Use switches for single cell options that can be turned on and off only.
If you have a cell with multiple options that can activated, consider using check marks.
Switch component supports right-to-left(RTL) language locales layout
(auto flip on RTL locales like Arabic).

Props

Name
Type
Default
Required
string
-
Required
({ event: SyntheticInputEvent<>, value: boolean }) => void
-
boolean
false
string
-
boolean
false

Usage guidelines

When to Use
  • For a binary option that can be either active or inactive.
  • Typically used on mobile, where toggling the Switch takes immediate effect.
When Not to Use
  • Choosing between related options. Each Switch should be considered a solitary, standalone option. For multiple, related choices, use Checkboxes or RadioButtons instead.

Example: Using a label

Whenever you are using a Switch component, you should use a Label with it to make your component accessible.

Combinations

switched
disabled
disabled
switched