Switch

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#

import { Switch } from '@chakra-ui/react'

Usage#

<FormControl display='flex' alignItems='center'>
  <FormLabel htmlFor='email-alerts' mb='0'>
    Enable email alerts?
  </FormLabel>
  <Switch id='email-alerts' />
</FormControl>

Sizes#

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

<Stack align='center' direction='row'>
  <Switch size='sm' />
  <Switch size='md' />
  <Switch size='lg' />
</Stack>

Switch background color#

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

<Stack direction='row'>
  <Switch colorScheme='red' />
  <Switch colorScheme='teal' size='lg' />
</Stack>

State depending behavior#

States like isDisabled have an impact on the usability of a Switch and on the styles, except for the isInvalid and the isRequired prop.

<FormControl as={SimpleGrid} columns={{ base: 2, lg: 4 }}>
  <FormLabel htmlFor='isChecked'>isChecked:</FormLabel>
  <Switch id='isChecked' isChecked />

  <FormLabel htmlFor='isDisabled'>isDisabled:</FormLabel>
  <Switch id='isDisabled' isDisabled defaultChecked />

  <FormLabel htmlFor='isFocusable'>isFocusable:</FormLabel>
  <Switch id='isFocusable' isFocusable isDisabled />

  <FormLabel htmlFor='isInvalid'>isInvalid:</FormLabel>
  <Switch id='isInvalid' isInvalid />

  <FormLabel htmlFor='isReadOnly'>isReadOnly:</FormLabel>
  <Switch id='isReadOnly' isReadOnly />

  <FormLabel htmlFor='isRequired'>isRequired:</FormLabel>
  <Switch id='isRequired' isRequired />
</FormControl>

Props#

`aria-describedby`

Type

string

`aria-invalid`

Type

true

`aria-label`

Description

Defines the string that labels the checkbox element.

Type

string

`aria-labelledby`

Description

Refers to the id of the element that labels the checkbox element.

Type

string

`colorScheme`

Type

"whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"

Default

"blue"

`defaultChecked`

Description

If true, the checkbox will be initially checked.

Type

boolean

`defaultIsChecked`

Description

If true, the checkbox will be initially checked. @deprecated Please use the defaultChecked prop, which mirrors default React checkbox behavior.

Type

boolean

`id`

Description

id assigned to input

Type

string

`isChecked`

Description

If true, the checkbox will be checked. You'll need to pass onChange to update its value (since it is now controlled)

Type

boolean

`isDisabled`

Description

If true, the checkbox will be disabled

Type

boolean

`isFocusable`

Description

If true and isDisabled is passed, the checkbox will remain tabbable but not interactive

Type

boolean

`isInvalid`

Description

If true, the checkbox is marked as invalid. Changes style of unchecked state.

Type

boolean

`isReadOnly`

Description

If true, the checkbox will be readonly

Type

boolean

`isRequired`

Description

If true, the checkbox input is marked as required, and required attribute will be added

Type

boolean

`name`

Description

The name of the input field in a checkbox (Useful for form submission).

Type

string

`onBlur`

Description

The callback invoked when the checkbox is blurred (loses focus)

Type

((event: FocusEvent<HTMLInputElement, Element>) => void)

`onChange`

Description

The callback invoked when the checked state of the Checkbox changes.

Type

((event: ChangeEvent<HTMLInputElement>) => void)

`onFocus`

Description

The callback invoked when the checkbox is focused

Type

((event: FocusEvent<HTMLInputElement, Element>) => void)

`size`

Type

"sm" | "md" | "lg"

Default

"md"

`spacing`

Description

The spacing between the switch and its label text

Type

SystemProps["marginLeft"]

Default

0.5rem

`tabIndex`

Type

number

`value`

Description

The value to be used in the checkbox input. This is the value that will be returned on form submission.

Type

string | number

`variant`

Description

Variants for Switch are not implemented in the default theme. You can extend the theme to implement them.

Type

string