Toggle Group
A set of two-state buttons that can be toggled on or off, individually or as a group.
bunx shadcn@latest add @nx-ui/toggle-groupBasic
By default only one item can be pressed at a time, like a segmented control.
Multiple selection
Set `multiple` so several items can stay pressed at once, e.g. stacked text formatting.
Active: bold
Variant, size & spacing
`variant` and `size` cascade from the group to every item. `spacing` controls the gap: 0 fuses items into a single bordered control, non-zero spaces them as separate buttons.
States
Disable the whole group, disable a single item, or mark the group invalid for validation errors.
Composition: soil report formatting toolbar
Two toggle groups sharing one bordered toolbar — a single-select view switcher and a multiple-select text-formatting cluster — as used when annotating a site remediation note.
Cranbourne Organics — remediation note
Batch WM-2291 · soil sample results
API reference
Exported parts and their props, extracted from the component source.