Radio

Single-selection radio group. Controlled via value and onChange. Items share a name attribute for native form semantics.

Preview

Open Sandbox

Anatomy


import { Radio } from '@wire-ui/react'
 
<Radio.Root value={selected} onChange={setSelected} name="options">
  <Radio.Item value="a">
    <Radio.Indicator />
    <Radio.Label>Option A</Radio.Label>
  </Radio.Item>
  <Radio.Item value="b">
    <Radio.Indicator />
    <Radio.Label>Option B</Radio.Label>
  </Radio.Item>
</Radio.Root>

Root props

Prop	Type	Default	Description
`value`	`string \| number`	—	Controlled selected value
`defaultValue`	`string \| number`	—	Initial selected value
`onChange`	`(value: string \| number) => void`	—	Called when selection changes
`name`	`string`	auto-generated	Shared `name` attribute for all radio inputs
`disabled`	`boolean`	`false`	Disables all items

Item props

Prop	Type	Description
`value`	`string \| number`	The value this item represents
`disabled`	`boolean`	Disables this specific item

Indicator data attributes

Attribute	Values
`data-state`	`"checked"` / `"unchecked"`
`data-disabled`	Present when disabled