Toggle

Toggle

Basic Toggle

Status: Off

With Label

Dark modeAuto-save

With Label + Description

Push notificationsReceive alerts when someone mentions youTwo-factor authenticationAdd an extra layer of security to your account

Small Size

Compact toggleAnother small one

Disabled State

Disabled offDisabled on

Usage

import { Toggle } from "@f0rbit/ui";

<Toggle />

With Label

Add a label to describe the toggle:

<Toggle label="Dark mode" />
<Toggle label="Auto-save" checked />

With Description

Provide additional context:

<Toggle
  label="Push notifications"
  description="Receive alerts when someone mentions you"
/>
<Toggle
  label="Two-factor authentication"
  description="Add an extra layer of security to your account"
  checked
/>

Controlled State

Control the toggle state with checked and onChange:

const [enabled, setEnabled] = createSignal(false);

<Toggle
  checked={enabled()}
  onChange={() => setEnabled(!enabled())}
  label="Enable feature"
/>

Sizes

Two sizes are available:

<Toggle label="Default size" />
<Toggle label="Small size" size="sm" />

Disabled State

<Toggle label="Disabled off" disabled />
<Toggle label="Disabled on" disabled checked />

Settings Page Pattern

Build a real settings page with grouped toggles:

const [settings, setSettings] = createSignal({
  darkMode: true,
  notifications: true,
  emailDigest: false,
  twoFactor: true,
  analytics: false,
});

const updateSetting = (key: keyof typeof settings) => {
  setSettings(prev => ({ ...prev, [key]: !prev[key] }));
};

<Card>
  <CardHeader>
    <CardTitle>Preferences</CardTitle>
    <CardDescription>Manage your account settings</CardDescription>
  </CardHeader>
  <CardContent>
    <div class="stack">
      <div class="setting-row">
        <Toggle
          label="Dark mode"
          description="Use dark theme across the application"
          checked={settings().darkMode}
          onChange={() => updateSetting("darkMode")}
        />
      </div>
      <div class="setting-row">
        <Toggle
          label="Push notifications"
          description="Receive alerts for important updates"
          checked={settings().notifications}
          onChange={() => updateSetting("notifications")}
        />
      </div>
      <div class="setting-row">
        <Toggle
          label="Weekly email digest"
          description="Get a summary of activity every Monday"
          checked={settings().emailDigest}
          onChange={() => updateSetting("emailDigest")}
        />
      </div>
    </div>
  </CardContent>
</Card>

<Card>
  <CardHeader>
    <CardTitle>Security</CardTitle>
  </CardHeader>
  <CardContent>
    <div class="stack">
      <Toggle
        label="Two-factor authentication"
        description="Require a code when signing in"
        checked={settings().twoFactor}
        onChange={() => updateSetting("twoFactor")}
      />
      <Toggle
        label="Usage analytics"
        description="Help improve the product by sharing anonymous usage data"
        checked={settings().analytics}
        onChange={() => updateSetting("analytics")}
      />
    </div>
  </CardContent>
</Card>

Props

Prop	Type	Default	Description
checked	boolean	false	Whether the toggle is on
label	string	—	Label text displayed next to the toggle
description	string	—	Description text below the label
size	"sm" | "md"	"md"	Toggle size
disabled	boolean	false	Disable the toggle
onChange	() => void	—	Callback when toggle is switched