Radio group

A group of radio buttons for selecting one option from a set.

Import

import { RadioGroup } from '@oztix/roadie-components/radio-group'

Examples

Default

<RadioGroup>
  <RadioGroup.Item value='email' label='Email' />
  <RadioGroup.Item value='phone' label='Phone' />
  <RadioGroup.Item value='post' label='Post' />
</RadioGroup>

With Field

Wrap RadioGroup in Field for consistent layout, labels, and error handling.

<Field required>
  <Field.Label showIndicator>Contact method</Field.Label>
  <RadioGroup>
    <RadioGroup.Item value='email' label='Email' />
    <RadioGroup.Item value='phone' label='Phone' />
    <RadioGroup.Item value='post' label='Post' />
  </RadioGroup>
</Field>

With standalone label

RadioGroup also has its own RadioGroup.Label for standalone usage without a Field wrapper.

<RadioGroup required>
  <RadioGroup.Label showIndicator>Contact method</RadioGroup.Label>
  <RadioGroup.Item value='email' label='Email' />
  <RadioGroup.Item value='phone' label='Phone' />
  <RadioGroup.Item value='post' label='Post' />
</RadioGroup>

Variants

Horizontal direction

<RadioGroup direction='horizontal'>
  <RadioGroup.Item value='small' label='Small' />
  <RadioGroup.Item value='medium' label='Medium' />
  <RadioGroup.Item value='large' label='Large' />
</RadioGroup>

Emphasis

Use the emphasis prop on the Root to control the visual weight of all items.

Normal

<RadioGroup emphasis='normal'>
  <RadioGroup.Item value='standard' label='Standard delivery' />
  <RadioGroup.Item value='express' label='Express delivery' />
  <RadioGroup.Item value='overnight' label='Overnight delivery' />
</RadioGroup>

States

<div className='grid gap-4'>
  <div className='grid gap-1'>
    <p className='text-sm text-subtle'>Default</p>
    <RadioGroup>
      <RadioGroup.Item value='a' label='Option A' />
      <RadioGroup.Item value='b' label='Option B' />
    </RadioGroup>
  </div>
  <div className='grid gap-1'>
    <p className='text-sm text-subtle'>Disabled</p>
    <RadioGroup disabled>
      <RadioGroup.Item value='a' label='Option A' />
      <RadioGroup.Item value='b' label='Option B' />
    </RadioGroup>
  </div>
</div>

Accessibility

  • Keyboard: Arrow Up/Arrow Down moves between radio items. Space selects the focused item. Base UI manages roving tabindex.
  • ARIA: Base UI Radio sets role="radiogroup" on the root and role="radio" with aria-checked on each item automatically.
  • Grouping: Wrap in a Fieldset with a Legend to provide a group label for screen readers.

API reference

RadioGroup

Base UI
disabledboolean

Whether the component should ignore user interaction.

Defaults to false.

readOnlyboolean

Whether the user should be unable to select a different radio button in the group.

Defaults to false.

requiredboolean

Whether the user must choose a value before submitting a form.

Defaults to false.

namestring

Identifies the field when a form is submitted.

formstring

Identifies the form that owns the radio inputs. Useful when the radio group is rendered outside the form.

valueany

The controlled value of the radio item that should be currently selected. To render an uncontrolled radio group, use the `defaultValue` prop instead.

defaultValueany

The uncontrolled value of the radio button that should be initially selected. To render a controlled radio group, use the `value` prop instead.

onValueChange((value: any, eventDetails: { reason: "none"; event: Event; cancel: () => void; allowPropagation: () => void; isCanceled: boolean; isPropagationAllowed: boolean; trigger: Element; }) => void)

Callback fired when the value changes.

inputRefRef<HTMLInputElement>

A ref to access the hidden input element.

direction"horizontal" | "vertical" | null
emphasis"subtler" | "normal"
invalidboolean

RadioGroup.ErrorText

No additional props — forwards all standard HTML attributes to the underlying element.

RadioGroup.HelperText

No additional props — forwards all standard HTML attributes to the underlying element.

RadioGroup.Item

Base UI
labelstring
descriptionstring

Inherited from RadioRootProps

valueany
Required

The unique identifying value of the radio in a group.

disabledboolean

Whether the component should ignore user interaction.

requiredboolean

Whether the user must choose a value before submitting a form.

readOnlyboolean

Whether the user should be unable to select the radio button.

inputRefRef<HTMLInputElement>

A ref to access the hidden input element.

Inherited from NonNativeButtonProps

nativeButtonboolean

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.

RadioGroup.Label

showIndicatorboolean
Previous page← LabelNext pageSelect →