Toggle Group

A group of toggle buttons that can be used to select multiple options.

Source Code Radix UI

Installation


pnpm dlx radianui@latest add toggle-group

Usage

Imports

/components/ui/toggle-group.tsx

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

Code

/components/ui/toggle-group.tsx

<ToggleGroup>
	<ToggleGroupItem value="bold">Bold</ToggleGroupItem>
	<ToggleGroupItem value="italic">Italic</ToggleGroupItem>
	<ToggleGroupItem value="underline">Underline</ToggleGroupItem>
</ToggleGroup>

Examples

Outline Variant

Ghost Variant

Custom Spacing

Vertical Toggle Group

Disabled State

Props

Name	Default	Values
variant	outline	ghostoutline
size	36	283236404448
disabled	false	boolean
orientation	horizontal	horizontalvertical
spacing	0	integer
External Reference	-	-