Toggle group

Selects one option from joined toggles. The active option fills with ink.

Preview

In action

Set

Flush

One alignment. The group is one object.

When to use

Use it for

One of two to five options that should all stay visible: alignment, view mode, period.
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
  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
`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 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.

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-group

Depends on

/toggle