Radio

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

Features

Single-selection radio group.

Full keyboard navigation.

Can be controlled or uncontrolled.

Shared name attribute for native form semantics.

Supports disabled state per item or globally.

Example

Startup

Up to 5 active job postings

12GB6 CPUs160 GB SSD disk

Business

Up to 25 active job postings

16GB8 CPUs512 GB SSD disk

Enterprise

Unlimited active job postings

32GB12 CPUs1024 GB SSD disk

Anatomy


import { Radio } from '@wire-ui/react'
 
<Radio.Root name="plan">
{[
{ value: 'startup', label: 'Startup', description: 'Up to 5 active job postings', ram: '12GB', cpus: '6 CPUs', disk: '160 GB SSD disk' },
{ value: 'business', label: 'Business', description: 'Up to 25 active job postings', ram: '16GB', cpus: '8 CPUs', disk: '512 GB SSD disk' },
{ value: 'enterprise', label: 'Enterprise', description: 'Unlimited active job postings', ram: '32GB', cpus: '12 CPUs', disk: '1024 GB SSD disk' },
].map((plan) => (
<Radio.Item key={plan.value} value={plan.value}>
  <Radio.Indicator />
  <div>
    <Radio.Label>{plan.label}</Radio.Label>
    <p>{plan.description}</p>
  </div>
  <div>
    <span>{plan.ram}</span>
    <span>{plan.cpus}</span>
    <span>{plan.disk}</span>
  </div>
</Radio.Item>
))}
</Radio.Root>

Styling

Radio items expose data-checked and data-disabled. Use the group utility in Tailwind to style child elements based on the parent’s state.


<Radio.Item className="
  group border border-black
  data-[checked]:bg-gray-50
">
  <span className="
    border border-black rounded-full
    group-data-[checked]:bg-black
  ">
    <Radio.Indicator className="size-2 rounded-full bg-white" />
  </span>
  <Radio.Label>Option</Radio.Label>
</Radio.Item>

Using data attributes

Radio.Item sets data-checked when selected and data-disabled when disabled.


/* Selected item */
[data-checked] { background: #f5f5f5; }
 
/* Radio dot */
[data-checked] .dot { background: #000; }
 
/* Disabled */
[data-disabled] { opacity: 0.5; cursor: not-allowed; }

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

Keyboard Interactions

Key	Description
`ArrowDown`	Moves focus and selection to the next radio item.
`ArrowUp`	Moves focus and selection to the previous radio item.
`ArrowRight`	Moves focus and selection to the next radio item.
`ArrowLeft`	Moves focus and selection to the previous radio item.
`Tab`	Moves focus to the selected radio item, or the first item if none is selected.