string
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#
<DarkMode><FormControl display="flex" alignItems="center"><FormLabel htmlFor="email-alerts" mb="0">Enable email alerts?</FormLabel><Switch id="email-alerts" /></FormControl></DarkMode>
<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
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>
Props#
aria-describedby
aria-describedby
aria-invalid
aria-invalid
true
aria-label
aria-label
Defines the string that labels the checkbox element.
string
aria-labelledby
aria-labelledby
Refers to the id
of the element that labels the checkbox element.
string
colorScheme
colorScheme
"whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"
"blue"
defaultChecked
defaultChecked
If true
, the checkbox will be initially checked.
boolean
defaultIsChecked
defaultIsChecked
If true
, the checkbox will be initially checked.
@deprecated Please use the defaultChecked
prop, which mirrors default
React checkbox behavior.
boolean
id
id
id assigned to input
string
isChecked
isChecked
If true
, the checkbox will be checked.
You'll need to pass onChange
to update its value (since it is now controlled)
boolean
isDisabled
isDisabled
If true
, the checkbox will be disabled
boolean
isFocusable
isFocusable
If true
and isDisabled
is passed, the checkbox will
remain tabbable but not interactive
boolean
isInvalid
isInvalid
If true
, the checkbox is marked as invalid.
Changes style of unchecked state.
boolean
isReadOnly
isReadOnly
If true
, the checkbox will be readonly
boolean
isRequired
isRequired
If true
, the checkbox input is marked as required,
and required
attribute will be added
boolean
name
name
The name of the input field in a checkbox (Useful for form submission).
string
onBlur
onBlur
The callback invoked when the checkbox is blurred (loses focus)
((event: FocusEvent<HTMLInputElement>) => void)
onChange
onChange
The callback invoked when the checked state of the Checkbox
changes.
((event: ChangeEvent<HTMLInputElement>) => void)
onFocus
onFocus
The callback invoked when the checkbox is focused
((event: FocusEvent<HTMLInputElement>) => void)
size
size
"sm" | "md" | "lg"
"md"
spacing
spacing
The spacing between the switch and its label text
SystemProps["marginLeft"]
0.5rem
value
value
The value to be used in the checkbox input. This is the value that will be returned on form submission.
string | number
variant
variant
Variants for Switch
are not implemented in the default theme. You can extend the theme to implement them.
string
© 2021, Made with ❤️ by Creative Tim & Simmmple for a better web