Radio

Preview

Installation

pnpm add @oshon-ai/components @oshon-ai/tokens @oshon-ai/primitives

pnpm dlx @oshon-ai/cli add radio

Wire the tokens into your Tailwind v4 stylesheet:

/* app/globals.css */
@import 'tailwindcss';
@import '@oshon-ai/tokens/css';
@import '@oshon-ai/tokens/tailwind';

New here? Walk through the full setup — prereqs, theming, your first render.

Usage

Import the component and render it. Every component supports the standard tier, size, and disabled props where applicable.

'use client';
import { Radio } from '@oshon-ai/components';

export default function Example() {
  return <Radio />;
}

<RadioGroup size="m" name="demo-plan" defaultValue="basic" aria-label="Choose a plan">
      <Radio value="basic" label="Basic" />
      <Radio value="pro" label="Pro" />
      <Radio value="enterprise" label="Enterprise" />
    </RadioGroup>

<div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', alignItems: 'flex-start' }}>
      <div key="xs" data-story-size="xs">
        <RadioGroup size="xs" name="demo-plan" defaultValue="basic" aria-label="Choose a plan">
          <Radio value="basic" label="Basic" />
          <Radio value="pro" label="Pro" />
          <Radio value="enterprise" label="Enterprise" />
        </RadioGroup>
      </div>
      <div key="s" data-story-size="s">
        <RadioGroup size="s" name="demo-plan" defaultValue="basic" aria-label="Choose a plan">
          <Radio value="basic" label="Basic" />
          <Radio value="pro" label="Pro" />
          <Radio value="enterprise" label="Enterprise" />
        </RadioGroup>
      </div>
      <div key="m" data-story-size="m">
        <RadioGroup size="m" name="demo-plan" defaultValue="basic" aria-label="Choose a plan">
          <Radio value="basic" label="Basic" />
          <Radio value="pro" label="Pro" />
          <Radio value="enterprise" label="Enterprise" />
        </RadioGroup>
      </div>
      <div key="l" data-story-size="l">
        <RadioGroup size="l" name="demo-plan" defaultValue="basic" aria-label="Choose a plan">
          <Radio value="basic" label="Basic" />
          <Radio value="pro" label="Pro" />
          <Radio value="enterprise" label="Enterprise" />
        </RadioGroup>
      </div>
      <div key="mobile" data-story-size="mobile">
        <RadioGroup size="mobile" name="demo-plan" defaultValue="basic" aria-label="Choose a plan">
          <Radio value="basic" label="Basic" />
          <Radio value="pro" label="Pro" />
          <Radio value="enterprise" label="Enterprise" />
        </RadioGroup>
      </div>
    </div>

Styling

Three layers of customization, in order of escape-hatch strength: className overrides → data-attribute targeting → CSS custom properties.

Passing Tailwind classes

Every Oshon component accepts a className prop merged AFTER the component's default classes. Use it to override spacing, color, or size without forking the component.

<Radio
  className="ring-2 ring-offset-2 ring-blue-500"
/>

Data attributes

Oshon components expose their internal state as data-oshon-* attributes so you can target them from CSS without coupling to internal class names. The most common attributes are listed below — see the component's source for the full set.

/* Target the secondary tier specifically */
[data-oshon-tier="secondary"] {
  --oshon-color-primary-700: var(--my-brand-color);
}

Interactive states

Every interactive component supports the standard CSS pseudo- classes plus Tailwind's state variants. Focus rings always use :focus-visible so keyboard users see them but mouse users don't.

• :hover / hover:* — pointer hover
• :focus-visible / focus-visible:* — keyboard focus
• :active / active:* — pressed
• :disabled / disabled:* — set via the disabled prop

Anatomy

The named regions a consumer composes when rendering this component. Each is documented separately so you can target keyboard nav, ARIA labels, and slot props with precision.

Keyboard

Accessibility

Every Oshon component ships axe-clean. We test in CI on every PR and publish the audit log per component.

WCAG level

2.2 AA

Screen readers tested

VoiceOver (macOS), NVDA (Windows)

Last axe audit

2026-04-28

Do / Don't

<RadioGroup name="plan" value={plan} onValueChange={setPlan}>
  <Radio value="basic" label="Basic" />
  <Radio value="pro" label="Pro" />
  <Radio value="ent" label="Enterprise" />
</RadioGroup>

<RadioGroup name="theme" defaultValue="dark">
  <Radio value="light" label="Light" />
  <Radio value="dark" label="Dark" />
</RadioGroup>

<Radio name="plan" value="basic" label="Basic" defaultChecked />

<Radio
  name="cadence"
  value="weekly"
  label="Weekly digest"
  description="A summary every Friday morning"
/>

<div role="radio" aria-checked={selected} onClick={pick}>…</div>

<Radio value="basic" label="Basic" />

<Radio name="plan" value="basic" label="Basic" />
<Radio name="plan" value="pro" label="Pro" />

<Radio slotClassName={{ ring: "border-[#0066ff]" }} />

Related

• Checkbox
• Toggle
• Chip

Design rationale

Radio is the second of two primitive selection controls in the Oshon DS (alongside Checkbox). The Figma source authors a single 20×20 surface with five published states; we collapse those into a single `data-state` attribute on the ring + dot so the entire visual axis can be reasoned about as a state machine. The hidden native `<input type="radio">` layered on top of the visual ring is the cornerstone — it owns focus, native arrow-key navigation, form participation, and screen-reader semantics, while the visual chrome stays pure presentation. RadioGroup is a thin orchestration wrapper that exists for one reason: native HTML radios share state by `name`, but React apps want to drive selection from a controlled value. The group swaps that contract — the React `value` prop is the single source of truth, and every child Radio reads its `checked` state from `group.value === radio.value` via context. Five-size axis anchors at the published 20×20 default with the 8×8 inner dot (40 % of the ring); xs/s shrink the dot proportionally so the inner circle never reads larger than half the ring at any size.