Radio

A radio button for selecting one option from a set.

import { ... } from '@corndev/ui'

Free Pro Team

Selected: pro

HTML

No JavaScript required — these classes are the whole component.

<div class="corn-radio-group">
  <label><input type="radio" name="plan" class="corn-radio" data-size="md" /> Free</label>
  <label><input type="radio" name="plan" class="corn-radio" data-size="md" /> Pro</label>
</div>

Classes

Class
`.corn-radio`
`.corn-radio-group`

Attributes

Attribute	Values
`data-size`	`sm\|md\|lg`
`data-error`	`present or absent`

Vanilla JS

Optional. createRadio only adds and removes the classes and attributes above, so the HTML is equivalent. Reach for it when you need to change options at runtime.

import { createRadio } from '@corndev/ui';
import '@corndev/ui/theme';

const el = document.querySelector('#target');
const instance = createRadio(el, { /* options */ });

Options

Option	Type	Default
`disabled`	`boolean`	`false`
`error`	`boolean`	`false`
`size`	`'sm'\|'md'\|'lg'`	`'md'`

React

Radio, RadioGroup — from @corndev/ui-react.

RadioGroup supplies name/checked/onChange to each child Radio, which are matched by their value prop.

The props are the same as the options above, plus className.

`<RadioGroup>` props

Wraps Radio children and owns the selection.

Prop	Type	Default	Description
`name`	`string`	`undefined`	Shared radio group name (generated if omitted).
`value`	`string`	`undefined`	Currently selected radio value.
`onChange`	`(value: string) => void`	`undefined`	Called with the newly selected value.
`disabled`	`boolean`	`false`	Disables every radio in the group.
`className`	`string`	`undefined`
`children`	`React.ReactNode`	`undefined`

Group

Use RadioGroup to wire a shared name, the selected value, and one onChange.

Small Medium Large

<RadioGroup name="size" value={size} onChange={setSize}>
  <Label><Radio value="sm" /> Small</Label>
  <Label><Radio value="md" /> Medium</Label>
  <Label><Radio value="lg" /> Large</Label>
</RadioGroup>

Sizes

<Label><Radio size="sm" /> Small</Label>
<Label><Radio size="md" /> Medium</Label>
<Label><Radio size="lg" /> Large</Label>