useRadioGroup

Provides the behavior and accessibility implementation for a radio group component. Radio groups allow users to select a single item from a list of mutually exclusive options.

Favorite pet

Dogs

Cats

Example

RadioGroup.tsx

RadioGroup.css

Example

RadioGroup.tsx

RadioGroup.css

import {RadioGroup, Radio} from './RadioGroup';

<RadioGroup label="Favorite pet">
  <Radio value="dogs">Dogs</Radio>
  <Radio value="cats">Cats</Radio>
</RadioGroup>

API

<RadioGroup>
  <Label />
  <RadioField>
    <RadioButton>
      <SelectionIndicator />
    </RadioButton>
    <Text slot="description" />
  </RadioField>
  <Text slot="description" />
  <FieldError />
</RadioGroup>

useRadioGroupState(props: RadioGroupProps): RadioGroupStateuseRadioGroup(props: AriaRadioGroupProps, state: RadioGroupState): RadioGroupAria

useRadio(
  props: AriaRadioProps,
state: RadioGroupState,
ref: RefObject<HTMLInputElement | null>
): RadioAria

RadioGroupState

Properties

Name	Type
`isDisabled`	`boolean`
Whether the radio group is disabled.
`isReadOnly`	`boolean`
Whether the radio group is read only.
`selectedValue`	`string \| null`
The currently selected value.
`defaultSelectedValue`	`string \| null`
The default selected value.
`lastFocusedValue`	`string \| null`
The value of the last focused radio.
`realtimeValidation`	`ValidationResult`
Realtime validation results, updated as the user edits the value.
`displayValidation`	`ValidationResult`
Currently displayed validation results, updated when the user commits their changes.

Methods

`setSelectedValue(value: string \| null): void`
Sets the selected value.
`setLastFocusedValue(value: string \| null): void`
Sets the last focused value.
`updateValidation(result: ValidationResult): void`
Updates the current validation result. Not displayed to the user until `commitValidation` is called.
`resetValidation(): void`
Resets the displayed validation state to valid when the user resets the form.
`commitValidation(): void`
Commits the realtime validation so it is displayed to the user.

AriaRadioGroupProps

Name	Type	Default
`orientation`	`Orientation`	Default: `'vertical'`
The axis the Radio Button(s) should align with.
`isDisabled`	`boolean`	Default: —
Whether the input is disabled.
`isReadOnly`	`boolean`	Default: —
Whether the input can be selected but not changed by the user.

`value`	`string \| null`	Default: —
The current value (controlled).
`defaultValue`	`string \| null`	Default: —
The default value (uncontrolled).
`onChange`	`(value: string) => void`	Default: —
Handler that is called when the value changes.

RadioGroupAria

Name	Type
`radioGroupProps`	`DOMAttributes`
Props for the radio group wrapper element.
`labelProps`	`DOMAttributes`
Props for the radio group's visible label (if any).
`descriptionProps`	`DOMAttributes`
Props for the radio group description element, if any.
`errorMessageProps`	`DOMAttributes`
Props for the radio group error message element, if any.
`validationDetails`	`ValidityState`
The native validation details for the input.

AriaRadioProps

Name	Type
`children`	`ReactNode`
The label for the Radio. Accepts any renderable node.
`isDisabled`	`boolean`
Whether the radio button is disabled or not. Shows that a selection exists, but is not available in that circumstance.

RadioAria

Name	Type
`labelProps`	`LabelHTMLAttributes<HTMLLabelElement>`
Props for the label wrapper element.
`inputProps`	`InputHTMLAttributes<HTMLInputElement>`
Props for the input element.
`descriptionProps`	`<HTMLElement>`
Props for the checkbox description element, if any.
`isDisabled`	`boolean`
Whether the radio is disabled.
`isSelected`	`boolean`
Whether the radio is currently selected.
`isPressed`	`boolean`
Whether the radio is in a pressed state.