Switch

Default

import { Switch } from '@eekodigital/raster';

<Switch.Root>
  <Switch.Thumb />
</Switch.Root>

On by default

<Switch.Root defaultChecked>
  <Switch.Thumb />
</Switch.Root>

With label

Enable notifications

<label style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
  Enable notifications
  <Switch.Root name="notifications">
    <Switch.Thumb />
  </Switch.Root>
</label>

Disabled

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

Props — Switch.Root

Prop	Type	Description
checked	boolean	Controlled on/off state.
defaultChecked	boolean	Initial state (uncontrolled).
onCheckedChange	(checked: boolean) => void	Called when state changes.
disabled	boolean	Disables the switch.
name	string	Form field name.