Switch

An accessible toggle switch built on React Aria - native toggle semantics, keyboard support and a focus-visible ring. Two shapes (pill and rectangle) in three sizes. The on state uses the primary gradient with an inset ring and a small blue chip embossed in the thumb, matching Figma 1:1.

Installation

You can add this switch component using our CLI or manually:

Dark mode ready - this component follows BoardUI semantic tokens automatically. Set up theme switching.

CLI

Manual

The CLI copies the component source (with its internal dependencies) into your project and installs any required npm packages.

npx boardui@latest add switch

Shapes

Two shapes via the shape prop. pill (the default) is fully rounded; rectangle uses radius/md on the track and radius/xson the thumb, both scaled per size. The thumb's inner chip follows the same shape.

<Switch shape="pill" defaultSelected /> {/* fully rounded (default) */}

Sizes

Three sizes via the size prop - lg (56×32), md (42×24, the default) and sm (28×16). The thumb, padding, travel distance and the on-state ring all scale together.

<Switch size="lg" defaultSelected /> {/* 56 × 32 */}

States & labels

Use isSelected + onChange for a controlled switch, or defaultSelected for uncontrolled. isDisabled dims the control to 50%. Pass children for a label - React Aria associates it with the input, so clicking the text toggles the switch.

{/* Controlled */}<Switch isSelected={enabled} onChange={setEnabled} />
{/* Disabled */}<Switch isDisabled defaultSelected />
{/* With label (react-aria associates it automatically) */}<Switch>Auto-sync to cloud</Switch>

Card

Selectable settings card - an optional 24×24 leading icon, a title and short description on the left, and the switch on the right. The whole card toggles and shows a hover background, the switch counterpart to CheckboxCard. Pass any Remix icon via icon to SwitchCard.

Push notificationsAlerts for important activity.Weekly digestA recap every Monday.Dark mode

import { RiNotification4Line, RiMoonLine } from "@remixicon/react";import { SwitchCard } from "@/components/base/switch/switch-card";
export function Example() {  return (    <div className="flex max-w-md flex-col gap-4">      <SwitchCard        icon={RiNotification4Line}        title="Push notifications"        description="Get notified when something needs your attention."        defaultSelected      />      {/* icon is optional - pass the component reference, not <RiMoonLine /> */}      <SwitchCard icon={RiMoonLine} title="Dark mode" />    </div>  );}