# Radio Buttons Groups ## Overview

## 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" %}

<ul>
    <li>
        <dda-radiobutton
            title_text="Radio Button Title"
            checked="false"
            size="md"
            variants="normal"
            supporting="Supporting Text"
            group_name="radiogroup"
            input_id="testId"
            custom_class=""
            component_mode=""
            aria_label="radio-button"
            onclick="console.log('clicked')"
        ></dda-radiobutton>
    </li>
    <li>
        <dda-radiobutton
            title_text="Radio Button Title"
            checked="false"
            size="md"
            variants="normal"
            supporting="Supporting Text"
            group_name="radiogroup"
            input_id="testId"
            custom_class=""
            component_mode=""
            aria_label="radio-button"
            onclick="console.log('clicked')"
        ></dda-radiobutton>
    </li>
</ul>

{% endtab %} {% tab title="React" %} ```jsx

``` {% endtab %} {% tab title="Vue" %} ```jsx

``` {% endtab %} {% tab title="Angular" %} ```jsx

``` {% endtab %} {% endtabs %} ### Properties | Property | Description | Type | | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------- | | `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` | | `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` | | `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 `` with the corresponding `` element for accessibility and form functionality. | `string` | | `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` | | `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` | | `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` | | `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` | | `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` | ## Anatomy

### 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. | --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://designsystem.dubai.ae/components/radio-buttons/radio-buttons-groups.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.