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

Description

The visual color appearance of the component

Type
"whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink"
Default
blue

defaultChecked

Description

If true, the checkbox will be initially checked.

Type
boolean
Default
false

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

isDisabled

Description

If true, the checkbox will be disabled

Type
boolean
Default
false

isFocusable

Description

If true and isDisabled is passed, the checkbox will remain tabbable but not interactive

Type
boolean
Default
false

isInvalid

Description

If true, the checkbox is marked as invalid. Changes style of unchecked state.

Type
boolean
Default
false

isReadOnly

Description

If true, the checkbox will be readonly

Type
boolean
Default
false

isRequired

Description

If true, the checkbox input is marked as required, and required attribute will be added

Type
boolean
Default
false

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

Description

The size of the Switch

Type
"sm" | "md" | "lg"
Default
md

spacing

Description

The spacing between the switch and its label text

Type
ResponsiveValue<string | number | (string & {})>
Default
0.5rem

tabIndex

Description

The tab-index property of the underlying input element.

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

The variant of the Switch

Type
string
Edit this page on GitHub

Proudly made inNigeria by Segun Adebayo

Deployed by â–² Vercel