Toggle

Composition preview

Try Toggle alongside its related selection components. These examples keep all actions local.

Usage

import { Toggle } from "@/components/ui/toggle";

<>
<Toggle aria-label="Bold">Bold</Toggle>
</>

Composition recipe. Supply application state, handlers and persistence in the owning product component. Inspect the installed source before extending its API.

API & composition

pressed/defaultPressed, onPressedChange, disabled; variant and size

Usage & accessibility

Expose the mode name independently of its pressed state.

Implementation contract

src/components/ui/toggle.tsx

Use named variants and semantic theme tokens. Preserve existing input values, refs, focus and cancellation behavior. Verify keyboard, narrow layouts and pending/error states when behavior changes.