Switch

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

    SourceTheme source@chakra-ui/switch

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

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
Edit this page on GitHub

Proudly made inNigeria by Segun Adebayo

Deployed by Vercel