Forms

Switch

Toggles a single setting between enabled and disabled.

@dawn/ui/components/switch

Preview

Rendered from @dawn/ui

Enable schedulingDisabled setting

Usage

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

export const ModuleToggle = () => (
  <label className="flex items-center justify-between gap-4">
    <span>Enable scheduling</span>
    <Switch aria-label="Enable scheduling" defaultChecked />
  </label>
);

API

checked / defaultCheckedboolean: Controls or initializes the checked state.
onCheckedChange(checked: boolean) => void: Receives checked-state changes from pointer or keyboard input.
disabledboolean: Prevents interaction and applies the disabled treatment.

Exports

Switch