Toggle Group
A set of two-state buttons that can be toggled on or off. Supports single-select (radio-like) or multiple-select modes with full roving-tabindex keyboard navigation, built on Radix UI.
Installation
Install via CLI
npx @moontra/moonui-cli add toggle-groupUsage
Examples
Single Selection
type="single" allows exactly one active item at a time (radio-like). Controlled here with useState — value is a string.
Multiple Selection
type="multiple" lets several items be active at once (a text-formatting toolbar). Controlled — value is a string[].
Variants & Sizes
Set variant and size on the group and they propagate to every item via context. Available variants: default, outline. Sizes: sm, default, lg.
Disabled Item
Add disabled to any ToggleGroupItem to make it non-interactive. Keyboard navigation skips disabled items automatically.
Vertical Orientation
Pass orientation="vertical" to stack the items. Radix writes data-orientation on the root and the group switches to a column layout with stretched items; arrow-key roving focus follows the axis, so Up/Down move between items instead of Left/Right.