Switch

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

Usage

Used to toggle between two states, typically on and off.

import { Switch } from "@elemnts-ui/react";

<Switch.Root>
  <Switch.Control>
    <Switch.Thumb />
  </Switch.Control>
  <Switch.Label>Enable notifications</Switch.Label>
  <Switch.HiddenInput />
</Switch.Root>;

With label

The Switch.Label component is used to provide a descriptive label for the switch, which is essential for accessibility.

Disabled

Set the disabled prop on Switch.Root to make the switch non-interactive.

API Reference

Switch

The root container that manages the switch state.

Prop	Type	Default
asChild	`boolean`	`false`
checked	`boolean`	-
disabled	`boolean`	-
ids	`Partial<{ root: string; hiddenInput: string; control: string; label: string; thumb: string }>`	-
invalid	`boolean`	-
label	`string`	-
name	`string`	-
onCheckedChange	`(details: CheckedChangeDetails) => void`	-
readOnly	`boolean`	-
required	`boolean`	-
value	`string \| number`	`"on"`

SwitchRootProvider

Provides switch state created with useSwitch to its child components.

Prop	Type	Default
value	`UseSwitchReturn`	required
asChild	`boolean`	`false`

SwitchLabel

The accessible label for the switch.

Prop	Type	Default
asChild	`boolean`	`false`

SwitchControl

The visual track for the switch.

Prop	Type	Default
asChild	`boolean`	`false`

SwitchThumb

The visual thumb that slides along the control.

Prop	Type	Default
asChild	`boolean`	`false`

SwitchHiddenInput

A hidden native input used for form submission.

Prop	Type	Default
asChild	`boolean`	`false`

SwitchContext

Provides the switch API to a render function.

Prop	Type	Default
children	`(value: UseSwitchReturn) => ReactNode`	-