Primitive / Moleculebeta

Toggle Group

A set of toggles with single or multiple selection and merged segmented borders.

Edit on GitHub

pnpm dlx @glinui/cli@latest add toggle-group

Projects

Atlas redesign
Billing migration
Mobile onboarding

Installation

Install from

pnpm dlx @glinui/cli@latest add toggle-group

Prefer the package?

Usage

Variants

import { ToggleGroup, ToggleGroupItem } from "@glinui/ui"


export function Demo() {
  return (
    <div className="flex flex-col items-start gap-3">
      <ToggleGroup type="single" variant="glinr" defaultValue="week" aria-label="glinr">
        <ToggleGroupItem value="day">Day</ToggleGroupItem>
        <ToggleGroupItem value="week">Week</ToggleGroupItem>
        <ToggleGroupItem value="month">Month</ToggleGroupItem>
      </ToggleGroup>
      <ToggleGroup type="single" variant="solid" defaultValue="week" aria-label="solid">
        <ToggleGroupItem value="day">Day</ToggleGroupItem>
        <ToggleGroupItem value="week">Week</ToggleGroupItem>
        <ToggleGroupItem value="month">Month</ToggleGroupItem>
      </ToggleGroup>
      <ToggleGroup type="single" variant="plain" defaultValue="week" aria-label="plain">
        <ToggleGroupItem value="day">Day</ToggleGroupItem>
        <ToggleGroupItem value="week">Week</ToggleGroupItem>
        <ToggleGroupItem value="month">Month</ToggleGroupItem>
      </ToggleGroup>
      <ToggleGroup type="single" variant="soft" defaultValue="week" aria-label="soft">
        <ToggleGroupItem value="day">Day</ToggleGroupItem>
        <ToggleGroupItem value="week">Week</ToggleGroupItem>
        <ToggleGroupItem value="month">Month</ToggleGroupItem>
      </ToggleGroup>
      <ToggleGroup type="single" variant="outline" defaultValue="week" aria-label="outline">
        <ToggleGroupItem value="day">Day</ToggleGroupItem>
        <ToggleGroupItem value="week">Week</ToggleGroupItem>
        <ToggleGroupItem value="month">Month</ToggleGroupItem>
      </ToggleGroup>
      <ToggleGroup type="single" variant="ghost" defaultValue="week" aria-label="ghost">
        <ToggleGroupItem value="day">Day</ToggleGroupItem>
        <ToggleGroupItem value="week">Week</ToggleGroupItem>
        <ToggleGroupItem value="month">Month</ToggleGroupItem>
      </ToggleGroup>
    </div>
  )
}

Multiple with spacing

import { ToggleGroup, ToggleGroupItem } from "@glinui/ui"
import { TextB, TextItalic } from "@phosphor-icons/react"


export function Demo() {
  return (
    <ToggleGroup type="multiple" variant="outline" spacing={2} aria-label="Format">
      <ToggleGroupItem value="bold" aria-label="Bold"><TextB /></ToggleGroupItem>
      <ToggleGroupItem value="italic" aria-label="Italic"><TextItalic /></ToggleGroupItem>
    </ToggleGroup>
  )
}

Glass (opt-in)

Glass is opt-in and needs a backdrop behind it: pick Photo or Vivid in the stage backdrop switcher.

import { ToggleGroup, ToggleGroupItem } from "@glinui/ui"


export function Demo() {
  return (
    <ToggleGroup type="single" variant="glass" defaultValue="week" aria-label="Range">
      <ToggleGroupItem value="day">Day</ToggleGroupItem>
      <ToggleGroupItem value="week">Week</ToggleGroupItem>
      <ToggleGroupItem value="month">Month</ToggleGroupItem>
    </ToggleGroup>
  )
}

Accessibility

Single mode exposes `radiogroup` with `radio` items, multiple mode exposes `group` with toggle buttons.
Roving tabindex: one tab stop for the whole group.
Always label the group with `aria-label`.

Keyboard Interactions

Key	Action
`Arrow keys`	Move focus between items.
`Enter / Space`	Toggle the focused item.
`Home / End`	Move to first or last item.

ARIA Attributes

`aria-label` on group
`aria-checked` (single) or `aria-pressed` (multiple) on items

Reduced Motion

Item colour transitions are disabled under prefers-reduced-motion.

Affected properties

background-colorborder-color

API Reference

`ToggleGroup`

Prop	Type	Required	Default	Description
`type`	`"single" \| "multiple"`	-	`-`	Required. Single allows one pressed item, multiple allows many.
`value \| defaultValue`	`string \| string[]`	-	`-`	Controlled or initial selection.
`onValueChange`	`(value) => void`	-	`-`	Fires when the selection changes.
`variant`	`ControlVariantProp`	No	`ambient (glinr)`	Applied to every item. Omit to follow the ambient design style. Glass is opt-in.
`size`	`"sm" \| "md" \| "lg"`	-	`md`	Applied to every item.
`spacing`	`0 \| 1 \| 2 \| 3`	-	`0`	Gap between items. 0 merges borders into one segmented control.

`ToggleGroupItem`

Prop	Type	Required	Default	Description
`value`	`string`	-	`-`	Required. Value this item represents.
`variant \| size`	`same as group`	-	`-`	Per item override.
`variant`	`ControlVariantProp`	No	`-`	Auto-generated from TypeScript source.

Source

Import directly from the package or browse the source on GitHub. Click any file to view it.

Import

import { ToggleGroup } from "@glinui/ui"

Source Files

toggle-group.tsx

toggle-group.test.tsxtest

Dependencies

@glinui/ui@radix-ui/react-toggle-groupclass-variance-authority

Generated API Snapshot

Beta

Auto-extracted from TypeScript source in packages/ui/src/components/toggle-group.tsx. This section is in beta and may lag behind hand-curated docs. Regenerate with pnpm --filter @glinui/docs api:generate.

Generated: 2026-10-08T01:41:21.546Z · Full index: /docs/api-metadata

Primary Props Type

ToggleGroupProps

`ToggleGroupItemProps`

Prop	Type	Required	Default	Description
`variant`	`ControlVariantProp`	No	`-`	-

`ToggleGroupProps`

Prop	Type	Required	Default	Description
`spacing`	`ToggleGroupSpacing`	No	`0`	Gap between items. 0 merges items into one segmented control.
`variant`	`ControlVariantProp`	No	`-`	Surface look for every item. Omit to follow the ambient design style. Same vocabulary as Toggle.