Forms · astro-ui · ToggleGroup

ToggleGroup

Connected row of Toggles — segmented control styling.

ToggleGroup wraps any number of Toggle children and stitches their borders into one segmented control, mirroring the ButtonGroup composition. Radius and negative-margin stitching reach slotted children through :global(). State stays per-toggle (aria-pressed on each child); whether the group enforces single-selection is the consumer’s choice — a one-line app script, same recipe as Toggle.

← All components

Features

Joins Toggle children into one segmented control
horizontal / vertical orientation
role="group" + aria-label — groups of toggles need an accessible name
State stays per-toggle; single-selection is an app-side one-liner

Usage

---
import { ToggleGroup, Toggle } from "astro-ui";
---

<ToggleGroup ariaLabel="Text align">
  <Toggle ariaLabel="Left">Left</Toggle>
  <Toggle ariaLabel="Center">Center</Toggle>
  <Toggle ariaLabel="Right">Right</Toggle>
</ToggleGroup>

Demos

Horizontal

<ToggleGroup ariaLabel="Text align">
  <Toggle ariaLabel="Left">Left</Toggle>
  <Toggle ariaLabel="Center" pressed>Center</Toggle>
  <Toggle ariaLabel="Right">Right</Toggle>
</ToggleGroup>

Vertical

<ToggleGroup orientation="vertical" ariaLabel="View">
  <Toggle ariaLabel="List">List</Toggle>
  <Toggle ariaLabel="Grid" pressed>Grid</Toggle>
</ToggleGroup>

API

Props

Prop	Type	Default	Description
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	Stack direction of the connected group.
`class`	`string`	`—`	Merged via cn(); Tailwind classes welcome.
`id`	`string`	`—`	Element id.
`ariaLabel`	`string`	`—`	Accessible name.

Accessibility

Implemented accessibility features — semantics, ARIA wiring, and keyboard behavior that ship with the component.

FAQ

How do I enforce single-selection?

On click, set aria-pressed=false (and drop aui-toggle--pressed) on every sibling — same one-line script pattern as Toggle; the group itself stays zero-JS.

Changelog

Version history mentioning ToggleGroup.

v0.1.0 — 2026-11-11

added

Forms (18): Autocomplete, Combobox, Label, Field, Input, InputGroup, Textarea, Select, Checkbox, Radio, Switch, Toggle, ToggleGroup, RadioGroup, Rating, Slider, DatePicker, TimePicker.