Switch

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

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

#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	—	boolean When `true`, user is not allowed to toggle the switch.
isChecked	—	boolean Determines if switch is enabled.
aria-label	—	string The label of the switch, required for screen readers.
onChange	—	(value: boolean) => void Callback for when user toggles the switch.
size	—	"sm" | "md" Determines the size of the switch.
id	—	string Switch's id.