Skip to content

ToggleGroup

Group of toggle buttons via Radix UI

Single

Usage

tsx
import { ToggleGroup, ToggleGroupItem } from '@tryvienna/ui'

<ToggleGroup type="single" defaultValue="center">
  <ToggleGroupItem value="left" aria-label="Align left">
    <AlignLeftIcon />
  </ToggleGroupItem>
  <ToggleGroupItem value="center" aria-label="Align center">
    <AlignCenterIcon />
  </ToggleGroupItem>
  <ToggleGroupItem value="right" aria-label="Align right">
    <AlignRightIcon />
  </ToggleGroupItem>
</ToggleGroup>

Examples

Single

Single
tsx
<ToggleGroup type="single" defaultValue="center">
  <ToggleGroupItem value="left" aria-label="Align left">
    <AlignLeftIcon />
  </ToggleGroupItem>
  <ToggleGroupItem value="center" aria-label="Align center">
    <AlignCenterIcon />
  </ToggleGroupItem>
  <ToggleGroupItem value="right" aria-label="Align right">
    <AlignRightIcon />
  </ToggleGroupItem>
</ToggleGroup>

Multiple

Multiple
tsx
<ToggleGroup type="multiple" defaultValue={['bold']}>
  <ToggleGroupItem value="bold" aria-label="Bold">
    <BoldIcon />
  </ToggleGroupItem>
  <ToggleGroupItem value="italic" aria-label="Italic">
    <ItalicIcon />
  </ToggleGroupItem>
  <ToggleGroupItem value="underline" aria-label="Underline">
    <UnderlineIcon />
  </ToggleGroupItem>
</ToggleGroup>

Outline

Outline
tsx
<ToggleGroup type="single" variant="outline" defaultValue="center">
  <ToggleGroupItem value="left" aria-label="Left">
    <AlignLeftIcon />
  </ToggleGroupItem>
  <ToggleGroupItem value="center" aria-label="Center">
    <AlignCenterIcon />
  </ToggleGroupItem>
  <ToggleGroupItem value="right" aria-label="Right">
    <AlignRightIcon />
  </ToggleGroupItem>
</ToggleGroup>

API Reference

ToggleGroup

PropTypeDefaultDescription
variant"default" | "outline" | null | undefined-
size"default" | "sm" | "lg" | null | undefined-

Also accepts all props from ToggleGroupPrimitive.Root.

ToggleGroupItem

PropTypeDefaultDescription
variant"default" | "outline" | null | undefined-
size"default" | "sm" | "lg" | null | undefined-

Also accepts all props from ToggleGroupPrimitive.Item.

Data Attributes

Componentdata-slot
ToggleGroup"toggle-group"
ToggleGroupItem"toggle-group-item"