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:

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>  );}