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/radio`
version	3.0.0-rc.2
usage	`import {useRadioGroupState} from '@react-stately/radio'`

API#

useRadioGroupState(
  (props: RadioGroupProps
)): RadioGroupState

Name	Type	Description
`name`	`string`	The name for the group, used for native form submission.
`selectedValue`	`string \| undefined`	The currently selected value.
`setSelectedValue`	`( (value: string )) => void`	Sets the selected value.
`focusableRadio`	`string \| undefined`	The last focused radio.
`setFocusableRadio`	`( (value: string )) => void`	Sets the last focused radio.

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

Name	Type	Description
`children`	`ReactElement<RadioProps> \| ReactElement<RadioProps>[]`
`orientation`	`Orientation`	The axis the Radio Button(s) should align with.
`name`	`string`
`value`	`string`	The current value (controlled).
`defaultValue`	`string`	The default value (uncontrolled).
`onChange`	`( (value: string )) => 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.

Name	Type	Description
`value`	`string`
`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.
`autoFocus`	`boolean`	Whether the element should receive focus on render
`onFocus`	`( (e: FocusEvent )) => void`	Handler that is called when the element receives focus.
`onBlur`	`( (e: FocusEvent )) => void`	Handler that is called when the element loses focus.
`onFocusChange`	`( (isFocused: boolean )) => void`	Handler that is called when the element's focus status changes.
`onKeyDown`	`( (e: KeyboardEvent )) => void`	Handler that is called when a key is pressed.
`onKeyUp`	`( (e: KeyboardEvent )) => void`	Handler that is called when a key is released.

BaseEvent<ReactKeyboardEvent<any>>

T & {stopPropagation: (
  (
)) => void,
continuePropagation: (
  (
)) => void
}

'horizontal' | 'vertical'

'valid' | 'invalid'

Name	Type	Description
`name`	`string`	The name for the group, used for native form submission.
`selectedValue`	`string \| undefined`	The currently selected value.
`setSelectedValue`	`( (value: string )) => void`	Sets the selected value.
`focusableRadio`	`string \| undefined`	The last focused radio.
`setFocusableRadio`	`( (value: string )) => void`	Sets the last focused radio.