Toggle

Turns one persistent option on or off. Pressed fills with ink and exposes aria-pressed.

Preview

In action

Grid

When to use

Use it for

A formatting or filter option that is on or off and stays in view.
Several independent toggles in a row.

Not for

A setting that applies immediately to the app; use Switch.
One of several; use ToggleGroup.

Install

Three ways in. They share one source, so the pixels match whichever you pick.

1. Import the package

npm install @noorddev/vlak-react

// once, next to your app's root
import "@noorddev/vlak-react/css";

import { Toggle } from "@noorddev/vlak-react";

Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/toggle.

2. Vendor the source

npx @noorddev/vlak-cli add toggle

The StyleX leaf lands in components/vlak/, for your own compiler to own. See StyleX.

3. Through shadcn

npx shadcn add https://vlak.dev/r/toggle.json

The same registry item, installed by shadcn's CLI.

CSS only

<link rel="stylesheet" href="node_modules/@noorddev/vlak/css/vlak.css" />

No React. Link vlak.css and use the markup and classes below.

React

import { useState } from "react";
import { Toggle } from "@noorddev/vlak-react";

const [bold, setBold] = useState(false);

<Toggle pressed={bold} onPressedChange={setBold} aria-label="Bold">B</Toggle>

Props

Toggle

Press switch; state lives in aria-pressed.

Prop	Type	Default	Description
`pressed`	`boolean`
`defaultPressed`	`boolean`
`onPressedChange`	`(pressed: boolean) => void`

Also accepts Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onChange">.

ToggleGroup

One pressed at a time.

Prop	Type	Default	Description
`options`required	`{ value: string; label: ReactNode; }[]`
`value`	`string`
`defaultValue`	`string`
`onValueChange`	`(value: string) => void`

Also accepts Omit<HTMLAttributes<HTMLDivElement>, "onChange">.

Keyboard

Keys	Does
`Tab`	Moves focus to the toggle
`Enter, Space`	Presses or releases it

Accessibility

A native <button> with aria-pressed.
Give icon-only toggles an aria-label. Controlled with pressed and onPressedChange, or uncontrolled with defaultPressed.

Markup

<div class="rs-toggle-group"><button class="rs-toggle" aria-pressed="true">Left</button><button class="rs-toggle" aria-pressed="false">Center</button><button class="rs-toggle" aria-pressed="false">Right</button></div>

Classes

.rs-toggle.rs-toggle-group.rs-toggle-grouped-on.rs-toggle-pressed