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

Download the React source package, install its dependencies, and import the component with its shared styles.

Download React package Installation guide

'use client';
import '@helios-ui/react/styles.css';
import{NativeScope,NativeSwitchExample}from'@helios-ui/react';
export function Example(){return <NativeScope><NativeSwitchExample/></NativeScope>}

Shapes

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

usage

'use client';
import '@helios-ui/react/styles.css';
import {NativeScope,NativeSwitch} from '@helios-ui/react';
export function Example(){

return <NativeScope><div style={{display:"flex",gap:16}}><NativeSwitch shape="pill"aria-label="Pill switch"defaultSelected/><NativeSwitch shape="rectangle"aria-label="Rectangle switch"defaultSelected/></div></NativeScope>;
}

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.

usage

'use client';
import '@helios-ui/react/styles.css';
import {NativeScope,NativeSwitch} from '@helios-ui/react';
export function Example(){

return <NativeScope><div style={{display:"flex",gap:16}}>{(["lg","md","sm"]as const).map(size=><NativeSwitch key={size}size={size}aria-label={size+" switch"}defaultSelected/>)}</div></NativeScope>;
}

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.

usage

'use client';
import '@helios-ui/react/styles.css';
import {useState} from 'react';
import {NativeScope,NativeSwitch} from '@helios-ui/react';
export function Example(){
const[enabled,setEnabled]=useState(true);
return <NativeScope><div style={{display:"grid",gap:12}}><NativeSwitch isSelected={enabled}onChange={setEnabled}>Enable notifications</NativeSwitch><NativeSwitch isDisabled>Disabled notifications</NativeSwitch><output>{enabled?"Notifications on":"Notifications off"}</output></div></NativeScope>;
}

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

usage

'use client';
import '@helios-ui/react/styles.css';
import{BoardNativeSectionExample}from'@helios-ui/react';
export function Example(){return <BoardNativeSectionExample slug="switch" id="card"/>}

Advanced playground, API and recovery states ↗

Switch

Installation

Download the React source package, install its dependencies, and import the component with its shared styles.

Download React package Installation guide

'use client';
import '@helios-ui/react/styles.css';
import{NativeScope,NativeSwitchExample}from'@helios-ui/react';
export function Example(){return <NativeScope><NativeSwitchExample/></NativeScope>}

Shapes

usage

'use client';
import '@helios-ui/react/styles.css';
import {NativeScope,NativeSwitch} from '@helios-ui/react';
export function Example(){

return <NativeScope><div style={{display:"flex",gap:16}}><NativeSwitch shape="pill"aria-label="Pill switch"defaultSelected/><NativeSwitch shape="rectangle"aria-label="Rectangle switch"defaultSelected/></div></NativeScope>;
}

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.

usage

'use client';
import '@helios-ui/react/styles.css';
import {NativeScope,NativeSwitch} from '@helios-ui/react';
export function Example(){

return <NativeScope><div style={{display:"flex",gap:16}}>{(["lg","md","sm"]as const).map(size=><NativeSwitch key={size}size={size}aria-label={size+" switch"}defaultSelected/>)}</div></NativeScope>;
}

States & labels

usage

'use client';
import '@helios-ui/react/styles.css';
import {useState} from 'react';
import {NativeScope,NativeSwitch} from '@helios-ui/react';
export function Example(){
const[enabled,setEnabled]=useState(true);
return <NativeScope><div style={{display:"grid",gap:12}}><NativeSwitch isSelected={enabled}onChange={setEnabled}>Enable notifications</NativeSwitch><NativeSwitch isDisabled>Disabled notifications</NativeSwitch><output>{enabled?"Notifications on":"Notifications off"}</output></div></NativeScope>;
}

Card

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

usage

'use client';
import '@helios-ui/react/styles.css';
import{BoardNativeSectionExample}from'@helios-ui/react';
export function Example(){return <BoardNativeSectionExample slug="switch" id="card"/>}

Advanced playground, API and recovery states ↗

Switch

Installation

Shapes

Sizes

States & labels

Card

Search Helios UI

Switch

Installation

Shapes

Sizes

States & labels

Card

Search Helios UI