Switch

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

Chakra UI Pro: Start your application or marketing site with a growing collection of beautiful and responsive UI components.

Ads via Chakra UI

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#

Enable email alerts?

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

Editable Example

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>

Editable Example

Switch background color#

You can change the checked background color of the Switch by passing the color 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>

Editable Example

Props#

Name	Type	Description	Default
aria-describedby	`string`		-
aria-invalid	`true`		-
aria-label	`string`	Defines the string that labels the checkbox element.	-
aria-labelledby	`string`	Refers to the `id` of the element that labels the checkbox element.	-
colorScheme	`"blue" \| "cyan" \| "gray" \| "green" \| "orange" \| "pink" \| "purple" \| "red" \| "teal" \| "yellow" \| "whiteAlpha" \| "blackAlpha" \| "linkedin" \| "facebook" \| "messenger" \| "whatsapp" \| "twitter" \| "telegram"`		`"blue"`
defaultChecked	`boolean`	If `true`, the checkbox will be initially checked.	-
defaultIsChecked	`boolean`	If `true`, the checkbox will be initially checked. @deprecated Please use the `defaultChecked` prop, which mirrors default React checkbox behavior.	-
id	`string`	id assigned to input	-
isChecked	`boolean`	If `true`, the checkbox will be checked. You'll need to pass `onChange` to update its value (since it is now controlled)	-
isDisabled	`boolean`	If `true`, the checkbox will be disabled	-
isFocusable	`boolean`	If `true` and `isDisabled` is passed, the checkbox will remain tabbable but not interactive	-
isInvalid	`boolean`	If `true`, the checkbox is marked as invalid. Changes style of unchecked state.	-
isReadOnly	`boolean`	If `true`, the checkbox will be readonly	-
isRequired	`boolean`	If `true`, the checkbox input is marked as required, and `required` attribute will be added	-
name	`string`	The name of the input field in a checkbox (Useful for form submission).	-
onBlur	`((event: FocusEvent<HTMLInputElement>) => void)`	The callback invoked when the checkbox is blurred (loses focus)	-
onChange	`((event: ChangeEvent<HTMLInputElement>) => void)`	The callback invoked when the checked state of the `Checkbox` changes..	-
onFocus	`((event: FocusEvent<HTMLInputElement>) => void)`	The callback invoked when the checkbox is focused	-
size	`"sm" \| "md" \| "lg"`		`"md"`
spacing	`SystemProps["marginLeft"]`	The spacing between the switch and its label text	`0.5rem`
value	`string \| number`	The value to be used in the checkbox input. This is the value that will be returned on form submission.	-
variant	`string`	Variants for `Switch` are not implemented in the default theme. You can extend the theme to implement them.	-

Edit this page