Switch - HapplyUI

A toggle switch component with smooth transitions and primary/neutral color variants.

Installation

bunx @happlyui/cli@latest add switch

Dependencies

npm packages

@radix-ui/react-switch

Registry dependencies

These are automatically installed when you add this component.

form-field-context
use-form-field-binding
happly-ui-utils

Usage

import * as Switch from "@/components/ui/switch"

<Switch.Root />

Examples

Demo

Basic switch toggle.

<Switch.Root />

Variants

Primary and neutral color variants in unchecked and checked states.

Primary

Neutral

<Switch.Root variant="primary" />
<Switch.Root variant="neutral" />

Disabled

Disabled switch in unchecked and checked states.

<Switch.Root disabled />
<Switch.Root disabled checked />

With Label

Switch composed with Label component.

SMS Verification

Authenticator App

Disabled

Disabled but default checked

<div className="flex items-center gap-2">
  <Switch.Root id="s1" />
  <Label.Root htmlFor="s1">SMS Verification</Label.Root>
</div>

With Label Extended

Switch with extended label layouts including sublabels, badges, descriptions, and link buttons.

Label(Sublabel)

NEW

Label(Sublabel)

NEW

Label(Sublabel)

NEW

Insert the Switch description here.

Label(Sublabel)

NEW

Insert the Switch description here.

Label(Sublabel)

NEW

Label(Sublabel)

NEW

Label(Sublabel)

NEW

Insert the Switch description here.

Label(Sublabel)

NEW

Insert the Switch description here.

<div className="flex items-center gap-2">
  <Switch.Root id="s1" />
  <Label.Root htmlFor="s1">
    Label
    <Label.Sub>(Sublabel)</Label.Sub>
  </Label.Root>
</div>

With Form Field

Switch group composed with FormField for consistent label and hint.

Settings

SMS Verification

Authenticator App

Manage your account preferences.

<FormField.Root label="Settings" hint="Manage your account preferences.">
  <div className="flex flex-col gap-3">
    <div className="flex items-center gap-2">
      <Switch.Root id="s1" defaultChecked />
      <Label.Root htmlFor="s1" className="text-paragraph-sm">
        SMS Verification
      </Label.Root>
    </div>
    <div className="flex items-center gap-2">
      <Switch.Root id="s2" />
      <Label.Root htmlFor="s2" className="text-paragraph-sm">
        Authenticator App
      </Label.Root>
    </div>
  </div>
</FormField.Root>

API Reference

Switch.Root

The switch toggle component. Extends Radix Switch.Root props.

Prop	Type	Default	Description
`variant`	`'primary' \| 'neutral'`	`'primary'`	Color variant for the checked state
`checked`	`boolean`	-	Controlled checked state
`defaultChecked`	`boolean`	-	Default checked state for uncontrolled usage
`onCheckedChange`	`(checked: boolean) => void`	-	Callback when the checked state changes
`disabled`	`boolean`	`false`	Disable the switch