Switch

A control that allows the user to toggle between checked and not checked.

Features

Full keyboard navigation.

Can be controlled or uncontrolled.

Install the component from your command line.

npm install @tealess/switch

Import all parts and piece them together.

import * as Switch from "@tealess/switch";

export default () => (
  <Switch.Root>
    <Switch.Thumb />
  </Switch.Root>
);

Contains all the parts of a switch. An input will also render when used within a form to ensure events propagate correctly.

Data attribute	Values
`[data-state]`	`"checked" \| "unchecked"`
`[data-disabled]`	Present when disabled

The thumb that is used to visually indicate whether the switch is on or off.

Prop	Type	Default
`asChild`	`boolean`	`false`

Data attribute	Values
`[data-state]`	`"checked" \| "unchecked"`
`[data-disabled]`	Present when disabled

Key	Description
`Space`	Toggles the component's state.
`Enter`	Toggles the component's state.

PreviousSlider