Toggle Group

A segmented control (single- or multi-select). Behavior from Base UI (roving focus, pressed state); look from Silica. This is the button-based control — for an on/off switch use Toggle.

Real use · single-select view switcher

Multi-select text formatting

Sizes

Colored active pill

Using Toggle Group

Silica ships one design system through three paths. They share a class vocabulary but are not interchangeable — pick the one that matches what you are building.

Plain HTML — CSS classes

The Tailwind v4 plugin. Works in any framework or none — Rails, Django, PHP, Go, a static file. This path ships no JavaScript, so Toggle Group is styled but inert: its behavior comes from toggle-group. For that behavior with no framework, use the node-tree path below.

/* in your CSS */
@import "tailwindcss";
@plugin "@wizeworks/silicaui";

Root class toggle-group, with 14 modifiers:

.toggle-group
.toggle-group-accent
.toggle-group-error
.toggle-group-info
.toggle-group-item
.toggle-group-lg
.toggle-group-md
.toggle-group-neutral
.toggle-group-primary
.toggle-group-secondary
.toggle-group-sm
.toggle-group-success
.toggle-group-warning
.toggle-group-xl
.toggle-group-xs

React

Typed components over those same classes, with behavior and accessibility from Base UI.

npm i @wizeworks/silicaui-react

import { ToggleGroup } from "@wizeworks/silicaui-react";

Source of the demo above

The exact file that renders the examples above, so it can never drift from them. It imports a few of this site’s own layout helpers (../lib/…), so read it for the component calls rather than copying it whole.

Show source

import { useState } from "react";
import { ToggleGroup, ToggleGroupItem } from "@wizeworks/silicaui-react";
import { Section } from "../lib/Section";

export function ToggleGroupDemo() {
    const [view, setView] = useState<string[]>(["grid"]);
    const [format, setFormat] = useState<string[]>(["bold"]);

    return (
        <>
            <Section title="Real use · single-select view switcher">
                <ToggleGroup value={view} onValueChange={setView}>
                    <ToggleGroupItem value="list">List</ToggleGroupItem>
                    <ToggleGroupItem value="grid">Grid</ToggleGroupItem>
                    <ToggleGroupItem value="board">Board</ToggleGroupItem>
                </ToggleGroup>
            </Section>

            <Section title="Multi-select text formatting">
                <ToggleGroup multiple value={format} onValueChange={setFormat}>
                    <ToggleGroupItem value="bold">B</ToggleGroupItem>
                    <ToggleGroupItem value="italic">I</ToggleGroupItem>
                    <ToggleGroupItem value="underline">U</ToggleGroupItem>
                </ToggleGroup>
            </Section>

            <Section title="Sizes">
                <div className="flex flex-wrap items-center gap-4">
                    {(["xs", "sm", "md", "lg"] as const).map((size) => (
                        <ToggleGroup key={size} size={size} defaultValue={["grid"]}>
                            <ToggleGroupItem value="list">List</ToggleGroupItem>
                            <ToggleGroupItem value="grid">Grid</ToggleGroupItem>
                        </ToggleGroup>
                    ))}
                </div>
            </Section>

            <Section title="Colored active pill">
                <div className="flex flex-wrap items-center gap-4">
                    {(["primary", "secondary", "accent", "success"] as const).map((color) => (
                        <ToggleGroup key={color} color={color} defaultValue={["grid"]}>
                            <ToggleGroupItem value="list">List</ToggleGroupItem>
                            <ToggleGroupItem value="grid">Grid</ToggleGroupItem>
                        </ToggleGroup>
                    ))}
                </div>
            </Section>
        </>
    );
}

Vanilla — node tree to HTML

toggle-group — a toolbar of toggle buttons, NOT a listbox (distinct ARIA pattern from SelectionList: aria-pressed on real buttons). Build a node tree, project it with toHtml(), and let the zero-dependency runtime hydrate it. This is the path for generated or user-authored documents — a site builder, CMS output, a static export.

npm i @wizeworks/silicaui-html @wizeworks/silicaui-behaviors

import { atom, toHtml } from "@wizeworks/silicaui-html";

const node = atom("ToggleGroup", "toggle-group", { /* props */ }, [/* children */]);
const markup = toHtml(node);

Styling on this path is the class string in the second argument — the same classes as the Plain HTML section above. There is no color prop here; write "toggle-group toggle-group-primary" rather than passing a colour as a prop.

Takes children: yes
Hydrated by: toggle-group

Load @wizeworks/silicaui-behaviors on the page or this markup renders correctly and does nothing.

The full API for Toggle Group, on every path, is available through the Silica MCP server.