DocsComponentsToggle

Toggle

Primitive

Accessible switch toggle with 3 sizes, label and description support, keyboard navigation, and focus-visible ring. Built as a semantic button with role=switch.

#ff7b72">import { FqToggle } from '@/components/harlowui/primitives/fq-misc'
#ff7b72">export default function Settings() {
  #ff7b72">const [enabled, setEnabled] = useState(false)
  #ff7b72">return (
    <#7ee787">FqToggle
      label=#a5d6ff">"Dark Mode"
      description=#a5d6ff">"Use dark theme across the app"
      checked={enabled}
      onCheckedChange={setEnabled}
    />
  )
}

Interactive Demo

Push NotificationsReceive alerts on your device

Email DigestWeekly summary of activity

Two-Factor AuthExtra security layer for your account

Sizes

Three sizes for different density requirements -- compact sidebars to spacious settings panels.

Small

Medium (default)

Large

Disabled State

Disabled OnThis setting is locked by your admin

Disabled OffUpgrade to Pro to enable this feature

Settings Panel Patterns

Production-ready settings compositions with dividers and grouped toggles.

Preferences

Manage your account settings and preferences

Dark ModeUse dark theme across the app

Compact ViewReduce spacing for information density

Sound EffectsPlay sounds for notifications and actions

AnalyticsHelp improve the product with anonymous usage data

Marketing EmailsReceive product updates and promotions

Beta FeaturesTry new features before they're released

API Reference

Prop	Type	Default	Description
`label`*	`string`	-	Toggle label text
`description`	`string`	-	Help text rendered below the label
`checked`*	`boolean`	-	Controlled checked state
`onCheckedChange`	`(checked: boolean) => void`	-	State change callback
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Track and thumb size
`disabled`	`boolean`	`false`	Disables the toggle

PreviousProgress NextBank Card