# r-radio-group Groups `r-radio-button` elements under a shared label with keyboard navigation, validation. Example ``` Basic Standard Premium ``` ## class: `RRadioGroup`, `r-radio-group` ### Fields | Name | Privacy | Type | Default | Description | Inherited From | | --------------------- | ------- | --------------------------- | ------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | | `autofocus` | | `boolean` | `false` | When set to `true`, automatically focuses the first enabled radio button in the group on mount.
This will focus the selected radio button if one exists, or the first enabled radio button otherwise. | | | `customErrorMessage` | | `string` | | Set custom message for `customError` property of a ValidityState object indicating whether the element's custom validity message has been set to a non-empty string by calling the element's setCustomValidity() method. | | | `disabled` | | `boolean` | `false` | Specifies if the entire radio group is disabled | | | `error` | | `string` | | Custom validation error message | | | `fieldIndicator` | | `string` | | Define the marker text if the field label is marked
Field indicator can be Required*, Optional or a translation of those two options. | | | `form` | | `string` | | Specifies the `id` of the `

` to which the element belongs | | | `hint` | | `string` | | Optional hint, visually presented under the group of radio-buttons
giving additional context to the user | | | `invalid` | | `boolean` | | Apply validation error visual style | | | `label` | | `string` | | The text of the label rendered before the set of radio-buttons | | | `name` | | `string` | | Specifies common `name` property that is passed to each `r-radio-button` | | | `novalidate` | | `boolean` | | Specifies if element must be ignored during validation of the form elements | | | `parentValue` | | `string` | | For nested radio groups: specifies the parent radio button value that this nested group belongs to.
When the parent group's value changes to a different value, this nested group will be automatically reset.
This ensures nested selections are only maintained when their parent context is active. | | | `required` | | `boolean` | | Specifies if radio-button within group must be checked | | | `valid` | | `boolean` | | Apply validation success visual style | | | `value` | | `string` | | Displays currently selected value | | | `valueMissingMessage` | | `string` | | Set custom message for `valueMissing` property of a ValidityState object (set by `required`) within Constrain Validation API | | | `variant` | | `"contained" \| "standard"` | `'standard'` | Controls the style variation of the radio buttons. | | ### Methods | Name | Privacy | Description | Parameters | Return | Inherited From | | ------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------- | ------------------ | -------------- | | `checkValidity` | | Validates the radio group without triggering UI and returns a boolean indicating its validity. | | `Promise` | | | `clearValue` | | Clears the value of the radio group and deselects all radio buttons.
This method sets the value to null and deselects all radio buttons in the group. | | `Promise` | | | `getValue` | | Gets the current value of the radio group. | | `Promise` | | | `reportValidity` | | Validates the radio group and displays the validity state. | | `Promise` | | | `reset` | | Resets the radio group to its initial state.

This method:
\- clears the validity state and message,
\- sets the value and validity to initial values,
\- if no initial value the radio group will be deselected,
\- restores the tabindex on the first element. | | `Promise` | | | `resetValidity` | | Resets the validity state and message of the radio group.
This method clears the validity message and state, and sets the invalid
property to its initial value. | | `Promise` | | | `setBlur` | | Blurs the radio button element. | | `Promise` | | | `setCustomValidity` | | Sets a custom validity message for the radio group.
If the message is not empty, the radio group will be considered invalid. | `message: string` | `Promise` | | | `setFocus` | | Sets focus on the radio button element. | | `Promise` | | | `setValue` | | Sets the value of the radio group to the specified value.
If a radio button with the specified value exists, it will be selected. | `value: string` | `Promise` | | ### Events | Name | Type | Description | Inherited From | | ----------- | --------------------------------------------------------------- | ---------------------------------------------------------------------- | -------------- | | `rChange` | `CustomEvent<{ element: HTMLRRadioGroupElement; value: any; }>` | Emits `rChange` when component's value has been changed | | | `rReset` | `CustomEvent<{ element: HTMLRRadioGroupElement; value: any; }>` | Emits `rReset` when component was reset to initial state by form reset | | | `rValidate` | `CustomEvent<{ state: string; message: string; }>` | Emits event after each validation | | ### Attributes | Name | Field | Inherited From | | ----------------------- | ------------------- | -------------- | | `autofocus` | autofocus | | | `custom-error-message` | customErrorMessage | | | `disabled` | disabled | | | `error` | error | | | `field-indicator` | fieldIndicator | | | `form` | form | | | `hint` | hint | | | `invalid` | invalid | | | `label` | label | | | `name` | name | | | `novalidate` | novalidate | | | `parent-value` | parentValue | | | `required` | required | | | `valid` | valid | | | `value` | value | | | `value-missing-message` | valueMissingMessage | | | `variant` | variant | | ### Slots | Name | Description | | --------- | --------------------------------------------------------------- | | | Radio button items (`r-radio-button` elements) inside the group | | `popover` | Popover element attached to the group label |

---

## Exports | Kind | Name | Declaration | Module | Package | | --------------------------- | --------------- | ----------- | ------ | ------- | | `js` | `RRadioGroup` | RRadioGroup | | | | `custom-element-definition` | `r-radio-group` | RRadioGroup | | |