Switch

The Switch component allows users to create a switch to represent boolean states.

Basic usage
You can access the value of a Switch using its component state.
tsx
Copied
1
<Switch id="switch" label="Click me!" />
2
<Text>Checked: {String(switchState.checked)}</Text>

Disabling
A Switch can be disabled using the defaultDisabled prop.
tsx
Copied
1
<Switch label="Disabled switch" defaultDisabled defaultChecked />

Inner labels
Inner labels for the checked and unchecked states of the Switch can be added through the onLabel and offLabel props.
tsx
Copied
1
<Switch label="Switch with inner labels" onLabel="ON" offLabel="OFF" size="lg" />

Setting values
If you need to update values programmatically, you should use the setChecked and setDisabled functions on the state.
tsx
Copied
1
<Button onClick={() => switchState.setChecked(!switchState.checked)}>Toggle checked</Button>
2
<Button onClick={() => switchState.setDisabled(!switchState.disabled)}>
3
  Toggle disabled
4
</Button>
5
<Switch id="switch" label="You can control this switch using the above buttons" />

Component API
checked
optional
boolean

Whether the switch is checked when using as a controlled component. Prefer using defaultChecked and the global component state.

color
optional
"primary" | "secondary" | "dark" | "gray" | "red" | "pink" | "grape" | "violet" | "indigo" | "blue" | "cyan" | "teal" | "green" | "lime" | "yellow" | "orange" | "success" | "error" | `primary.${number}` | `secondary.${number}` | `dark.${number}` | `gray.${number}` | `red.${number}` | `pink.${number}` | `grape.${number}` | `violet.${number}` | `indigo.${number}` | `blue.${number}` | `cyan.${number}` | `teal.${number}` | `green.${number}` | `lime.${number}` | `yellow.${number}` | `orange.${number}` | `success.${number}` | `error.${number}`

Color of the switch.

defaultChecked
optional
boolean

Whether the switch is initially checked.

defaultDisabled
optional
boolean

Whether the switch is initially disabled.

description
optional
React.ReactNode

Description displayed below the switch. Can be a string or a React component.

error
optional
React.ReactNode

Displays error message after the switch input. Can be a string or a React component.

id
optional
string

The ID referenced by the global component state.

label
optional
React.ReactNode

Switch label. Can be a string or a React component.

offLabel
optional
React.ReactNode

Inner label when the switch is unchecked. Can be a string or a React component.

onChange
optional
(value: boolean) => void

Callback when checked state changes when using as a controlled component. Prefer using the global component state.

onLabel
optional
React.ReactNode

Inner label when the switch is checked. Can be a string or a React component.

required
optional
Default
false
boolean

Adds red asterisk on the right side of label and sets required on input element

size
optional
"xs" | "sm" | "md" | "lg" | "xl"

Size of the switch.

validate
optional
((value: boolean) => string | undefined) | Array<(value: boolean) => string | undefined>

A single function or an array of functions that validate the input value.

State API
checked
optional
boolean

Whether the switch is checked

disabled
optional
boolean

Whether the switch is disabled

setChecked
optional
(checked: boolean) => void

Sets the value of the switch

setDisabled
optional
(disabled?: boolean) => void

Sets the disabled value of the switch. If the disabled value is not provided, the switch will be disabled

PrivacyTermsSupport