Toggle

Playground#

Change a prop and the component re-renders. Props marked remounts set an initial value, so the component starts over.

<UiToggle hint="Think longer before answering">Extended thinking</UiToggle>

Installation#

pnpm dlx shadcn@latest add @lumesec/ui-toggle

pnpm dlx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.json

npx shadcn@latest add https://elements.lumesec.ai/r/ui-toggle.json

Usage#

import { UiToggle } from "@/components/lumesec/ui-toggle";

export function Example() {
  return (
    <UiToggle defaultChecked hint="Think longer before answering">
      Extended thinking
    </UiToggle>
  );
}

Behaviour#

The thumb stretches like a drop as it travels, the accent floods out from under it, and a few pixel sparks pop when it switches on. Clicking the label works too.

API reference#

Props#

Also accepts every prop of <div> (React.ComponentProps<"div">), spread onto the root element.

Ref#

ref points at the root HTMLDivElement.

Keyboard#

Accessibility#

• The switch is a native <button> with role="switch" and aria-checked.
• The label is the switch's accessible name (aria-labelledby) and the hint its description (aria-describedby).
• Clicking anywhere on the row, including the label and hint, toggles the switch.
• Reduced motion: the thumb moves without the stretch animation and no sparks fire; the accent fill still transitions.

Theming#

Styled with Tailwind classes on your shadcn theme tokens, so light and dark follow your theme. The accent comes from --lumesec. See Theming.

This component reads --lumesec, --lumesec-glint, --muted, --foreground and --muted-foreground.

Notes#

• Not a form control: it has no name and is not submitted with a form.
• The root, the switch and its parts carry data-state="checked" or data-state="unchecked" for styling.
• Changing checked from outside moves the thumb without the stretch and sparks; they play only for user toggles.