# Radio One choice in a `RadioGroup`, with its label to its right. Pass the choices as the group's `options` unless you need a layout they cannot express, such as a choice with a rich description; then render `Radio` children. ```tsx import { Radio } from "@/components/ouro/radio-group/radio-group"; ``` ## Example ```tsx ``` ## Use instead when - Use `Checkbox` inside a `CheckboxGroup` instead when several choices may be picked. ## Props Type: `RadioProps`. | Prop | Type | Description | | --- | --- | --- | | `className` | `string` | Layout only: margins, width, grid placement. Appearance classes warn in development. | | `description` | `ReactNode` | Supporting text under the label, read after it through `aria-describedby`. | | `disabled` | `boolean` | Disables this one radio; the arrow keys skip it. | | `hideLabel` | `boolean` | Hides the label visually; screen readers still read it as the radio's name. | | `label` (required) | `string` | The choice's name, shown to the right of the radio. Required: every control needs a name. | | `ref` | `Ref` | The radio element, a ``. | | `value` (required) | `string` | What the group submits when this radio is picked, and the group's `value` then. | ## Don't use These are not props. Passing one fails the type check with the fix in the error, and in development a console message names the fix. - `checked`: Not a prop. The group's `value` picks the radio: ``. - `name`: Not a prop. The group's `name` applies to every radio: ``. ## `className` is for layout only Pass margins, width and grid placement (`mt-4`, `w-full`, `col-span-2`). Appearance comes from props, not classes. In development, a class that sets appearance logs one warning per component instance, naming the prop to use instead. A class sets appearance when, after its variants (`hover:`, `sm:`) and any `!` are removed, it starts with `bg-`, `text-`, `border-`, `rounded-`, `shadow-`, `font-`, `ring-`, `from-`, `via-`, `to-`, `fill-` or `stroke-`, or is `border`, `rounded`, `shadow` or `ring`, or has a `dark:` variant. Text wrapping, overflow and table layout classes (`text-wrap`, `text-ellipsis`, `border-collapse`) are layout and do not warn. Alignment classes (`text-center`) warn too: set alignment on a parent element.