# Radio Input

## Overview

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2F4ay3C1HF3ZHcahJICOOo%2FRadio%20Button%20-%20Overview.png?alt=media&#x26;token=e49825bb-6199-4652-8b1f-7533f1bbf432" alt=""><figcaption></figcaption></figure>

## Usage

### When to use this component?

Radio inputs are used when a user needs to select a single option from a list. They are ideal for scenarios where only one choice is allowed, such as in forms, surveys, and settings where users must choose one option among several.

### How it works

Radio inputs are presented in groups, with each input representing a unique option. Users can select one input from the group, and choosing a new option will automatically deselect any previously selected option within that group. Each radio input includes a visible circle, a label, and may feature additional elements like subtitles or trailing icons for added context.

### Code

{% tabs %}
{% tab title="Vanilla Js" %}

```jsx
<dda-radiobutton
    title_text="Radio Button Title"
    size="default"
    variants="normal"
    supporting="Supporting Text"
    error_message="Error text"
    validation_id="validationId"
    group_name="radiogroup"
    input_id="testId1"
    aria_label="radio-button"
    validation_type="normal"
    radio_status="normal"
    custom_class=""
    component_mode=""
></dda-radiobutton>
```

{% endtab %}

{% tab title="React" %}

```jsx
<DdaRadiobutton
    title_text="Radio Button Title"
    size="default"
    variants="normal"
    supporting="Supporting Text"
    error_message="Error text"
    validation_id="validationId"
    group_name="radiogroup"
    input_id="testId1"
    aria_label="radio-button"
    validation_type="normal"
    radio_status="normal"
    custom_class=""
    component_mode=""
></DdaRadiobutton>
```

{% endtab %}

{% tab title="Vue" %}

```jsx
<DdaRadiobutton
    title_text="Radio Button Title"
    size="default"
    variants="normal"
    supporting="Supporting Text"
    error_message="Error text"
    validation_id="validationId"
    group_name="radiogroup"
    input_id="testId1"
    aria_label="radio-button"
    validation_type="normal"
    radio_status="normal"
    custom_class=""
    component_mode=""
></DdaRadiobutton>
```

{% endtab %}

{% tab title="Angular" %}

```jsx
<dda-radiobutton
    title_text="Radio Button Title"
    size="default"
    variants="normal"
    supporting="Supporting Text"
    error_message="Error text"
    validation_id="validationId"
    group_name="radiogroup"
    input_id="testId1"
    aria_label="radio-button"
    validation_type="normal"
    radio_status="normal"
    custom_class=""
    component_mode=""
></dda-radiobutton>
```

{% endtab %}
{% endtabs %}

### Properties

| Property         | Description                                                                                                                                                                                                   | Type      |
| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- |
| `title_text`     | The main label text that will appear next to the radio button. This is a required prop that provides a title for the radio button option.                                                                     | `string`  |
| `size`           | The size of the radio button. Possible values can be 'sm', 'md', or 'lg', where 'sm' is small, 'md' is medium, and 'lg' is large. This prop adjusts the size of the radio button.                             | `string`  |
| `variants`       | The variant of the radio button. Similar to size, it can be used to define different visual appearances, such as different shapes, borders, or colors.                                                        | `string`  |
| `supporting`     | Additional supporting text that can be displayed alongside the title. This prop is optional and is used for any extra information or description related to the radio button option.                          | `string`  |
| `error_message`  | Additional supporting text that can be displayed when an error occurs. This prop is optional and is used to provide users with helpful feedback or guidance when their input is invalid or incomplete.        | `string`  |
| `validation_id`  | Defines a unique identifier for the helper or error message element. This `id` can be referenced by form fields using `aria-describedby` or similar attributes to associate the supporting text with an input |           |
| `group_name`     | The name of the radio button group. This is used to group multiple radio buttons together, allowing only one selection within the group.                                                                      | `string`  |
| `input_id`       | The ID for the input element (radio button). This prop is used to associate the `<label>` with the corresponding `<input>` element for accessibility and form functionality.                                  | `string`  |
| `aria_label`     | The aria-label for the radio button input. This is used for accessibility purposes, allowing screen readers to describe the radio button when it does not have a visible label.                               | `string`  |
| validation\_type |                                                                                                                                                                                                               |           |
| `radio_status`   | The status of the radio button, such as "disabled" or other custom states. This prop can be used to apply different styles or behavior depending on the radio button's status.                                | `string`  |
| `checked`        | Indicates whether the radio button is selected or not. This prop controls the checked state of the radio button.                                                                                              | `boolean` |
| `component_mode` | A mode for the radio button component, which can be used to define specific functionality or appearance based on different modes (e.g., "edit", "view", etc.).                                                | `string`  |
| `custom_class`   | A custom CSS class that will be added to the radio button container. This allows for additional customization and styling beyond the default styles.                                                          | `string`  |

## Anatomy

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2F6JwOC8T7ZzaVxxdmePC6%2FRadio%20Button%20-%20Anatomy.png?alt=media&#x26;token=eead76fc-f75e-44b1-b892-0f6a5d566de6" alt=""><figcaption></figcaption></figure>

### Anatomy Options

**Radio Button Icon**: Represents the selectable option within the radio button group. When selected, it indicates the chosen option.

**Radio Button Label**: The main title or descriptor of the radio button option, providing a summary of what the option represents.

**Supporting Text**: Additional text that provides context or information related to the radio button option, helping users understand its purpose.

**Subtitle**: A more detailed description or supplementary information associated with the radio button option.

## Dos and Don'ts

| Dos                                                                        | Don'ts                                                                                    |
| -------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------- |
| Use radio inputs when the user needs to select only one option from a set. | Don't use radio inputs for multiple selections; use checkboxes for that purpose.          |
| Label each radio input clearly to indicate the option it represents.       | Avoid using ambiguous or unclear labels for radio inputs.                                 |
| Group related radio inputs together visually and logically.                | Don't scatter related radio inputs throughout different parts of the UI.                  |
| Ensure radio inputs are large enough to be easily tappable or clickable.   | Avoid making radio inputs too small to interact with comfortably.                         |
| Use consistent spacing between radio inputs in the same group.             | Don't place radio inputs too close together or too far apart, which can hinder usability. |
| Provide a clear visual indication of the selected state.                   | Don't leave users guessing which option is currently selected.                            |
| Include appropriate aria-labels for accessibility.                         | Don't neglect accessibility requirements such as focus states and keyboard navigation.    |
| Ensure each radio input has sufficient contrast against its background.    | Avoid using low contrast that can make the radio inputs difficult to see.                 |