Skip to Content
Sponsor

Switch

The Switch component is used as an alternative for the Checkbox component. You can switch between enabled or disabled states.

Switch must always be accompanied by a label, and follows the same keyboard workflow as a Checkbox.

Import#

Usage#

Editable Example

Sizes#

Pass the size prop to change the size of the Switch.

Editable Example

Switch background color#

You can change the checked background color of the Switch by passing the color prop.

Editable Example

Props#

NameTypeDescriptionDefault
colorSchemestring-
cssInterpolation<{}>The emotion's css style object-
defaultIsCheckedbooleanIf `true`, the checkbox will be initially checked.-
idstringid assigned to input-
isCheckedbooleanIf `true`, the checkbox will be checked. You'll need to pass `onChange` to update its value (since it is now controlled)-
isDisabledbooleanIf `true`, the checkbox will be disabled-
isFocusablebooleanIf `true` and `isDisabled` is passed, the checkbox will remain tabbable but not interactive-
isInvalidbooleanIf `true`, the checkbox is marked as invalid. Changes style of unchecked state.-
isReadOnlybooleanIf `true`, the checkbox will be readonly-
isRequiredbooleanIf `true`, the checkbox input is marked as required, and `required` attribute will be added-
namestringThe name of the input field in a checkbox (Useful for form submission).-
onChange((event: ChangeEvent<HTMLInputElement>) => void)The callback invoked when the checked state of the `Checkbox` changes..-
orientation"horizontal" | "vertical"-
sizestring-
styleConfigRecord<string, any>-
valuestring | numberThe value to be used in the checkbox input. This is the value that will be returned on form submission.-
variantstring-
Edit this page