{
"title": "Radio",
"description": "Single-selection group with full keyboard navigation and roving tabindex.",
"url": "/docs/components/radio",
"since": "0.2.0",
"tags": [
"control",
"form"
],
"platform": "both",
"source": "---\ntitle: Radio\ndescription: Single-selection group with full keyboard navigation and roving tabindex.\nsince: 0.2.0\ntags: [control, form]\nplatform: both\ncategory: controls\n---\n\nimport { BundleSize } from '@/components/bundle-size';\nimport { Preview } from '@/components/preview';\nimport { PropsTable } from '@/components/props-table';\n\n\n\n## At a glance\n\n- `` owns the selected value (controlled via `value` + `onChange`, or uncontrolled via `defaultValue`).\n- `` declares a single option — it must be rendered inside a `` or you'll get a runtime error explaining why.\n- Keyboard nav follows the WAI-ARIA radiogroup pattern: arrow keys move between options (selection follows focus), `Home` / `End` jump to first / last, wrap-around at the edges.\n- Roving tabindex: tabbing into the group lands on the selected option; only one option participates in the tab order at a time.\n\n## Preview\n\n\n\n## `` `value` and `defaultValue`\n\nControlled vs. uncontrolled selection. The Group fires `onChange(next)`\nwhenever the user moves through the options.\n\n```tsx\n// Controlled\nconst [plan, setPlan] = useState<'free' | 'pro' | 'team'>('free');\n\n \n \n \n\n\n// Uncontrolled\n{/* … */}\n```\n\n## `` `disabled`\n\nDisables every option in the group. Individual options can also opt\nout with their own `disabled`.\n\n```tsx\n{/* … */}\n```\n\n## `` `label`\n\nRenders a clickable label next to the dot. Pressing the label is the\nsame target as pressing the dot. For richer label content (a price\ntag, helper text), pass `children` instead — the children slot\nreplaces the auto-rendered label.\n\n```tsx\n\n\n \n\n```\n\n## `` `disabled`\n\nGreys an individual option out and skips it during arrow-key\nnavigation.\n\n```tsx\n\n```\n\n## Naming the group\n\nAlways name the group via `aria-label`, `aria-labelledby`, or a visible\nheading wrapped in `aria-labelledby`. An un-named radiogroup is hard\nfor assistive tech to announce as a unit.\n\n```tsx\n<>\n Choose a plan\n {/* … */}\n\n```\n\n## Grouped with Field.Group\n\nFor label + description + error around a radio set, use ``:\n\n```tsx\nimport { useState } from 'react';\nimport { Field, Radio } from '@nori-ui/core';\n\nexport const Example = () => {\n const [value, setValue] = useState(null);\n return (\n \n \n \n \n \n \n \n );\n};\n```\n\nSee [Field](/docs/components/field) for the full API.\n\n## Props\n\n### ``\n\n\n\n### ``\n\n\n"
}