Toggle

Installation

The Toggle component is part of the design system. Import it from the UI package.

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

Usage

Use Toggle with checked and onCheckedChange for controlled state. Copy the example below to get started.

const [enabled, setEnabled] = useState(false)

<Toggle aria-label="Enable setting" checked={enabled} onCheckedChange={setEnabled} />

Examples

Copy any example below to use in your project. Toggle supports checked, defaultChecked, and disabled states.

API Reference

The Toggle component represents an on/off or yes/no selection. It supports checked, defaultChecked, and onCheckedChange.

Toggle also accepts all standard HTMLButtonElement attributes.

interface ToggleProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  checked?: boolean
  defaultChecked?: boolean
  onCheckedChange?: (checked: boolean) => void
}