Components
Toggle
A button with a pressed state, and a group of them with single or multiple selection.
Client componentUses state or handlers, so it starts with "use client".
import { Toggle, ToggleGroup, ToggleGroupItem, toggleVariants } from "@glob-ui/toggle"Preview
Examples
Single selection
type="single": pressing an item releases the others. Pressing it again clears the choice.
Multiple selection
type="multiple": several items stay pressed. value is a list of values.
API
Props are generated from the TypeScript types in the package source.
Toggle
Prop
Type
ToggleGroup
Prop
Type
ToggleGroupItem
Prop
Type
Accessibility
| Key or action | Behaviour |
|---|---|
| Enter, Space | Presses or releases the toggle. aria-pressed changes. |
| Tab | Moves into the group once, then out. Only one item is in the tab order. |
| Arrow keys | Move focus between items in the group. Disabled items are skipped. |
ARIA. Each toggle is an aria-pressed button. An icon-only toggle or item needs an aria-label, for example "Bold".