FORMS · COMPONENT
Toggle
Small switches for preferences that take effect immediately.
The preview couldn’t load. Try Reset preview, or open Code to use the example.
Loading the real component…
"use client";
import { useState } from "react";
import { Toggle } from "@raydenui/ui";
import "@raydenui/ui/styles.css";
export default function Example({ state = "default" }: { state?: string }) {
const [focus, setFocus] = useState(true);
const [sounds, setSounds] = useState(false);
return <div style={{ width: "min(100%, 420px)", display: "grid", gap: 28 }}><h2 style={{ fontSize: 24 }}>A calmer workspace.</h2><Toggle label="Focus mode" description="Keep nonessential notifications quiet." checked={focus} onChange={event => setFocus(event.target.checked)} disabled={state === "disabled"} /><Toggle label="Interface sounds" description="A little feedback for everyday actions." checked={sounds} onChange={event => setSounds(event.target.checked)} disabled={state === "disabled"} /><p role="status">Focus mode {focus ? "on" : "off"}. Sounds {sounds ? "on" : "off"}. Demo preferences only.</p></div>;
}
Live library components · illustrative demo data · no remote submissionsReset returns to the initial example.
Made for real interfaces.
Two controlled toggles demonstrate independent workspace preferences. The summary updates as the controls change, without changing settings outside the preview.
Try it
Turn focus mode off and interface sounds on, then compare the disabled controls.