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>[]`
`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.
`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.
`validationState`	`ValidationState`	Whether the input should display its "valid" or "invalid" visual styling.
`isReadOnly`	`boolean`	Whether the input can be selected but not changed by the user.
`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.
`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.

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

'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.