Skip to Content


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.



Editable Example


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


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"-
styleConfigRecord<string, any>-
valuestring | numberThe value to be used in the checkbox input. This is the value that will be returned on form submission.-
Edit this page