Switch

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#

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

Enable email alerts?

Editable Example

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

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" />
</c-stack>

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" />
</c-stack>

Name	Type	Description
`size`	`sm`, `md`, `lg`	The size of the switch.
`color`	`string`	The background color of the switch when checked.
`name`	`string`	The input name of the switch when used in a form.
`value`	`string`, `boolean`	The value of the switch.
`aria-label`	`string`	The aria-label of the switch for accessibility.
`aria-labelledby`	`string`	The `aria-labelledby` of the switch for accessibility.
`isChecked`	`boolean`	If `true`, set the switch to the checked state.
`defaultIsChecked`	`boolean`	If `true`, the checkbox will be initially checked.
`isDisabled`	`boolean`	If `true`, set the disabled to the invalid state.
`isInvalid`	`boolean`	If `true`, set the switch to the invalid state.

Name	Description
default	The children of the `CSwitch` component.

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