Toggle Group
Pressable options on a gray rail, one at a time or several, in the iOS segmented look. Toggle is a single pressable capsule.
import { ToggleGroup, ToggleGroupItem, Toggle } from "pleate/toggle-group";Single and multiple
2 selected
Toggle
Props
- type
Required. Single can be cleared unless you ignore empty values.
"single" | "multiple"- value / defaultValue / onValueChange
Pressed item(s).
string | string[]- size
Rail and item height (also on Toggle).
"sm" | "md"default "md"- ToggleGroupItem
With no label it renders square; give it an aria-label.
value, icon, disabled, aria-label- Toggle
Standalone pressable button.
pressed, defaultPressed, onPressedChange, icon
Accessibility
- Arrow keys move between items, Space and Enter press.
- Items expose aria-pressed (single type uses radio semantics).
- Icon-only items need an aria-label.