A group of radio buttons for selecting one option from a set.
import { RadioGroup } from '@oztix/roadie-components/radio-group'
Wrap RadioGroup in Field for consistent layout, labels, and error handling.
RadioGroup also has its own RadioGroup.Label for standalone usage without a
Field wrapper.
Use the emphasis prop on the Root to control the visual weight of all items.
md is the default. Use sm in dense lists, such as a filter sidebar, and
lg where the choice is the main thing on the screen. Set it on the Root. With
emphasis='normal', it sizes the circle only.
trailing puts a count, Badge, or value at the end of an item. It isn't
part of the radio's name, so screen readers announce the label alone.
Arrow Up/Arrow Down moves between radio items. Space selects the focused item. Base UI manages roving tabindex.role="radiogroup" on the root and role="radio" with aria-checked on each item automatically. An invalid group, from invalid or its Field, sets aria-invalid on the radiogroup.Fieldset with a Legend to provide a group label for screen readers.Whether the component should ignore user interaction.
Defaults to false.
Whether the user should be unable to select a different radio button in the group.
Defaults to false.
Whether the user must choose a value before submitting a form.
Defaults to false.
Identifies the field when a form is submitted.
Identifies the form that owns the radio inputs. Useful when the radio group is rendered outside the form.
The controlled value of the radio item that should be currently selected. To render an uncontrolled radio group, use the `defaultValue` prop instead.
The uncontrolled value of the radio button that should be initially selected. To render a controlled radio group, use the `value` prop instead.
Callback fired when the value changes.
A ref to access the hidden input element.
CSS class applied to the element, or a function that returns a class based on the component's state.
Sets every item's size.
Defaults to 'md'.
No additional props. It forwards all standard HTML attributes to the underlying element.
No additional props. It forwards all standard HTML attributes to the underlying element.
CSS class applied to the element, or a function that returns a class based on the component's state.
Names the radio. The whole row becomes the click target.
A line of help under the label, read as the radio's description.
End of the row: a count, `Badge`, or value. Left out of the accessible name.
Inherited from RadioRootProps
The unique identifying value of the radio in a group.
Whether the component should ignore user interaction.
Whether the user must choose a value before submitting a form.
Whether the user should be unable to select the radio button.
A ref to access the hidden input element.
Inherited from NonNativeButtonProps
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.
Defaults to false.