<!-- AUTO-GENERATED by packages/components/bin/generate-skill-component-catalog.js. Do not edit by hand. -->

# r-radio-button

A radio button is used to select a single option in a list.

Example
```
<!-- Simple usage -->
<r-radio-button name="plan" value="basic">Basic plan</r-radio-button>

<!-- With title and description -->
<r-radio-button name="plan" value="premium">
  <r-radio-button-title>Premium plan</r-radio-button-title>
  <r-radio-button-description>All features included</r-radio-button-description>
</r-radio-button>
```

## class: `RRadioButton`, `r-radio-button`

### Fields

| Name          | Privacy | Type      | Default              | Description                                                                                                                                                                 | Inherited From |
| ------------- | ------- | --------- | -------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
| `autofocus`   |         | `boolean` | `false`              | Automatically focus the radio button when the component is mounted. Note: Only one element per page should have autofocus set to true, following browser standard behavior. |                |
| `checked`     |         | `boolean` |                      | When true the radio is selected                                                                                                                                             |                |
| `description` |         | `string`  |                      | Additional directions for radio-button                                                                                                                                      |                |
| `disabled`    |         | `boolean` |                      | Prevents user interaction and applies disabled style                                                                                                                        |                |
| `error`       |         | `string`  |                      | Custom validation error message                                                                                                                                             |                |
| `form`        |         | `string`  |                      | Specifies the `id` of the `<form>` to which the element belongs                                                                                                             |                |
| `hint`        |         | `string`  |                      | Optional hint, visually presented under the radio button,<br>giving additional context to the user                                                                         |                |
| `icon`        |         | `string`  |                      | Icon name from the set                                                                                                                                                      |                |
| `invalid`     |         | `boolean` |                      | Apply validation error visual style                                                                                                                                         |                |
| `name`        |         | `string`  |                      | Name of element (data) within a form                                                                                                                                        |                |
| `novalidate`  |         | `boolean` |                      | Specifies if element must be ignored during validation of the form elements                                                                                                 |                |
| `required`    |         | `boolean` |                      | Defines if an element shall be validated                                                                                                                                    |                |
| `value`       |         | `any`     | `this.slotTextValue` | Value of element data within a form                                                                                                                                         |                |

### Methods

| Name         | Privacy | Description                                                 | Parameters | Return          | Inherited From |
| ------------ | ------- | ----------------------------------------------------------- | ---------- | --------------- | -------------- |
| `select`     |         | Selects the radio button element                            |            | `Promise<void>` |                |
| `setBlur`    |         | Blurs the radio button element                              |            | `Promise<void>` |                |
| `setFocus`   |         | Sets focus on the radio button element                      |            | `Promise<void>` |                |
| `uncheckAll` |         | Unchecks all radio buttons in the associated group or form. |            | `Promise<void>` |                |

### Events

| Name                  | Type                                                                               | Description                                                                        | Inherited From |
| --------------------- | ---------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- | -------------- |
| `radioButtonClick`    | `CustomEvent<Event>`                                                               | Emits `radioButtonClick` event on the `<r-radio-button>` on click event            |                |
| `radioButtonDeselect` | `CustomEvent<{ element: HTMLRRadioButtonElement; value: any; checked: boolean; }>` | Emits `radioButtonDeselect` event on the `<r-radio-button>` when on deselect event |                |
| `radioButtonKeydown`  | `CustomEvent<Event>`                                                               | Emits `rChange` event on the `<r-radio-button>` when on keydown event              |                |
| `rChange`             | `CustomEvent<{ element: HTMLRRadioButtonElement; value: any; checked: boolean; }>` | Emits `rChange` event on the `<r-radio-button>` when status changes                |                |
| `rReset`              | `CustomEvent<{ element: HTMLRRadioButtonElement; value: any; checked: boolean; }>` | Emits `rReset` event on the `<r-radio-button>` onReset changes its status          |                |

### Attributes

| Name          | Field       | Inherited From |
| ------------- | ----------- | -------------- |
| `autofocus`   | autofocus   |                |
| `checked`     | checked     |                |
| `description` | description |                |
| `disabled`    | disabled    |                |
| `error`       | error       |                |
| `form`        | form        |                |
| `hint`        | hint        |                |
| `icon`        | icon        |                |
| `invalid`     | invalid     |                |
| `name`        | name        |                |
| `novalidate`  | novalidate  |                |
| `required`    | required    |                |
| `value`       | value       |                |

### Slots

| Name          | Description                                                                  |
| ------------- | ---------------------------------------------------------------------------- |
|               | Default label text (shorthand when `r-radio-button-title` is not used)       |
| `description` | Secondary descriptive text (use `r-radio-button-description`)                |
| `leading`     | Leading visual element (e.g. icon) placed before the control                 |
| `title`       | Primary label text (use `r-radio-button-title`)                              |
| `trailing`    | Trailing element placed after the label area (use `r-radio-button-trailing`) |

<hr/>

## Exports

| Kind                        | Name             | Declaration  | Module | Package |
| --------------------------- | ---------------- | ------------ | ------ | ------- |
| `js`                        | `RRadioButton`   | RRadioButton |        |         |
| `custom-element-definition` | `r-radio-button` | RRadioButton |        |         |