Radio

since v0.4.0

Single radio option — must be used inside a <RadioGroup>. Forwards ref to the root <label>.

Install

Add the package and import the component.

pnpm add @hey-mike/tungsten

pnpm add @hey-mike/tungsten

import { Radio } from '@hey-mike/tungsten';

import { Radio } from '@hey-mike/tungsten';

Preview

Same fixtures used by the visual-regression suite.

Open snapshot in new view →

Usage

apps/docs/app/snapshots/radio/page.tsx

import { Radio, RadioGroup } from '@hey-mike/tungsten';
import { VariantGrid } from '../_components/VariantGrid';

export default function RadioSnapshot() {
  return (
    <VariantGrid
      title="Radio"
      variants={[
        {
          label: 'group',
          node: (
            <RadioGroup name="snapshot-radio" defaultValue="b" className="flex flex-col gap-2">
              <Radio value="a" label="Option A" />
              <Radio value="b" label="Option B (selected)" />
              <Radio value="c" label="Option C" />
              <Radio value="d" label="Option D (disabled)" disabled />
            </RadioGroup>
          ),
        },
      ]}
    />
  );
}

import { Radio, RadioGroup } from '@hey-mike/tungsten';
import { VariantGrid } from '../_components/VariantGrid';

export default function RadioSnapshot() {
  return (
    <VariantGrid
      title="Radio"
      variants={[
        {
          label: 'group',
          node: (
            <RadioGroup name="snapshot-radio" defaultValue="b" className="flex flex-col gap-2">
              <Radio value="a" label="Option A" />
              <Radio value="b" label="Option B (selected)" />
              <Radio value="c" label="Option C" />
              <Radio value="d" label="Option D (disabled)" disabled />
            </RadioGroup>
          ),
        },
      ]}
    />
  );
}

Props

Surface specific to <Radio />.

Prop	Type	Default	Description
value*	`string`	—	—
label	`string`	—	—
disabled	`boolean`	`false`	—

Sub-components

Composition slots re-exported from the same module.

RadioGroup

Prop	Type	Default	Description
value	`string`	—	—
defaultValue	`string`	—	—
onValueChange	`((value: string) => void)`	—	—
disabled	`boolean`	`false`	—
name	`string`	—	—
className	`string`	—	—
aria-label	`string`	—	—
aria-labelledby	`string`	—	—