Basic Toggles

Standard toggle switches with different states.

Simple Toggle

Toggle state: Off

<ToggleSwitch 
  checked={checked} 
  onChange={(e) => setChecked(e.target.checked)} 
/>

With Badge

With badge

<ToggleSwitch 
  checked={checked} 
  onChange={(e) => setChecked(e.target.checked)} 
  badge="24×24" 
/>

Size Variants

Toggle switches in different sizes for various UI contexts.

Default Size

Default size

<ToggleSwitch 
  checked={checked} 
  onChange={(e) => setChecked(e.target.checked)} 
/>

Small Size

Small size

<ToggleSwitch 
  size="small"
  checked={checked} 
  onChange={(e) => setChecked(e.target.checked)} 
/>

With Icons

Toggle switches with visual indicators for the active state.

With Check Icon

With check icon

<ToggleSwitch 
  withIcon
  checked={checked} 
  onChange={(e) => setChecked(e.target.checked)} 
/>

Small with Icon

Small with icon

<ToggleSwitch 
  size="small"
  withIcon
  checked={checked} 
  onChange={(e) => setChecked(e.target.checked)} 
/>

With Labels

Toggle switches with descriptive text and positioning options.

Right Label (Default)

Enable notifications

<ToggleSwitch 
  label="Enable notifications"
  checked={checked} 
  onChange={(e) => setChecked(e.target.checked)} 
/>

Left Label with Description

With left label & description

Additional information about this toggle switch

<ToggleSwitch 
  label="With left label & description"
  description="Additional information about this toggle switch"
  labelPosition="left"
  checked={checked} 
  onChange={(e) => setChecked(e.target.checked)} 
/>

Toggle States

Different states of toggle switches: disabled, checked, unchecked.

Disabled (Unchecked)

Disabled (unchecked)

<ToggleSwitch 
  disabled
  checked={false} 
/>

Disabled (Checked)

Disabled (checked)

<ToggleSwitch 
  disabled
  checked={true} 
/>

Disabled with Label

Feature unavailable

<ToggleSwitch 
  label="Feature unavailable"
  disabled
  checked={checked} 
/>

Usage Examples

Real-world examples of toggle switches in different contexts.

Feature Toggle

Notification Settings

Email notifications

Push notifications

SMS notifications

<div className="space-y-4 p-4 border rounded-lg">
  <h3 className="text-lg font-medium">Notification Settings</h3>
  <div className="space-y-2">
    <ToggleSwitch 
      label="Email notifications" 
      checked={emailChecked} 
      onChange={(e) => setEmailChecked(e.target.checked)} 
    />
    <ToggleSwitch 
      label="Push notifications" 
      checked={pushChecked} 
      onChange={(e) => setPushChecked(e.target.checked)} 
    />
    <ToggleSwitch 
      label="SMS notifications" 
      checked={smsChecked} 
      onChange={(e) => setSmsChecked(e.target.checked)} 
    />
  </div>
</div>

Billing Toggle

Billing Cycle

Choose between monthly or annual billing

Annual billing (Save 20%)

Annual billing: $96/year

<div className="p-4 border rounded-lg">
  <div className="flex items-center justify-between">
    <div>
      <h3 className="text-lg font-medium">Billing Cycle</h3>
      <p className="text-sm text-gray-500">Choose between monthly or annual billing</p>
    </div>
    <ToggleSwitch 
      label="Annual billing (Save 20%)" 
      labelPosition="right"
      checked={annualBilling} 
      onChange={(e) => setAnnualBilling(e.target.checked)} 
    />
  </div>
  <div className="mt-4 p-3 bg-gray-50 rounded-md">
    <p className="text-sm font-medium">
      {annualBilling ? 'Annual billing: $96/year' : 'Monthly billing: $10/month'}
    </p>
  </div>
</div>

Toggle Switch Component Catalog

Toggle Variants