Radio Input

Radio Input is used to allow users to select a single option from a set of mutually exclusive choices.

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

Vanilla Js

<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>

React

     <DdaRadiobutton
            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')"
        ></DdaRadiobutton>

Vue

     <DdaRadiobutton
            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')"
        ></DdaRadiobutton>

Angular

<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>

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 <label> with the corresponding <input> 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.