Set
Default
Choose the alignment for the heading.
Subtle
The caption uses a quieter control with the same selection behavior.
Toggle group
Selects one visible option. Default joins toggles with an ink active state; subtle uses a gray rail, 3px gaps, and a soft active fill.
Preview
In action
When to use
Use it for
- One of two to five options that should all stay visible: alignment, view mode, period.
- Default for joined controls with hairline seams. Subtle uses a soft rail, 3px inset and gaps, 4px corners, and a soft active fill without internal strokes.
- Short labels of equal weight.
Not for
- Many or long options; use Select.
- Multiple selection; use several Toggle buttons.
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 { ToggleGroup } from "@noorddev/vlak-react";Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/toggle-group.
2. Vendor the source
npx @noorddev/vlak-cli add toggle-group
The StyleX leaf lands in components/vlak/ with its dependencies, for your own compiler to own. See StyleX.
3. Through shadcn
npx shadcn add https://vlak.dev/r/toggle-group.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 { ToggleGroup } from "@noorddev/vlak-react";
const [align, setAlign] = useState("left");
<ToggleGroup
variant="subtle"
aria-label="Alignment"
options={[
{ value: "left", label: "Left" },
{ value: "center", label: "Center" },
{ value: "right", label: "Right" },
]}
value={align}
onValueChange={setAlign}
/>Props
ToggleGroup
One pressed at a time.
| Prop | Type | Default | Description |
|---|---|---|---|
optionsrequired | { value: string; label: ReactNode; }[] | ||
value | string | ||
defaultValue | string | ||
onValueChange | (value: string) => void | ||
variant | "subtle" | "default" | "default" | Subtle groups use a soft rail and individually rounded selected items. |
Also accepts Omit<HTMLAttributes<HTMLDivElement>, "onChange">.
Keyboard
| Keys | Does |
|---|---|
| Tab | Moves between the options |
| Enter, Space | Selects the focused option |
Accessibility
- Renders role="group" of native buttons with aria-pressed; pass aria-label to name the group.
- Controlled with value and onValueChange, or uncontrolled with defaultValue.
- Both variants retain a minimum 44px target per option and a visible keyboard focus ring. Tab visits each button; arrow keys do not change selection.
Markup
<div class="rs-toggle-group" role="group" aria-label="Default alignment"><button class="rs-toggle rs-toggle-grouped rs-toggle-pressed rs-toggle-grouped-on" aria-pressed="true">Left</button><button class="rs-toggle rs-toggle-grouped" aria-pressed="false">Center</button><button class="rs-toggle rs-toggle-grouped" aria-pressed="false">Right</button></div> <div class="rs-toggle-group rs-toggle-group-subtle" role="group" aria-label="Subtle alignment"><button class="rs-toggle rs-toggle-grouped rs-toggle-pressed rs-toggle-grouped-on rs-toggle-subtle rs-toggle-subtle-pressed rs-toggle-grouped-subtle" aria-pressed="true">Left</button><button class="rs-toggle rs-toggle-grouped rs-toggle-subtle rs-toggle-grouped-subtle" aria-pressed="false">Center</button><button class="rs-toggle rs-toggle-grouped rs-toggle-subtle rs-toggle-grouped-subtle" aria-pressed="false">Right</button></div>
Classes
.rs-toggle-group.rs-toggle-group-subtle
Depends on
Use elsewhere
Used in interfaces
DashboardSocial feedFood orderingAgent managementEV controlsSatellite operationsAndroidiPhone DuoDocumentationMusic playerMicrobiology notebookGenome mapping workspaceProtein sequence workbenchRobotics workspaceCircuit board workspaceMusic sessionDesktop OS