# Toggle
> Switch with a label and hint whose thumb stretches as it travels and pops a few pixel sparks when it turns on.
- React: `import { UiToggle } from "@/components/lumesec/ui-toggle"`
- Collection: Interaction (https://elements.lumesec.ai/components/interaction)
- Registry item: https://elements.lumesec.ai/r/ui-toggle.json
- Page: https://elements.lumesec.ai/components/interaction/toggle



Live preview: https://elements.lumesec.ai/view/ui-toggle

Demo source:

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

export default function UiToggleDemo() {
  return (
    <div className="grid w-full max-w-[400px] gap-4 rounded-[14px] border border-border bg-card px-5 py-[18px] shadow-[0_14px_34px_-20px_rgb(0_0_0/0.4)]">
      <UiToggle defaultChecked hint="Think longer before answering">
        Extended thinking
      </UiToggle>
      <hr className="m-0 border-0 border-t border-border" />
      <UiToggle hint="Look up current information">Web search</UiToggle>
    </div>
  );
}
```

## Playground

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

## Installation

```bash
npx shadcn@latest add @lumesec/ui-toggle
```

First time with the @lumesec registry? Register it once, or install by URL:

```bash
npx 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

React:

```tsx
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.

| Prop              | Type                         | Default               | Description                                                                                |
| ----------------- | ---------------------------- | --------------------- | ------------------------------------------------------------------------------------------ |
| `checked`         | `boolean`                    | —                     | Controlled state. Use with `onCheckedChange`.                                              |
| `defaultChecked`  | `boolean`                    | `false`               | Initial state when uncontrolled.                                                           |
| `children`        | `React.ReactNode`            | `"Extended thinking"` | Label text. It is also the switch's accessible name.                                       |
| `hint`            | `React.ReactNode`            | —                     | Secondary text under the label, linked to the switch with `aria-describedby`.              |
| `onCheckedChange` | `(checked: boolean) => void` | —                     | Called when the user toggles the switch. Changing `checked` from outside does not call it. |

### Ref

`ref` points at the root `HTMLDivElement`.

## Keyboard

| Keys          | Action                     |
| ------------- | -------------------------- |
| Space / Enter | Toggle the focused switch. |

## 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](/docs/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.