Toggle Group

Installation

Bash

pnpm dlx shadcn@latest add @spaceui/primitives-toggle-group

pnpm dlx shadcn@latest add @spaceui/primitives-toggle-group

Usage

Code

import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group'

Code

<ToggleGroup>
  <ToggleGroupItem>Bold</ToggleGroupItem>
  <ToggleGroupItem>Italic</ToggleGroupItem>
  <ToggleGroupItem>Underline</ToggleGroupItem>
</ToggleGroup>

Features

Variants

Toggle groups in default and outline styles.

Sizes

Toggle groups in sm, default, and lg sizes.

Vertical Orientation

Toggle group arranged vertically with orientation="vertical".

Multiple Selection

Toggle group configured for multiple selection via multiple.

Disabled State

Toggle group rendered in a disabled state.

API Reference

ToggleGroup

Root component. Styled wrapper for ToggleGroup.Root from Base UI. Provides shared variant and size to child toggles via context.

Prop	Type	Default	Description
`variant`	default\|outline	default	Controls the styling of all child toggles
`size`	default\|sm\|lg	default	Controls the size of all child toggles
`orientation`	horizontal\|vertical	horizontal	Controls horizontal or vertical layout

ToggleGroupItem

Individual toggle button within the group. Styled wrapper for Toggle from Base UI. Inherits variant and size from parent ToggleGroup context.

ToggleGroupSeparator

Visual separator between toggle buttons.

Prop	Type	Default	Description
`orientation`	horizontal\|vertical	vertical	Direction matching the parent group

Examples

Toggle group with disabled item

Toggle group with tooltips