Radio represents one option inside RadioGroup. Give each option a distinct value and a visible label. The group owns the selected value.
Labeled options
size prop accepts sm or md and defaults to sm. Use the same size for options in a group.
Keyboard and selection
Tab enters or leaves the group. Arrow keys move between enabled options and select the focused option. Space selects the focused radio. Selection and change handlers belong onRadioGroup; see its controlled example.
Radio is generic over the value type. Keep that type consistent with its group. Native attributes such as aria-describedby can associate an option with additional help text.
Props
The reference is generated from the public component types. Native attributes, including accessible names and event handlers, are also accepted on parts that render elements.string | ((state: RadioRootState) => string | undefined)
CSS class applied to the element, or a function that
returns a class based on the component’s state.
boolean
Whether the component should ignore user interaction.
Ref<HTMLInputElement>
A ref to access the hidden input element.
boolean
default:"false"
Whether the component renders a native
<button> element when replacing it
via the render prop.
Set to true if the rendered element is a native button.boolean
Whether the user should be unable to select the radio button.
ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, RadioRootState>
Allows you to replace the component’s HTML element
with a different tag, or compose it with another component.Accepts a
ReactElement or a function that returns the element to render.boolean
Whether the user must choose a value before submitting a form.
"sm" | "md"
default:"sm"
Visual size of the radio.
CSSProperties | ((state: RadioRootState) => CSSProperties | undefined)
Style applied to the element, or a function that
returns a style object based on the component’s state.
TValue
required
The unique identifying value of the radio in a group.