Toggle Group

Stable

Radix UI-backed segmented controls and toggle button matrices supporting single mutually-exclusive or multi-select state models.

Installation

$pnpm add @siberui/react

Import

tsx

import { 
  ToggleGroup, 
  ToggleGroupItem 
} from '@siberui/react';

Single Selection (Mutually Exclusive)

With type="single", only one item can be active at a time, acting like an illuminated segmented radio pill.

tsx

<ToggleGroup type="single" defaultValue="center">
  <ToggleGroupItem value="left" aria-label="Left align">
    <AlignLeft className="h-4 w-4" />
  </ToggleGroupItem>
  <ToggleGroupItem value="center" aria-label="Center align">
    <AlignCenter className="h-4 w-4" />
  </ToggleGroupItem>
  <ToggleGroupItem value="right" aria-label="Right align">
    <AlignRight className="h-4 w-4" />
  </ToggleGroupItem>
</ToggleGroup>

Multiple Selection (Multi-Select Matrix)

Set type="multiple" to allow simultaneous active toggles, ideal for sensor overlays and text styling.

tsx

<ToggleGroup type="multiple" defaultValue={['bold', 'underline']}>
  <ToggleGroupItem value="bold" aria-label="Toggle bold">
    <Bold className="h-4 w-4" />
  </ToggleGroupItem>
  <ToggleGroupItem value="italic" aria-label="Toggle italic">
    <Italic className="h-4 w-4" />
  </ToggleGroupItem>
  <ToggleGroupItem value="underline" aria-label="Toggle underline">
    <Underline className="h-4 w-4" />
  </ToggleGroupItem>
</ToggleGroup>

Neon Cybernetic Toggle Group

Pass variant="neon" for cyan laser border halos, glowing active states, and monospace labels.

tsx

<ToggleGroup variant="neon" type="single" value={selectedFeed} onValueChange={(val) => val && setSelectedFeed(val)}>
  <ToggleGroupItem value="sat1">SAT_01</ToggleGroupItem>
  <ToggleGroupItem value="sat2">SAT_02</ToggleGroupItem>
  <ToggleGroupItem value="sat3">SAT_03</ToggleGroupItem>
</ToggleGroup>

Size Spectrum (Small, Medium, Large)

Configure button height and typography via size="sm" | "md" | "lg".

tsx

<div className="flex flex-col gap-4 items-center justify-center">
  {/* Small */}
  <ToggleGroup size="sm" variant="outline" type="single" defaultValue="1">
    <ToggleGroupItem value="1">SM 1</ToggleGroupItem>
    <ToggleGroupItem value="2">SM 2</ToggleGroupItem>
  </ToggleGroup>

  {/* Medium */}
  <ToggleGroup size="md" variant="outline" type="single" defaultValue="1">
    <ToggleGroupItem value="1">MD 1</ToggleGroupItem>
    <ToggleGroupItem value="2">MD 2</ToggleGroupItem>
  </ToggleGroup>

  {/* Large */}
  <ToggleGroup size="lg" variant="outline" type="single" defaultValue="1">
    <ToggleGroupItem value="1">LG 1</ToggleGroupItem>
    <ToggleGroupItem value="2">LG 2</ToggleGroupItem>
  </ToggleGroup>
</div>

Frosted Cyber-Glass Subnet Selector

Layer toggle button matrices over circuit substrates with perimeter laser sweeps.

ACTIVE TELEMETRY SENSORS

tsx

<div className="relative w-full max-w-md p-8 rounded-2xl bg-white/[0.04] backdrop-blur-xl border border-white/10 shadow-2xl overflow-hidden flex flex-col items-center space-y-4">
  <span className="font-mono text-xs font-bold text-white tracking-wider">ACTIVE TELEMETRY SENSORS</span>
  <ToggleGroup variant="glass" type="multiple" defaultValue={['opt', 'rf']}>
    <ToggleGroupItem value="opt">OPTICAL</ToggleGroupItem>
    <ToggleGroupItem value="rf">RADIO RF</ToggleGroupItem>
    <ToggleGroupItem value="mag">MAGNETIC</ToggleGroupItem>
  </ToggleGroup>
  <BorderBeam variant="neon" size={140} duration={6} borderWidth={1.5} glow />
</div>

Tactical HUD Laser Frequency Selector Card

Composite mission defense card with integrated frequency channel toggles.

CARRIER BAND CHANNEL

LOCKED

tsx

<Card className="max-w-md mx-auto border-cyan-500/30 bg-[#070b14] shadow-xl">
  <CardHeader className="pb-3 border-b border-white/[0.06]">
    <div className="flex items-center justify-between">
      <CardTitle className="text-sm font-mono text-cyan-400 tracking-wider">CARRIER BAND CHANNEL</CardTitle>
      <Badge variant="neon" size="sm">LOCKED</Badge>
    </div>
  </CardHeader>

  <CardContent className="p-6 space-y-4">
    <ToggleGroup variant="neon" type="single" defaultValue="ghz5">
      <ToggleGroupItem value="ghz2" className="flex-1">2.4 GHz</ToggleGroupItem>
      <ToggleGroupItem value="ghz5" className="flex-1">5.8 GHz</ToggleGroupItem>
      <ToggleGroupItem value="ghz60" className="flex-1">60 GHz</ToggleGroupItem>
    </ToggleGroup>
  </CardContent>
</Card>

API Reference

PROPERTIES (5)← swipe to inspect →

Property	Description	Type	Default
type	Selection model ("single" or "multiple").	"single" \| "multiple"	-
variant	Visual styling theme ("default", "outline", "neon", "glass").	"default" \| "outline" \| "neon" \| "glass"	"default"
size	Button size dimension ("sm", "md", "lg").	"sm" \| "md" \| "lg"	"md"
value	Controlled active value (string for single, string[] for multiple).	string \| string[]	-
onValueChange	Callback when active value changes.	(value: any) => void	-

Accessibility

W3C WAI-ARIA Toggle Button: Single groups output role="radiogroup", multiple groups output role="group" with aria-pressed.

Best Practices

Icon Accessibility: When using icon-only items, always provide aria-label on each ToggleGroupItem.