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

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


import { CSwitch } from '@chakra-ui/vue'


Editable Example
    <c-form-label html-for="email-alerts">Enable email alerts?</c-form-label>
    <c-switch id="email-alerts" />


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

Editable Example
<c-stack align="center" is-inline>
  <c-switch size="sm" />
  <c-switch size="md" />
  <c-switch size="lg" />

Switch background color#

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

Editable Example
<c-stack is-inline>
  <c-switch color="vue" />
  <c-switch color="red" size="lg" />


sizesm, md, lgThe size of the switch.
colorstringThe background color of the switch when checked.
namestringThe input name of the switch when used in a form.
valuestring, booleanThe value of the switch.
aria-labelstringThe aria-label of the switch for accessibility.
aria-labelledbystringThe aria-labelledby of the switch for accessibility.
isCheckedbooleanIf true, set the switch to the checked state.
defaultIsCheckedbooleanIf true, the checkbox will be initially checked.
isDisabledbooleanIf true, set the disabled to the invalid state.
isInvalidbooleanIf true, set the switch to the invalid state.


defaultThe children of the CSwitch component.

❤️ Contribute to this page

Caught a mistake or want to contribute to the documentation? Edit this page on GitHub!