Switch

A control that indicates whether a setting is on or off.

Notifications

import { Switch } from '@ontoui/react';

<label>
  <Switch.Root>
    <Switch.Thumb />
  </Switch.Root>
  Notifications
</label>;

Anatomy

Part	Element	Description
Switch.Root	<span>	The switch track. Renders a hidden input beside.
Switch.Thumb	<span>	The movable indicator that slides when the switch is toggled.

Examples

Default checked

Use the defaultChecked prop to render the switch in the on state initially.

Enabled by default

<label>
  <Switch.Root defaultChecked>
    <Switch.Thumb />
  </Switch.Root>
  Enabled by default
</label>

Disabled

Use the disabled prop to prevent interaction.

Disabled offDisabled on

<label>
  <Switch.Root disabled>
    <Switch.Thumb />
  </Switch.Root>
  Disabled
</label>

API Reference

Switch.Root

Prop	Type	Default
children?	ReactNode	—
id?	string	—
className?	string	—
checked?	boolean	—
defaultChecked?	boolean	—
disabled?	boolean	—
readOnly?	boolean	—
required?	boolean	—
name?	string	—
value?	string	—
form?	string	—
nativeButton?	boolean	—
uncheckedValue?	string	—
onCheckedChange?	(checked: boolean, eventDetails: { reason: "none"; event: Event; cancel: () => void; allowPropagation: () => void; isCanceled: boolean; isPropagationAllowed: boolean; trigger: Element; }) => void	—
ref?	Ref<HTMLSpanElement>	—

Switch.Thumb

Prop	Type	Default
className?	string	—
ref?	Ref<HTMLSpanElement>	—