Toggle Group

Pressed-state buttons: formatting, alignment, filters. Free, MIT · Navigation and layout › Switching

Installation

npx valyro-cli@latest add toggle-group

npx shadcn@latest add https://valyro.xyz/r/toggle-group.json

npm install valyro-ui

import 'valyro-ui/styles.css';
import { ToggleGroup } from 'valyro-ui';

Prop	Type	Default
`items`	`readonly ToggleGroupOption[]`		The buttons in order. Or compose them as children: `ToggleGroup.Item`.
`children`	`ReactNode`		The compound form instead of `items`: `ToggleGroup.Item` elements.
`type`	`M`		`single`: at most one pressed (alignment); `multiple`: any number (bold, italic, underline).
`value`	`ToggleGroupValue<M>`		The pressed value (`single`, null for none) or values (`multiple`).
`defaultValue`	`ToggleGroupValue<M>`		Initial `value` when uncontrolled.
`onValueChange`	`(value: ToggleGroupValue<M>) => void`		Called with the new `value` when it changes.
`allowEmpty`	`boolean`	`true`	`single`: pressing the pressed button releases it.
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	A row or a column; arrow keys follow it.
`loop`	`boolean`	`true`	Arrow keys wrap from the last button to the first.
`disabled`	`boolean`	`false`	Disables every button.
`attached`	`boolean`	`true`	Joined into one control on a shared track; `false` spaces the buttons apart and lets the row wrap.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Button height and text size.
`indicator`	`boolean`	`false`	`single`: one pressed fill slides between the buttons instead of each button filling on its own.
`labels`	`Partial<ToggleGroupLabels>`		Overrides for the built-in English text; keys left out keep their defaults.

ToggleGroup.Item (ToggleGroupItem)

Tabs — Tabs
Segmented Control — Mode switcher
Pagination — Page navigation
Stepper — Step-by-step progress
App Shell — Application frame
Navbar — Top navigation bar
Sidebar — Side navigation panel
Resizable Panels — Panels with draggable dividers
Scroll Area — Scroll area: themed bars, soft edge fades, stick to bottom for chats
Breadcrumbs — Breadcrumb trail
Dropdown Menu — Dropdown menu
Context Menu — Right-click menu