useRadioGroupState

Provides state management for a radio group component. Provides a name for the group, and manages selection and focus state.

install	`yarn add react-stately`
version	3.17.0
usage	`import {useRadioGroupState} from 'react-stately'`

API#

useRadioGroupState(
  (props: RadioGroupProps
)): RadioGroupState

Name	Type	Description
`isDisabled`	`boolean`	Whether the radio group is disabled.
`isReadOnly`	`boolean`	Whether the radio group is read only.
`selectedValue`	`string \| null`	The currently selected value.
`lastFocusedValue`	`string \| null`	The value of the last focused radio.
`validationState`	`ValidationState`	The current validation state of the radio group.

Method	Description
`setSelectedValue( (value: string )): void`	Sets the selected value.
`setLastFocusedValue( (value: string )): void`	Sets the last focused value.

See the docs for useRadioGroup in react-aria for an example of useRadioGroupState.

Name	Type	Default	Description
`orientation`	`Orientation`	`'vertical'`	The axis the Radio Button(s) should align with.
`name`	`string`	—	The name of the RadioGroup, used when submitting an HTML form. See MDN.
`value`	`string`	—	The current value (controlled).
`defaultValue`	`string`	—	The default value (uncontrolled).
`onChange`	`( (value: T )) => void`	—	Handler that is called when the value changes.
`isDisabled`	`boolean`	—	Whether the input is disabled.
`isReadOnly`	`boolean`	—	Whether the input can be selected but not changed by the user.
`validationState`	`ValidationState`	—	Whether the input should display its "valid" or "invalid" visual styling.
`isRequired`	`boolean`	—	Whether user input is required on the input before form submission. Often paired with the `necessityIndicator` prop to add a visual indicator to the input.
`label`	`ReactNode`	—	The content to display as the label.
`description`	`ReactNode`	—	A description for the field. Provides a hint such as specific requirements for what to choose.
`errorMessage`	`ReactNode`	—	An error message for the field.