Switch

Switch is an accessible on/off toggle. Built on Ark UI switch, sourced from Shark UI.

Airplane mode

// apps/docs/src/components/examples/switch/default/react.tsx
import { Switch, SwitchControl, SwitchThumb, SwitchLabel } from '@cloudvoyant/helical-react';

export default function ReactSwitchDefault() {
  return (
    <Switch defaultChecked>
      <SwitchControl>
        <SwitchThumb />
      </SwitchControl>
      <SwitchLabel>Airplane mode</SwitchLabel>
    </Switch>
  );
}

<!-- apps/docs/src/components/examples/switch/default/svelte.svelte -->
<script lang="ts">
  import { Switch, SwitchControl, SwitchThumb, SwitchLabel } from '@cloudvoyant/helical-svelte';
</script>

<Switch defaultChecked>
  <SwitchControl>
    <SwitchThumb />
  </SwitchControl>
  <SwitchLabel>Airplane mode</SwitchLabel>
</Switch>

API Reference

Switch

Props

Prop	Type	Default	Description
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Track size.

Also accepts all Ark SwitchRoot props (checked, defaultChecked, onCheckedChange, disabled, …).

SwitchControl / SwitchThumb / SwitchLabel

Accept all corresponding Ark props plus className/class.

Accessibility

Ark sets role="switch" with aria-checked and a visually-hidden native input. Keyboard: Space toggles.

Theming

No theme extension — uses --primary, --input, --background.