Radio Group

Stable

Single-selection radio button controls featuring illuminated laser cores, cyber-glow focus halos, and contextual telemetry metadata.

Installation

$pnpm add @siberui/react

Import

tsx

import { RadioGroup, Radio } from '@siberui/react';

Basic Usage & Descriptions

Wrap radio options within a RadioGroup to establish accessible keyboard navigation and single-value state management.

ANOMALY RESPONSE POLICY

Autonomous QuarantineIsolate compromised subnets immediately upon detection

Manual Operator SignoffRoute alert telemetry to active tier-3 sentinels

Passive Telemetry OnlyLog signature payloads without network disruption

tsx

<RadioGroup defaultValue="automated" label="ANOMALY RESPONSE POLICY">
  <Radio
    radioValue="automated"
    label="Autonomous Quarantine"
    description="Isolate compromised subnets immediately upon detection"
  />
  <Radio
    radioValue="manual"
    label="Manual Operator Signoff"
    description="Route alert telemetry to active tier-3 sentinels"
  />
  <Radio
    radioValue="passive"
    label="Passive Telemetry Only"
    description="Log signature payloads without network disruption"
  />
</RadioGroup>

Neon Glow Variant

Activate variant="neon" to illuminate the active radio core with an electric cyan laser aura.

PRIMARY QUANTUM NODE

US-EAST-1 (Virginia)Latency 12ms • 99.999% uptime

EU-CENTRAL-1 (Frankfurt)Latency 4ms • Primary orbital uplink

AP-EAST-1 (Hong Kong)Latency 48ms • Standby failover

tsx

<RadioGroup defaultValue="eu-central" label="PRIMARY QUANTUM NODE">
  <Radio
    variant="neon"
    radioValue="us-east"
    label="US-EAST-1 (Virginia)"
    description="Latency 12ms • 99.999% uptime"
  />
  <Radio
    variant="neon"
    radioValue="eu-central"
    label="EU-CENTRAL-1 (Frankfurt)"
    description="Latency 4ms • Primary orbital uplink"
  />
  <Radio
    variant="neon"
    radioValue="ap-east"
    label="AP-EAST-1 (Hong Kong)"
    description="Latency 48ms • Standby failover"
  />
</RadioGroup>

Horizontal & Multi-Column Flow

Set orientation="horizontal" for inline option bars and segmented filter triggers.

ENCRYPTION LEVEL

Standard (AES-256)

High (Lattice-512)

Maximum (Quantum Zero)

tsx

<RadioGroup orientation="horizontal" defaultValue="high" label="ENCRYPTION LEVEL">
  <Radio variant="neon" radioValue="standard" label="Standard (AES-256)" />
  <Radio variant="neon" radioValue="high" label="High (Lattice-512)" />
  <Radio variant="neon" radioValue="maximum" label="Maximum (Quantum Zero)" />
</RadioGroup>

Scale & Density (sm, md, lg)

Tune target circle scale across sm (14px), md (16px), and lg (20px).

Compact radio (sm - 14px)

Standard radio (md - 16px)

Hero density radio (lg - 20px)

tsx

<div className="flex flex-col gap-5 max-w-md w-full">
  <RadioGroup defaultValue="a">
    <Radio radioSize="sm" radioValue="a" label="Compact radio (sm - 14px)" />
  </RadioGroup>
  <RadioGroup defaultValue="b">
    <Radio radioSize="md" radioValue="b" label="Standard radio (md - 16px)" />
  </RadioGroup>
  <RadioGroup defaultValue="c">
    <Radio radioSize="lg" radioValue="c" label="Hero density radio (lg - 20px)" />
  </RadioGroup>
</div>

Frosted Cyber-Glass Cipher Suite Selector

Construct glassmorphic encryption selection panels layered on top of circuit substrate textures with perimeter laser sweeps.

CIPHER ENGINE SELECT

READY

ACTIVE CRYPTOGRAPHIC PRIMITIVE

Kyber-1024 Lattice CryptographyNIST-standard post-quantum key exchange

Curve25519 Elliptic CurveHigh-speed hardware-accelerated signature

RSA-4096 Legacy FallbackTraditional PKI certificate compatibility

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">
  <div className="relative z-10 space-y-5">
    <div className="flex items-center justify-between pb-3 border-b border-white/[0.08]">
      <div className="flex items-center gap-2">
        <Key className="h-4 w-4 text-cyan-400" />
        <span className="font-mono text-xs font-bold text-white tracking-wider">CIPHER ENGINE SELECT</span>
      </div>
      <Badge variant="glass" dot dotColor="cyan">READY</Badge>
    </div>

    <RadioGroup
      value={selectedCipher}
      onValueChange={setSelectedCipher}
      label="ACTIVE CRYPTOGRAPHIC PRIMITIVE"
    >
      <Radio
        variant="neon"
        radioValue="lattice"
        label="Kyber-1024 Lattice Cryptography"
        description="NIST-standard post-quantum key exchange"
      />
      <Radio
        variant="neon"
        radioValue="ecc"
        label="Curve25519 Elliptic Curve"
        description="High-speed hardware-accelerated signature"
      />
      <Radio
        variant="neon"
        radioValue="rsa"
        label="RSA-4096 Legacy Fallback"
        description="Traditional PKI certificate compatibility"
      />
    </RadioGroup>

    <div className="pt-2">
      <Button variant="neon" glow className="w-full">
        APPLY CIPHER CONFIG
      </Button>
    </div>
  </div>
  <BorderBeam variant="neon" size={140} duration={6} borderWidth={1.5} glow />
</div>

Tactical HUD Cluster Routing Dashboard

Composite cluster routing console with live server node selections.

EDGE REPLICATION HUB

ROUTED

Select master consensus node for cross-region state commit.

NRT-01 (Tokyo Nexus)Active leader • 840 tx/s

FRA-04 (Frankfurt Hub)Synchronized replica • 838 tx/s

IAD-02 (Virginia Gateway)Synchronized replica • 835 tx/s

tsx

<Card className="max-w-md mx-auto border-cyan-500/30 bg-[#070b14] shadow-xl">
  <CardHeader className="pb-4 border-b border-white/[0.06]">
    <div className="flex items-center justify-between">
      <CardTitle className="text-sm font-mono text-cyan-400 tracking-wider">EDGE REPLICATION HUB</CardTitle>
      <Badge variant="neon" size="sm">ROUTED</Badge>
    </div>
    <CardDescription className="text-xs text-slate-400">
      Select master consensus node for cross-region state commit.
    </CardDescription>
  </CardHeader>

  <CardContent className="p-6 space-y-4">
    <RadioGroup defaultValue="tokyo">
      <Radio
        variant="neon"
        radioValue="tokyo"
        label="NRT-01 (Tokyo Nexus)"
        description="Active leader • 840 tx/s"
      />
      <Radio
        variant="neon"
        radioValue="frankfurt"
        label="FRA-04 (Frankfurt Hub)"
        description="Synchronized replica • 838 tx/s"
      />
      <Radio
        variant="neon"
        radioValue="virginia"
        label="IAD-02 (Virginia Gateway)"
        description="Synchronized replica • 835 tx/s"
      />
    </RadioGroup>
  </CardContent>
</Card>

API Reference

PROPERTIES (9)← swipe to inspect →

Property	Description	Type	Default
orientation	RadioGroup: layout orientation axis.	"horizontal" \| "vertical"	"vertical"
value	RadioGroup: Controlled active radio value.	string	-
defaultValue	RadioGroup: Initial active value in uncontrolled mode.	string	-
onValueChange	RadioGroup: Callback triggered when selection changes.	(value: string) => void	-
variant	Radio: Cyber glow preset.	"default" \| "neon" \| "primary" \| "primary-subtle" \| "primary-outline"	"default"
radioValue	Radio: Unique string value identifying this radio option (required).	string	-
radioSize	Radio: Circle dimensions preset.	"sm" \| "md" \| "lg"	"md"
label	Radio: Primary text displayed beside the radio button.	string	-
description	Radio: Monospace secondary telemetry description.	string	-

Accessibility

WAI-ARIA RadioGroup: Implements role="radiogroup" and properly groups child radios under a shared HTML form name.
Arrow Key Navigation: Users can smoothly navigate and cycle active options using the Up, Down, Left, and Right arrow keys.
Label Association: The entire container is wrapped in a clickable label element with full touch and cursor hit areas.

Best Practices

Mutual Exclusivity: Use Radio Groups only when exactly one option can be chosen from a set of 2 to 7 mutually exclusive choices.
Default Value: Always provide a sensible default selection to avoid ambiguous uncommitted states in operational dashboards.