Switch

Also known as

Lightswitch, Toggle, Toggle switch

Switch is a binary control used to switch between two different states. When interacted with, the thumb of the switch travels along the track to indicate state. You can use a switch to control settings, preferences, or actions within an application or system.

Density
Mode

By default, the switch thumb sits to the left side of the track and is in an unchecked state.

  • You can set the switch state using the optional defaultChecked prop.
  • You can use the onChange event to read the value using the second parameter.
  • Only use the checked prop for a controlled switch that requires some logic for validating value.
  • We recommend that you always use a text description for a switch.