Radio

Radios are used for mutually exclusive choices across Aggarly Platform: status, severity, session type, access levels, and configuration decisions. The system supports classic radios, premium “radio buttons” for toolbars, and card-style radios for plan selection.

Default Radio Group

Use RadioGroup for correct fieldset/legend semantics and consistent spacing.

Session type

Use radio groups for mutually exclusive choices.

In-person

Remote

Hybrid

This choice affects scheduling and reporting.

Show code

import { Radio, RadioGroup } from "@/design-system/components/Radio";

export function Example() {
  return (
    <RadioGroup
      legend="Session type"
      description="Use radio groups for mutually exclusive choices."
      helper="This choice affects scheduling and reporting."
    >
      <Radio name="sessionType" value="in-person" label="In-person" defaultChecked />
      <Radio name="sessionType" value="remote" label="Remote" />
      <Radio name="sessionType" value="hybrid" label="Hybrid" />
    </RadioGroup>
  );
}

Inline Layout

Inline radios are appropriate for short choice sets (2–4 options) in dense UI areas.

Status

Active

Paused

Archived

Show code

import { Radio, RadioGroup } from "@/design-system/components/Radio";

export function Example() {
  return (
    <RadioGroup legend="Status" layout="inline">
      <Radio name="status" value="active" label="Active" defaultChecked />
      <Radio name="status" value="paused" label="Paused" />
      <Radio name="status" value="archived" label="Archived" />
    </RadioGroup>
  );
}

Colors

Each radio option can carry its own semantic tone (useful for severity, workflow state, and risk levels).

Show code

import { Radio, RadioGroup } from "@/design-system/components/Radio";

export function Example() {
  return (
    <RadioGroup
      legend="Severity (tone per option)"
      helper="Each option can carry its own semantic tone."
    >
      <Radio name="severity" value="low" label="Low" tone="success" />
      <Radio name="severity" value="medium" label="Medium" tone="warning" defaultChecked />
      <Radio name="severity" value="high" label="High" tone="danger" />
      <Radio name="severity" value="neutral" label="Neutral" tone="neutral" />
      <Radio name="severity" value="brand" label="Brand Primary" tone="primary" />
      <Radio name="severity" value="brand2" label="Brand Secondary" tone="secondary" />
    </RadioGroup>
  );
}

Sizes

Use sm for compact areas, md for standard forms, and lg for primary decision surfaces.

Show code

import { Radio, RadioGroup } from "@/design-system/components/Radio";

export function Example() {
  return (
    <div className="stack-md">
      <RadioGroup legend="Small" layout="inline">
        <Radio size="sm" name="s1" value="a" label="A" defaultChecked />
        <Radio size="sm" name="s1" value="b" label="B" />
      </RadioGroup>

      <RadioGroup legend="Default" layout="inline">
        <Radio size="md" name="s2" value="a" label="A" defaultChecked />
        <Radio size="md" name="s2" value="b" label="B" />
      </RadioGroup>

      <RadioGroup legend="Large" layout="inline">
        <Radio size="lg" name="s3" value="a" label="A" defaultChecked />
        <Radio size="lg" name="s3" value="b" label="B" />
      </RadioGroup>
    </div>
  );
}

Radio Buttons

Button-style radios for view toggles, filters, and toolbar controls (premium, non-bootstrap).

View mode

Button-style radios for dense toolbars and view toggles.

List

Grid

Compact

Show code

import { Radio, RadioGroup } from "@/design-system/components/Radio";

export function Example() {
  return (
    <RadioGroup
      legend="View mode"
      layout="inline"
      description="Button-style radios for dense toolbars and view toggles."
    >
      <Radio ui="button" name="view" value="list" label="List" defaultChecked />
      <Radio ui="button" name="view" value="grid" label="Grid" />
      <Radio ui="button" name="view" value="compact" label="Compact" />
    </RadioGroup>
  );
}

Radio Buttons Without Text Labels

Icon-only radios are allowed for dense toolbars, but must include aria-label for accessibility.

View (icon-only)

Show code

import { Radio, RadioGroup } from "@/design-system/components/Radio";

function IconGrid() {/* ... */}
function IconList() {/* ... */}

export function Example() {
  return (
    <RadioGroup legend="View (icon-only)" layout="inline">
      <Radio
        ui="button"
        name="viewIcon"
        value="list"
        aria-label="List view"
        label={<IconList />}
        defaultChecked
      />
      <Radio
        ui="button"
        name="viewIcon"
        value="grid"
        aria-label="Grid view"
        label={<IconGrid />}
      />
    </RadioGroup>
  );
}

Card Radios

Card-style radios for plan selection, onboarding, and enrollment flows.

Plan

Card-style radios for plan selection and enrollment flows.

BasicCore tracking and summaries.

ProAdvanced analytics and supervisor tools.

EnterpriseSLA, SSO, audit exports, and integrations.

Show code

import { Radio, RadioGroup } from "@/design-system/components/Radio";

export function Example() {
  return (
    <RadioGroup
      legend="Plan"
      layout="grid"
      description="Card-style radios for plan selection and enrollment flows."
    >
      <Radio
        ui="card"
        name="plan"
        value="basic"
        tone="neutral"
        label="Basic"
        description="Core tracking and summaries."
        defaultChecked
      />
      <Radio
        ui="card"
        name="plan"
        value="pro"
        tone="primary"
        label="Pro"
        description="Advanced analytics and supervisor tools."
      />
      <Radio
        ui="card"
        name="plan"
        value="enterprise"
        tone="secondary"
        label="Enterprise"
        description="SLA, SSO, audit exports, and integrations."
      />
    </RadioGroup>
  );
}

Glass / Neuomorphic

Optional glass appearance for premium surfaces. Token-driven glass background, border, blur, and elevation.

Show code

import { Radio, RadioGroup } from "@/design-system/components/Radio";

export function Example() {
  return (
    <div className="stack-md">
      <RadioGroup legend="Glass (default UI)" helper="Glass appearance uses token-driven glass surfaces and blur.">
        <Radio appearance="glass" name="g1" value="a" label="Option A" defaultChecked />
        <Radio appearance="glass" name="g1" value="b" label="Option B" />
        <Radio appearance="glass" name="g1" value="c" label="Option C" />
      </RadioGroup>

      <RadioGroup legend="Glass (button UI)" layout="inline">
        <Radio appearance="glass" ui="button" name="g2" value="list" label="List" defaultChecked />
        <Radio appearance="glass" ui="button" name="g2" value="grid" label="Grid" />
        <Radio appearance="glass" ui="button" name="g2" value="compact" label="Compact" />
      </RadioGroup>

      <RadioGroup legend="Glass (card UI)" layout="grid">
        <Radio appearance="glass" ui="card" name="g3" value="basic" tone="neutral" label="Basic" description="Core tracking." defaultChecked />
        <Radio appearance="glass" ui="card" name="g3" value="pro" tone="primary" label="Pro" description="Advanced analytics." />
        <Radio appearance="glass" ui="card" name="g3" value="ent" tone="secondary" label="Enterprise" description="SLA + integrations." />
      </RadioGroup>
    </div>
  );
}