Toggle Group

Usage

import { ToggleGroup, ToggleGroupItem } from '@jamie/ui/toggle-group'
import { AlignCenterIcon, AlignLeftIcon, AlignRightIcon } from 'lucide-react'
 
export function ToggleGroupDemo() {
  return (
    <ToggleGroup>
      <ToggleGroupItem value="left" aria-label="Align left">
        <AlignLeftIcon className="size-4" />
      </ToggleGroupItem>
      <ToggleGroupItem value="center" aria-label="Align center">
        <AlignCenterIcon className="size-4" />
      </ToggleGroupItem>
      <ToggleGroupItem value="right" aria-label="Align right">
        <AlignRightIcon className="size-4" />
      </ToggleGroupItem>
    </ToggleGroup>
  )
}

Outline

Use variant="outline" on the group for bordered toggle items.

import { ToggleGroup, ToggleGroupItem } from '@jamie/ui/toggle-group'
import { LayoutGridIcon, LayoutListIcon, TableIcon } from 'lucide-react'
 
export function ToggleGroupOutlineDemo() {
  return (
    <ToggleGroup variant="outline">
      <ToggleGroupItem value="list" aria-label="List view">
        <LayoutListIcon className="size-4" />
      </ToggleGroupItem>
      <ToggleGroupItem value="grid" aria-label="Grid view">
        <LayoutGridIcon className="size-4" />
      </ToggleGroupItem>
      <ToggleGroupItem value="table" aria-label="Table view">
        <TableIcon className="size-4" />
      </ToggleGroupItem>
    </ToggleGroup>
  )
}

Sizes

Use the size prop to change the size of the toggle group items.

import { ToggleGroup, ToggleGroupItem } from '@jamie/ui/toggle-group'
import { AlignCenterIcon, AlignLeftIcon, AlignRightIcon } from 'lucide-react'
 
export function ToggleGroupSizesDemo() {
  return (
    <div className="flex flex-col items-center gap-4">
      <ToggleGroup size="sm">
        <ToggleGroupItem value="left" aria-label="Align left">
          <AlignLeftIcon className="size-3.5" />
        </ToggleGroupItem>
        <ToggleGroupItem value="center" aria-label="Align center">
          <AlignCenterIcon className="size-3.5" />
        </ToggleGroupItem>
        <ToggleGroupItem value="right" aria-label="Align right">
          <AlignRightIcon className="size-3.5" />
        </ToggleGroupItem>
      </ToggleGroup>
      <ToggleGroup size="default">
        <ToggleGroupItem value="left" aria-label="Align left">
          <AlignLeftIcon className="size-4" />
        </ToggleGroupItem>
        <ToggleGroupItem value="center" aria-label="Align center">
          <AlignCenterIcon className="size-4" />
        </ToggleGroupItem>
        <ToggleGroupItem value="right" aria-label="Align right">
          <AlignRightIcon className="size-4" />
        </ToggleGroupItem>
      </ToggleGroup>
      <ToggleGroup size="lg">
        <ToggleGroupItem value="left" aria-label="Align left">
          <AlignLeftIcon className="size-4" />
        </ToggleGroupItem>
        <ToggleGroupItem value="center" aria-label="Align center">
          <AlignCenterIcon className="size-4" />
        </ToggleGroupItem>
        <ToggleGroupItem value="right" aria-label="Align right">
          <AlignRightIcon className="size-4" />
        </ToggleGroupItem>
      </ToggleGroup>
    </div>
  )
}

Spacing

Use spacing to add space between toggle group items instead of the joined look.

import { ToggleGroup, ToggleGroupItem } from '@jamie/ui/toggle-group'
import { AlignCenterIcon, AlignLeftIcon, AlignRightIcon } from 'lucide-react'
 
export function ToggleGroupSpacingDemo() {
  return (
    <ToggleGroup variant="outline" spacing={1}>
      <ToggleGroupItem value="left" aria-label="Align left">
        <AlignLeftIcon className="size-4" />
      </ToggleGroupItem>
      <ToggleGroupItem value="center" aria-label="Align center">
        <AlignCenterIcon className="size-4" />
      </ToggleGroupItem>
      <ToggleGroupItem value="right" aria-label="Align right">
        <AlignRightIcon className="size-4" />
      </ToggleGroupItem>
    </ToggleGroup>
  )
}

Vertical

Use orientation="vertical" for vertically stacked toggle groups.

import { ToggleGroup, ToggleGroupItem } from '@jamie/ui/toggle-group'
import { AlignCenterIcon, AlignLeftIcon, AlignRightIcon } from 'lucide-react'
 
export function ToggleGroupVerticalDemo() {
  return (
    <ToggleGroup orientation="vertical" variant="outline">
      <ToggleGroupItem value="left" aria-label="Align left">
        <AlignLeftIcon className="size-4" />
      </ToggleGroupItem>
      <ToggleGroupItem value="center" aria-label="Align center">
        <AlignCenterIcon className="size-4" />
      </ToggleGroupItem>
      <ToggleGroupItem value="right" aria-label="Align right">
        <AlignRightIcon className="size-4" />
      </ToggleGroupItem>
    </ToggleGroup>
  )
}

Disabled

import { ToggleGroup, ToggleGroupItem } from '@jamie/ui/toggle-group'
import { AlignCenterIcon, AlignLeftIcon, AlignRightIcon } from 'lucide-react'
 
export function ToggleGroupDisabledDemo() {
  return (
    <ToggleGroup disabled>
      <ToggleGroupItem value="left" aria-label="Align left">
        <AlignLeftIcon className="size-4" />
      </ToggleGroupItem>
      <ToggleGroupItem value="center" aria-label="Align center">
        <AlignCenterIcon className="size-4" />
      </ToggleGroupItem>
      <ToggleGroupItem value="right" aria-label="Align right">
        <AlignRightIcon className="size-4" />
      </ToggleGroupItem>
    </ToggleGroup>
  )
}

Custom

A controlled toggle group for selecting meeting recap sections.

Include in meeting recap

Selected: summary

'use client'
 
import { Label } from '@jamie/ui/label'
import { ToggleGroup, ToggleGroupItem } from '@jamie/ui/toggle-group'
import { useState } from 'react'
 
const views = [
  { value: 'summary', label: 'Summary' },
  { value: 'transcript', label: 'Transcript' },
  { value: 'action-items', label: 'Action Items' }
]
 
export function ToggleGroupCustomDemo() {
  const [selected, setSelected] = useState(['summary'])
 
  return (
    <div className="flex flex-col gap-3">
      <Label>Include in meeting recap</Label>
      <ToggleGroup
        value={selected}
        onValueChange={setSelected}
        variant="outline"
        spacing={1}
        size="sm"
      >
        {views.map((view) => (
          <ToggleGroupItem key={view.value} value={view.value}>
            {view.label}
          </ToggleGroupItem>
        ))}
      </ToggleGroup>
      <p className="text-xs text-muted-foreground">
        {selected.length === 0 ? 'No sections selected' : `Selected: ${selected.join(', ')}`}
      </p>
    </div>
  )
}