Switch

A toggle switch component with convenience and compound APIs

A toggle switch component built with Ark UI that supports both a convenience API and a full compound API.

Enable notifications

import { Switch } from "@/components/ui/switch";

export default function Example() {
  return <Switch label="Enable notifications" />;
}

View Code

Installation

bash

liminal add switch

Usage

Enable notifications

import { Switch } from "@/components/ui/switch";

export default function Example() {
  return <Switch label="Enable notifications" />;
}

View Code

Examples

Compound API

Dark mode

import {
  SwitchRoot,
  SwitchControl,
  SwitchThumb,
  SwitchLabel,
  SwitchHiddenInput,
} from "@/components/ui/switch";

export default function Example() {
  return (
    <SwitchRoot className="inline-flex items-center gap-2">
      <SwitchHiddenInput />
      <SwitchControl>
        <SwitchThumb />
      </SwitchControl>
      <SwitchLabel>Dark mode</SwitchLabel>
    </SwitchRoot>
  );
}

View Code

API

Prop	Type	Default	Description
label	React.ReactNode	-	Label text shown next to the switch.
checked	boolean	-	Controlled checked state.
defaultChecked	boolean	-	Initial checked state when uncontrolled.
onCheckedChange	(details: { checked: boolean }) => void	-	Callback when checked state changes.