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 { Switch } from "@chakra-ui/react"


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


colorScheme"blue" | "cyan" | "gray" | "green" | "orange" | "pink" | "purple" | "red" | "teal" | "yellow" | "whiteAlpha" | "blackAlpha" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram""blue"
defaultCheckedbooleanIf `true`, the checkbox will be initially checked.-
defaultIsCheckedbooleanIf `true`, the checkbox will be initially checked. @deprecated Please use the `defaultChecked` prop, which mirrors default React checkbox behavior.-
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..-
size"sm" | "md" | "lg""md"
valuestring | numberThe value to be used in the checkbox input. This is the value that will be returned on form submission.-
variantstringVariants for Switch are not implemented in the default theme. You can extend the theme to implement them.-