Switch

Switch is a checkbox alternative specifically for turning features on and off. Flipping it applies the change immediately, without a form submit.

#Usage

#Medium

The default size of a switch.

#Disabled

#Small

A small switch should be used in table rows.

#Guidelines

#When to use

• When turning some setting or feature on or off.

#When not to use

• If you're selecting an item or multiple items, use a checkbox instead.
• If the value is submitted as part of a form rather than applied immediately, use a checkbox instead.

#Content

• 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.

#Props

Inherits margin props.

Name	Default	Description
isDisabled	—	booleanWhen true, user is not allowed to toggle the switch.
isChecked	—	booleanDetermines if switch is enabled.
aria-label	—	stringThe label of the switch, required for screen readers.
onChange	—	(value: boolean) => voidCallback for when user toggles the switch.
size	—	"sm" | "md"Determines the size of the switch.
id	—	stringSwitch's id.