Toggle Group

A set of two-state buttons that can be toggled on or off, where only one button can be pressed at a time.

Usage


import { ToggleGroup } from "@rhinolabs/ui"
import { Bold, Italic, Underline } from "lucide-react"
 
export default function ToggleGroupDemo() {
  return (
    <ToggleGroup type="single">
      <ToggleGroup.Item value="bold" aria-label="Toggle bold">
        <Bold className="h-4 w-4" />
      </ToggleGroup.Item>
      <ToggleGroup.Item value="italic" aria-label="Toggle italic">
        <Italic className="h-4 w-4" />
      </ToggleGroup.Item>
      <ToggleGroup.Item value="underline" aria-label="Toggle underline">
        <Underline className="h-4 w-4" />
      </ToggleGroup.Item>
    </ToggleGroup>
  )
}

Examples

Single Selection

Toggle group with single selection mode.


<ToggleGroup type="single" defaultValue="center">
  <ToggleGroup.Item value="left" aria-label="Align left">
    <AlignLeft className="h-4 w-4" />
  </ToggleGroup.Item>
  <ToggleGroup.Item value="center" aria-label="Align center">
    <AlignCenter className="h-4 w-4" />
  </ToggleGroup.Item>
  <ToggleGroup.Item value="right" aria-label="Align right">
    <AlignRight className="h-4 w-4" />
  </ToggleGroup.Item>
</ToggleGroup>

Multiple Selection

Toggle group with multiple selection mode.


<ToggleGroup type="multiple">
  <ToggleGroup.Item value="bold" aria-label="Toggle bold">
    <Bold className="h-4 w-4" />
  </ToggleGroup.Item>
  <ToggleGroup.Item value="italic" aria-label="Toggle italic">
    <Italic className="h-4 w-4" />
  </ToggleGroup.Item>
  <ToggleGroup.Item value="underline" aria-label="Toggle underline">
    <Underline className="h-4 w-4" />
  </ToggleGroup.Item>
</ToggleGroup>

With Variants

Different toggle group variants and sizes.


<div className="space-y-2">
  <ToggleGroup variant="default" type="single">
    <ToggleGroup.Item value="a">A</ToggleGroup.Item>
    <ToggleGroup.Item value="b">B</ToggleGroup.Item>
    <ToggleGroup.Item value="c">C</ToggleGroup.Item>
  </ToggleGroup>
  <ToggleGroup variant="outline" type="single">
    <ToggleGroup.Item value="a">A</ToggleGroup.Item>
    <ToggleGroup.Item value="b">B</ToggleGroup.Item>
    <ToggleGroup.Item value="c">C</ToggleGroup.Item>
  </ToggleGroup>
  <ToggleGroup size="lg" type="single">
    <ToggleGroup.Item value="a">A</ToggleGroup.Item>
    <ToggleGroup.Item value="b">B</ToggleGroup.Item>
    <ToggleGroup.Item value="c">C</ToggleGroup.Item>
  </ToggleGroup>
</div>

Props

ToggleGroup

Prop	Type	Default	Description
`type`	`"single" \| "multiple"`	-	Selection mode
`value`	`string \| string[]`	-	Controlled value(s)
`defaultValue`	`string \| string[]`	-	Default value(s)
`onValueChange`	`(value: string \| string[]) => void`	-	Value change handler
`variant`	`"default" \| "outline"`	`"default"`	Visual style variant
`size`	`"default" \| "sm" \| "lg"`	`"default"`	Size of the toggles

ToggleGroupItem

Prop	Type	Description
`value`	`string`	The value of the item
`disabled`	`boolean`	Whether the item is disabled

Design Considerations

Use clear visual states
Group related options
Consider mobile touch targets
Show active states clearly
Maintain consistent spacing

Accessibility

Supports keyboard navigation
Maintains focus management
Provides ARIA labels
Announces selection changes
Handles disabled states