Everyday

Playground

Switch

ui
control

Binary on/off toggle for settings and preferences

Enable/disable features, boolean form fields

import { Switch } from "@everydayos/ui";

Usage

Accessible switch with label

<div className="flex items-center gap-2">
  <Switch id="notifications" />
  <Label htmlFor="notifications">Enable notifications</Label>
</div>

API

PropTypeDefault
classNameunknown—

Examples

Settings Row

Switch in Item layout

<Item>
  <ItemContent>
    <ItemTitle>Dark mode</ItemTitle>
    <ItemDescription>Use dark theme</ItemDescription>
  </ItemContent>
  <ItemActions>
    <Switch />
  </ItemActions>
</Item>

Composition

Pairs well with

Label
Item
Stack

When to avoid

  • Need multiple options — use Select or ToggleGroup
  • Need immediate action without confirm — consider Button