Switch Component

Switches are binary toggle controls that allow users to turn options on or off.

Default Switch

The default switch without any labels or descriptions.

Current state: Off

Code Example

const [checked, setChecked] = useState(false)

<Switch
  checked={checked}
  onCheckedChange={setChecked}
/>

Variants

With Label and Description

Push notifications

Receive notifications for important updates

Code Example

<div className="flex items-center space-x-3">
  <Switch
    checked={checkedWithLabel}
    onCheckedChange={setCheckedWithLabel}
  />
  <div>
    <div className="text-sm font-medium">Push notifications</div>
    <div className="text-sm text-gray-500">Receive notifications for important updates</div>
  </div>
</div>

Disabled State

Feature enabled

Code Example

<div className="flex items-center space-x-3">
  <Switch
    checked={checkedDisabled}
    onCheckedChange={setCheckedDisabled}
    disabled
  />
  <div className="text-sm font-medium text-gray-400">Feature enabled</div>
</div>

Usage Guidelines

Here are some guidelines for using switches effectively:

Use switches for binary settings that can be toggled on/off.
Prefer switches over checkboxes when the action takes immediate effect.
Use checkboxes instead when users need to make multiple selections or when changes need to be confirmed with a submit button.
Always provide clear labels that describe what the switch controls.
Consider adding descriptions for complex options to provide more context.