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

import { Switch } from "@chakra-ui/core";

Enable email alerts?

<Flex justify="center" align="center">
  <FormLabel htmlFor="email-alerts">Enable email alerts?</FormLabel>
  <Switch id="email-alerts" />
</Flex>

<Flex justify="center" align="center">
  <FormLabel htmlFor="email-alerts">Enable email alerts?</FormLabel>
  <Switch id="email-alerts" />
</Flex>

Editable Example

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

<Stack align="center" isInline>
  <Switch size="sm" />
  <Switch size="md" />
  <Switch size="lg" />
</Stack>

<Stack align="center" isInline>
  <Switch size="sm" />
  <Switch size="md" />
  <Switch size="lg" />
</Stack>

Editable Example

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

<Stack isInline>
  <Switch color="red" />
  <Switch color="teal" size="lg" />
</Stack>

<Stack isInline>
  <Switch color="red" />
  <Switch color="teal" size="lg" />
</Stack>

Editable Example

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.
`children`	`React.ReactNode`	The children 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.

Proudly made in 🇳🇬

Released under the MIT License.