stringSwitch
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>
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
aria-describedbyType
aria-invalid
aria-invalidType
truearia-label
aria-labelDescription
Defines the string that labels the checkbox element.
Type
stringaria-labelledby
aria-labelledbyDescription
Refers to the id of the element that labels the checkbox element.
Type
stringcolorScheme
colorSchemeType
"whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"Default
"blue"defaultChecked
defaultCheckedDescription
If true, the checkbox will be initially checked.
Type
booleanid
idDescription
id assigned to input
Type
stringisChecked
isCheckedDescription
If true, the checkbox will be checked.
You'll need to pass onChange to update its value (since it is now controlled)
Type
booleanisDisabled
isDisabledDescription
If true, the checkbox will be disabled
Type
booleanisFocusable
isFocusableDescription
If true and isDisabled is passed, the checkbox will
remain tabbable but not interactive
Type
booleanisInvalid
isInvalidDescription
If true, the checkbox is marked as invalid.
Changes style of unchecked state.
Type
booleanisReadOnly
isReadOnlyDescription
If true, the checkbox will be readonly
Type
booleanisRequired
isRequiredDescription
If true, the checkbox input is marked as required,
and required attribute will be added
Type
booleanname
nameDescription
The name of the input field in a checkbox (Useful for form submission).
Type
stringonBlur
onBlurDescription
The callback invoked when the checkbox is blurred (loses focus)
Type
((event: FocusEvent<HTMLInputElement, Element>) => void)onChange
onChangeDescription
The callback invoked when the checked state of the Checkbox changes.
Type
((event: ChangeEvent<HTMLInputElement>) => void)onFocus
onFocusDescription
The callback invoked when the checkbox is focused
Type
((event: FocusEvent<HTMLInputElement, Element>) => void)size
sizeType
"sm" | "md" | "lg"Default
"md"spacing
spacingDescription
The spacing between the switch and its label text
Type
SystemProps["marginLeft"]Default
0.5remtabIndex
tabIndexDescription
The tab-index property of the underlying input element.
Type
numbervalue
valueDescription
The value to be used in the checkbox input. This is the value that will be returned on form submission.
Type
string | numbervariant
variantDescription
Variants for Switch are not implemented in the default theme. You can extend the theme to implement them.
Type
string