Toggle Group
Related buttons with shared selection behavior.
Upstream documentationExamples
Installation
Run the Ninaero registry command to install the component and its dependencies, including shared theme styles.
Install Toggle Group
pnpm dlx shadcn@latest add 'https://ninaero.pages.dev/r/toggle-group.json'Usage
A complete example using the installed component and hook paths.
Toggle Group usage
"use client";import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";function ToggleGroupPreview() { return ( <ToggleGroup defaultValue={["left"]} variant="outline" spacing={0} aria-label="Text alignment"> <ToggleGroupItem value="left">Left</ToggleGroupItem> <ToggleGroupItem value="center">Center</ToggleGroupItem> <ToggleGroupItem value="right">Right</ToggleGroupItem> </ToggleGroup> );}export default function Demo() { return <ToggleGroupPreview />;}API Reference
Ninaero exports and local defaults are listed below. See the upstream reference for inherited primitive props and additional composition examples.
ToggleGroup
ToggleGroup props
ToggleGroupPrimitive.Props & VariantProps<typeof toggleVariants> & { spacing?: number; orientation?: "horizontal" | "vertical"; sound?: boolean; }- spacing
- 2
- orientation
- "horizontal"
- sound
- true
ToggleGroupItem
ToggleGroupItem props
TogglePrimitive.Props & VariantProps<typeof toggleVariants> & { sound?: boolean }- variant
- "default"
- size
- "default"
- sound
- true