Switch

Used to capture a binary state

Activate Chakra

Usage

import { Switch } from "chakra-ui-solid";

<Switch.Root>
  <Switch.HiddenInput />
  <Switch.Control>
    <Switch.Thumb />
  </Switch.Control>
  <Switch.Label />
</Switch.Root>

Switch.Root renders the <label> and Switch.HiddenInput renders the real <input type="checkbox"> inside it, so a click anywhere in the row flips the switch. The input is not optional — without it there is nothing focusable, nothing to submit, and nothing for the label to point at.

If you prefer a closed component composition, check out the snippet below.

Shortcuts

The Switch component also provides a set of shortcuts for common use cases.

SwitchControl

The Switch.Control renders the Switch.Thumb within it by default.

This works:

<Switch.Control>
  <Switch.Thumb />
</Switch.Control>

This might be more concise, if you don’t need to customize the thumb:

<Switch.Control />

Examples

Sizes

Pass the size prop to the Switch.Root component to change the size of the switch component.

xssmmdlg

Variants

Pass the variant prop to the Switch.Root component to change the visual style of the switch.

raisedsolid

Colors

Pass the colorPalette prop to the Switch.Root component to change the color scheme of the component.

Controlled

Use the checked and onCheckedChange prop to control the state of the switch.

Activate Chakra

Form Validation

Here’s an example of a switch driven by a signal, with a validation message on submit.

Disabled

Pass the disabled prop to the Switch.Root component to disable the switch.

Activate Chakra

Invalid

Pass the invalid prop to the Switch.Root component to indicate an error state for the switch.

Activate Chakra

Track Indicator

Use the Switch.Indicator component to display different indicators based on the checked state.

Switch me

Thumb Indicator

Use the Switch.ThumbIndicator component to add an icon to the switch thumb.

Switch me

Closed Component

Here’s how to setup the Switch for a closed component composition.

Activate ChakraWith a track label

Props

Root

SwitchRootProps
Prop	Default	Type
`checked`	—	`boolean` The controlled checked state. Pass `undefined` for uncontrolled.
`defaultChecked`	`false`	`boolean` The state a fresh, uncontrolled switch starts in.
`disabled`	—	`boolean` Whether the switch can be toggled or focused at all. Inherited from a surrounding Field.
`form`	—	`string` The id of a form elsewhere on the page that this switch submits with.
`id`	—	`string` Seeds every id the machine hands out — the root is `switch:{id}`, the hidden input `switch:{id}:input`. Defaults to a generated id, and does not become the root element's own `id`: pass `ids` to control the attributes themselves.
`ids`	—	`SwitchElementIds` Override individual element ids, for pointing an ARIA relationship at a specific one.
`invalid`	—	`boolean` Whether the switch shows its error treatment. Inherited from a surrounding Field.
`label`	`'switch'`	`string` The localized string naming the control for assistive technology.
`name`	—	`string` The hidden input's `name`, for form submission.
`onCheckedChange`	—	`(details: SwitchCheckedChangeDetails) => void` Called whenever the checked state changes, from either side.
`readOnly`	—	`boolean` Whether the switch refuses to change while staying focusable. Inherited from a Field.
`required`	—	`boolean` Whether the form requires this switch to be on. Inherited from a surrounding Field.
`size`	—	`ConditionalValue<'xs' \| 'sm' \| 'md' \| 'lg' \| PresetVariant<'swittch', 'size'>>` The track's width and height, and the indicator's font size.
`value`	`'on'`	`string \| number` The hidden input's `value`, for form submission.
`variant`	—	`ConditionalValue<'solid' \| 'raised' \| PresetVariant<'swittch', 'variant'>>` How the track and thumb are drawn — `solid` puts a full-height thumb on a full-height track, `raised` shrinks the track to a rail and lets the thumb sit proud of it.

Plus Omit<HTMLChakraProps<"label">, "id"> — the whole style-prop surface and the DOM attributes of the element it renders, several hundred names listed as their sources rather than expanded — and the three every component takes: as, render and unstyled.

RootProvider

SwitchRootProviderProps
Prop	Default	Type
`size`	—	`ConditionalValue<'xs' \| 'sm' \| 'md' \| 'lg' \| PresetVariant<'swittch', 'size'>>` The track's width and height, and the indicator's font size.
`value`*	—	`CreateSwitchReturn` A machine built by {@link createSwitch}, so the consumer owns it rather than the Root.
`variant`	—	`ConditionalValue<'solid' \| 'raised' \| PresetVariant<'swittch', 'variant'>>` How the track and thumb are drawn — `solid` puts a full-height thumb on a full-height track, `raised` shrinks the track to a rail and lets the thumb sit proud of it.

Plus HTMLChakraProps<"label"> — the whole style-prop surface and the DOM attributes of the element it renders, several hundred names listed as their sources rather than expanded — and the three every component takes: as, render and unstyled.

Indicator

SwitchIndicatorProps
Prop	Default	Type
`fallback`	—	`JSX.Element` Drawn in the indicator's place while the switch is off.

Plus HTMLChakraProps<"span"> — the whole style-prop surface and the DOM attributes of the element it renders, several hundred names listed as their sources rather than expanded — and the three every component takes: as, render and unstyled.

ThumbIndicator

SwitchThumbIndicatorProps
Prop	Default	Type
`fallback`	—	`JSX.Element` Drawn in the thumb indicator's place while the switch is off.