Components

Toggle

A binary switch control built on React Aria. Supports an optional label/hint, a slim track variant, and two sizes - driven from config/design-system.config.ts.

Component Playground

Live instance - the controls read their options from the same config that drives the Variants section below.

Enable notifications

sm · default

Controls

Size

Label

Hint

Sizes

Two sizes - sm (default) and md.

Small / Medium

sm

md

Slim

A thinner track with a bordered knob, for denser settings lists - pass slim.

Default / slim - off / on

default · off

default · on

slim · off

slim · on

With label

Pass a label to pair the control with descriptive text.

Labelled

Remember me

Send me marketing emails

Accept the terms and conditions

With hint text

Add a hint for supporting detail beneath the label.

Labelled with hint

Email notifications

Get notified when someone mentions you in a comment.

Disabled

Disabled dims the control and prevents interaction, in both the off and on states.

Disabled - off / on

Group

A stacked list of toggles - the common pattern for a settings page.

Settings list

Desktop notifications

Get notified when someone messages you.

Weekly digest

A summary of activity, every Monday.

Product updates

News about new features and improvements.

Two-factor authentication

Managed by your organisation.

API

Prop	Type	Default
`size`	`"sm" \| "md"`	`"sm"`
`slim`	`boolean`	`false`
`label`	`ReactNode`	`-`
`hint`	`ReactNode`	`-`
`isSelected`	`boolean`	`-`
`defaultSelected`	`boolean`	`false`
`isDisabled`	`boolean`	`false`
`onChange`	`(isSelected: boolean) => void`	`-`
`className`	`string`	`-`

Token anatomy

Swap --ui-bg-brand-solid to rebrand every selected track at once.

State	Background token	Ring / border token
Off	`bg-tertiary`	`ring-secondary`
On	`bg-brand-solid`	`-`
On + hover	`bg-brand-solid_hover`	`-`
Slim knob - off / on	`bg-fg-white`	`border-toggle-border / border-toggle-slim-border_pressed`
Disabled	`-`	`opacity-50`
Focus-visible outline	`-`	`outline-focus-ring`

Usage

import { Toggle } from "@/components/base/toggle/toggle";

<Toggle label="Enable notifications" defaultSelected />

Figma

No linked Figma file yet - this component was pulled in via the Untitled UI CLI, not designed in Figma first.