Components

Radio

One choice from a group, using native radio buttons.

Preview

PlanFreePro

Usage

import { Radio, Label } from '@fwenthehunter/friendly-ui';

<fieldset>
  <legend>Plan</legend>
  <Label><Radio name="plan" value="free" defaultChecked /> Free</Label>
  <Label><Radio name="plan" value="pro" /> Pro</Label>
</fieldset>

Give related radios the same name and distinct values. The browser handles exclusive selection, arrow keys, focus, validation, and form submission. Group with fieldset and legend; give each choice a label. No client wrapper is needed for uncontrolled inputs.

Props

Components accept native HTML props, className, and style. Server-compatible primitives also forward React 19 refs; Modal manages its own dialog ref.

Prop	Type	Default
`name`	string shared by the group	—
`value`	string identifying this choice	—
`defaultChecked`	boolean	false