ToggleGroup

Two-state buttons (aria-pressed). Use Toggle for one option that stays on, and ToggleGroup for a set: type="single" is a deselectable choice, type="multiple" independent toggles.

StableSource

value: "left"

const [align, setAlign] = useState("left");

<ToggleGroup type="single" aria-label="Text alignment" value={align} onValueChange={setAlign}>
<ToggleGroupItem value="left" aria-label="Align left"><AlignLeftIcon /></ToggleGroupItem>
<ToggleGroupItem value="center" aria-label="Align center"><AlignCenterIcon /></ToggleGroupItem>
<ToggleGroupItem value="right" aria-label="Align right"><AlignRightIcon /></ToggleGroupItem>
</ToggleGroup>

Import

import { Toggle, ToggleGroup, ToggleGroupItem } from "@meridui/react";

Examples

Multiple

value: ["bold"]

const [format, setFormat] = useState<string[]>(["bold"]);

<ToggleGroup type="multiple" aria-label="Formatting" value={format} onValueChange={setFormat}>
<ToggleGroupItem value="bold">Bold</ToggleGroupItem>
<ToggleGroupItem value="italic">Italic</ToggleGroupItem>
<ToggleGroupItem value="underline">Underline</ToggleGroupItem>
</ToggleGroup>

Toggle

<Toggle defaultPressed>Show grid</Toggle>
<Toggle size="sm">Snap</Toggle>
<Toggle disabled>Rulers</Toggle>

API reference

Toggle

Accepts every <button> attribute; the ref goes to the button.

Prop	Type	Default	Description
`pressed`	`boolean`	–	Controlled pressed state.
`defaultPressed`	`boolean`	`false`	Initial state when uncontrolled.
`onPressedChange`	`(pressed: boolean) => void`	–	Called with the new state.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Height.

ToggleGroup

Renders a div role="group"; name it with aria-label or aria-labelledby.

Prop	Type	Default	Description
`type`Required	`"single" \| "multiple"`	–	One item on at a time (pressing it again turns it off), or any number.
`value`	`string \| string[]`	–	Controlled value: string ("" for none) or string[].
`defaultValue`	`string \| string[]`	–	Initial value when uncontrolled.
`onValueChange`	`(value) => void`	–	Called with the new value.
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	Which arrow keys move focus, and the layout.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Size of every item.
`disabled`	`boolean`	`false`	Disables every item.

ToggleGroupItem

Accepts every <button> attribute except value.

Prop	Type	Default	Description
`value`Required	`string`	–	Value reported when this item is on.
`disabled`	`boolean`	–	Disables the item; arrow keys skip it.

Styling

Class	Element
`.mrd-toggle`	Toggle and every group item (`data-state="on" \| "off"`, `data-size`)
`.mrd-toggle-group`	Group (`data-orientation`)
`.mrd-toggle-group__item`	Group item

Every item is a <button aria-pressed>, so screen readers announce "pressed" / "not pressed". The group is one tab stop (roving tabindex); arrow keys move focus without changing the state, Space or Enter toggles. Icon-only items need an aria-label.

Key	Action
`Tab`	Move into the group (to the pressed item or the first) and out of it.
`ArrowRightArrowDown`	Next item (wraps; ArrowLeft in RTL).
`ArrowLeftArrowUp`	Previous item (wraps).
`HomeEnd`	First / last item.
`SpaceEnter`	Toggle the focused item.

Guidelines

Use a single ToggleGroup for tool options that apply immediately, like text alignment.

Avoid

Use it to switch between views or pages; that is SegmentedControl or Tabs.

SegmentedControl — one required choice between views.
Switch — a setting that is on or off.