import { Switch } from '@brand-studio/ui';
export default function SwitchDemo() {
return <Switch label="Email me when my order ships" defaultChecked />;
}Installation
pnpm add @brand-studio/uinpm install @brand-studio/uiyarn add @brand-studio/uibun add @brand-studio/uiInstall the peer dependencies
npm install react react-domImport the stylesheet once
import '@brand-studio/ui/styles.css';Wrap your app in a brand theme
import { BrandTheme, Switch } from '@brand-studio/ui'; import brand from './brand.json'; <BrandTheme palette={brand.tokens} mode="system"> {/* your app */} </BrandTheme>
Usage
import { Switch } from '@brand-studio/ui';<Switch label="Email me when my order ships" />Examples
Description and disabled
A description is linked with aria-describedby.
One email on Monday with new roasts.
Not available in your region yet.
import { Switch } from '@brand-studio/ui';
export default function SwitchDescription() {
return (
<div style={{ display: 'grid', gap: 20, maxWidth: 360 }}>
<Switch label="Weekly digest" description="One email on Monday with new roasts." />
<Switch label="Text messages" description="Not available in your region yet." disabled />
</div>
);
}Accessibility
- Renders a native
<button role="switch">, so Space and Enter toggle it. - The visible label is a real
<label>; clicking it toggles the switch.
API Reference
| Prop | Type | Default |
|---|---|---|
label | string | – |
description? | string | – |
checked? | boolean | – |
defaultChecked? | boolean | – |
onCheckedChange? | ((checked: boolean) => void) | – |
disabled? | boolean | – |
name? | string | – |
className? | string | '' |