RadioButtonGroup
Allows for automatic state management of radio buttons.
name | type | default | description |
|---|---|---|---|
| children | ReactElement<ForwardRefExoticComponent<{ label: ReactNode; name: string | undefined; value: string; defaultValue?: string | undefined; checked?: boolean | undefined; id?: string | undefined; disabled?: boolean | undefined; onChange?: ChangeEventHandler<...> | undefined; tabIndex?: number | undefined; onFocus?: Focus... | ReactElement<ForwardRefExoticComponent<{ label: ReactNode; name: string | undefined; value: string; defaultValue?: string | undefined; checked?: boolean | undefined; id?: string | undefined; disabled?: boolean | undefined; onChange?: ChangeEventHandler<...> | undefined; tabIndex?: number | undefined; onFocus?: Focus... | ReactElement<ForwardRefExoticComponent<{ label: ReactNode; name: string | undefined; value: string; defaultValue?: string | undefined; checked?: boolean | undefined; id?: string | undefined; disabled?: boolean | undefined; onChange?: ChangeEventHandler<...> | undefined; tabIndex?: number | undefined; onFocus?: Focus... | ReactElement<ForwardRefExoticComponent<{ label: ReactNode; name: string | undefined; value: string; defaultValue?: string | undefined; checked?: boolean | undefined; id?: string | undefined; disabled?: boolean | undefined; onChange?: ChangeEventHandler<...> | undefined; tabIndex?: number | undefined; onFocus?: Focus... | ReactElement<ForwardRefExoticComponent<{ label: ReactNode; name: string | undefined; value: string; defaultValue?: string | undefined; checked?: boolean | undefined; id?: string | undefined; disabled?: boolean | undefined; onChange?: ChangeEventHandler<...> | undefined; tabIndex?: number | undefined; onFocus?: Focus... | ReactElement<ForwardRefExoticComponent<{ label: ReactNode; name: string | undefined; value: string; defaultValue?: string | undefined; checked?: boolean | undefined; id?: string | undefined; disabled?: boolean | undefined; onChange?: ChangeEventHandler<...> | undefined; tabIndex?: number | undefined; onFocus?: Focus... | ReactElement<ForwardRefExoticComponent<{ label: ReactNode; name: string | undefined; value: string; defaultValue?: string | undefined; checked?: boolean | undefined; id?: string | undefined; disabled?: boolean | undefined; onChange?: ChangeEventHandler<...> | undefined; tabIndex?: number | undefined; onFocus?: Focus... | ReactElement<ForwardRefExoticComponent<{ label: ReactNode; name: string | undefined; value: string; defaultValue?: string | undefined; checked?: boolean | undefined; id?: string | undefined; disabled?: boolean | undefined; onChange?: ChangeEventHandler<...> | undefined; tabIndex?: number | undefined; onFocus?: Focus... | ReactElement<ForwardRefExoticComponent<{ label: ReactNode; name: string | undefined; value: string; defaultValue?: string | undefined; checked?: boolean | undefined; id?: string | undefined; disabled?: boolean | undefined; onChange?: ChangeEventHandler<...> | undefined; tabIndex?: number | undefined; onFocus?: Focus... | ReactElement<ForwardRefExoticComponent<{ label: ReactNode; name: string | undefined; value: string; defaultValue?: string | undefined; checked?: boolean | undefined; id?: string | undefined; disabled?: boolean | undefined; onChange?: ChangeEventHandler<...> | undefined; tabIndex?: number | undefined; onFocus?: Focus... | ReactElement<ForwardRefExoticComponent<{ label: ReactNode; name: string | undefined; value: string; defaultValue?: string | undefined; checked?: boolean | undefined; id?: string | undefined; disabled?: boolean | undefined; onChange?: ChangeEventHandler<...> | undefined; tabIndex?: number | undefined; onFocus?: Focus... | ReactElement<ForwardRefExoticComponent<{ label: ReactNode; name: string | undefined; value: string; defaultValue?: string | undefined; checked?: boolean | undefined; id?: string | undefined; disabled?: boolean | undefined; onChange?: ChangeEventHandler<...> | undefined; tabIndex?: number | undefined; onFocus?: Focus... | ReactElement<ForwardRefExoticComponent<{ label: ReactNode; name: string | undefined; value: string; defaultValue?: string | undefined; checked?: boolean | undefined; id?: string | undefined; disabled?: boolean | undefined; onChange?: ChangeEventHandler<...> | undefined; tabIndex?: number | undefined; onFocus?: Focus... | ReactElement<ForwardRefExoticComponent<{ label: ReactNode; name: string | undefined; value: string; defaultValue?: string | undefined; checked?: boolean | undefined; id?: string | undefined; disabled?: boolean | undefined; onChange?: ChangeEventHandler<...> | undefined; tabIndex?: number | undefined; onFocus?: Focus... | - | The children of the component that conform to the basic input attributes |
| inline | boolean | false | Display the radio buttons in a row |
| ref | null | string | (instance: HTMLDivElement | null) => void | RefObject<HTMLDivElement> | - | Allows getting a ref to the component instance.
Once the component unmounts, React will set `ref.current` to `null`
(or call the ref with `null` if you passed a callback ref).
@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs} |
| value | string | - | The value for the radio group |
| onChange | ChangeEventHandler<HTMLInputElement> | - | The handler for the change event. |
| onBlur | FocusEventHandler<HTMLInputElement> | - | The handler for the blur event. |