Ouro HX

Forms

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.

import { Radio } from "@/components/ouro/radio-group/radio-group";

Example

<RadioGroup legend="Size" name="size">
  <Radio value="small" label="Small" description="Serves 2." />
  <Radio value="large" label="Large" description="Serves 6." />
</RadioGroup>

Use instead when

  • Use Checkbox inside a CheckboxGroup instead when several choices may be picked.

Props

Type: RadioProps.

className
Type: string
Layout only: margins, width, grid placement. Appearance classes warn in development.
description
Type: ReactNode
Supporting text under the label, read after it through aria-describedby.
disabled
Type: boolean
Disables this one radio; the arrow keys skip it.
hideLabel
Type: boolean
Hides the label visually; screen readers still read it as the radio's name.
label (required)
Type: string
The choice's name, shown to the right of the radio. Required: every control needs a name.
ref
Type: Ref<HTMLElement>
The radio element, a <span role="radio">.
value (required)
Type: 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: <RadioGroup value="small">.
  • name: Not a prop. The group's name applies to every radio: <RadioGroup name="size">.

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.

Source on GitHubThis page as Markdown