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
Sizes
Pass the size
prop to change the size of the Switch
.
Switch background color
You can change the checked background color of the Switch
by passing the
colorScheme
prop.
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.
Props
aria-describedby
aria-describedby
string
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
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, Element>) => 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, Element>) => void)
size
size
"sm" | "md" | "lg"
"md"
spacing
spacing
The spacing between the switch and its label text
SystemProps["marginLeft"]
0.5rem
tabIndex
tabIndex
The tab-index property of the underlying input element.
number
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