Switch

The Switch component is used as an alternative for the checkbox component.

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>

<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>

<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>

<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>

<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

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

Description

The tab-index property of the underlying input element.

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