Switch

Switch is a checkbox alternative specifically for turning features on and off.

#

#

The default size of a switch.

#

A small switch should be used in table rows.

#

#

  • When turning some setting or feature on or off.

#

  • If you're selecting an item or multiple items, use a checkbox instead.

#

  • Avoid generic labels like "Enabled" near the switch. This component is universally recognizable as a switch that flips something on or off. Instead, describe what is it that this switch toggles.

#

Inherits margin props.

NameDefaultDescription
isDisabled

boolean

When `true`, user is not allowed to toggle the switch.

isChecked

boolean

Determines if switch is enabled.

onChange

(value: boolean) => void

Callback for when user toggles the switch.

size

"sm" | "md"

Determines the size of the switch.

On this page

  • Usage
  • Medium
  • Small
  • Guidelines
  • When to use
  • When not to use
  • Content
  • Props