Switch

An on/off control that takes effect immediately. Three sizes, grey or brand when on, with an optional glyph in the thumb and soft rings; also as a label row or a card.

Dark mode(Sublabel)

import { Switch, SwitchWithLabel } from '@orvain/react';
 
<SwitchWithLabel
  label="Email notifications"
  description="Get a summary every Monday."
  checked={on}
  onCheckedChange={setOn}
/>
 
// Bare control: name it with aria-label
<Switch aria-label="Dark mode" checked={dark} onCheckedChange={setDark} />

Add an Orvain Switch, medium, off, grey style.

Orvain MCPIncluded with the library

When to use#

For a setting that applies as soon as it changes: dark mode, notifications, a feature flag.
As a card when each setting needs an icon, an avatar or a logo.

When not to use

Use a Checkbox for an option that applies only when a form is submitted.

Anatomy#

1Track

Medium 44×24, Small 37×20, x-Small 29×16; #f2f2f2 off, #2a2a2a or #005cf8 on.

2Thumb

White, 18, 16 or 12px, with a soft deep shadow; slides to the end when on.

3Icon

Optional: a cross when off, a tick when on.

4Rings

Optional halos 3px and 6px out.

5Label row and card

A title in H5 18/500 with sub-label, badge and description; the card is 360px, radius 12.

States#

Default and Hover

Hover darkens the track: #070707 grey, #0042b7 brand.

Active (pressed)

While pressed on, the thumb shrinks 2px.

Active: No, Yes - Grey, Yes - Brand

Off, or on in either colour.

Disabled

Off: white with a hairline and a flat grey thumb. On: faded to 20%.

Read-Only

The label row and card keep the value but cannot change it.

Source#

Preview – final code pending

The Switch is available in the Figma library with every variant and state shown above. The React and Vue source, props table and install command will be added to this page when the code library is released.

Get notified when the source is published Get notified when the source is published

Used in these blocks

switches