Radio

The Radio component is a common input element that allows users to select a single option from a set. It provides a list of mutually exclusive choices where only one option can be selected at a time.

Introduction

The radio component allows users to select a single option from a set of choices. This documentation provides guidance on implementation best practices and accessibility considerations for creating intuitive and inclusive radio button interactions.

Visual representation

The following is a visual representation of the radio button in use along with its code usage.

<div class="flex space-x-8">
	<div class="aegov-check-item">
		<input checked id="option_01" type="radio" name="options" value="">
		<label for="option_01">Option #1</label>
	</div>
	<div class="aegov-check-item">
		<input id="option_02" type="radio" name="options" value="">
		<label for="option_02">Option #2</label>
	</div>
</div>

Code structure

The ` .aegov-check-item ` class is placed on the wrapper element encompassing the radio.

<div class="aegov-check-item">
	<input id="option" type="radio" name="option" value="">
	<label for="option">... Text ...</label>
</div>

Pro Tip:

Always add the <label> tag for best accessibility practices, thereby improving the user experience. By adding the label and linking it to the radio element, clicking the label activates the radio element.

Variations

Variations are different versions of this component that you may use within your website. The choice of what variation is useful should be based on the user experience study and layout design applied to the page of your website.

With additional description

A radio element with additional description provides accompanying helper text for improved clarity and informed decision-making.

<div class="space-y-6">
	<div class="aegov-check-group">
		<input id="plan01" aria-describedby="plan01-description" name="plan" type="radio">
		<div>
			<label for="plan01">Starter plan</label>
			<p id="plan01-description">The basic usage plan, starting at $9.99 per month</p>
		</div>
	</div>
	<div class="aegov-check-group">
		<input id="plan02" aria-describedby="plan02-description" name="plan" type="radio">
		<div>
			<label for="plan02">Professional plan</label>
			<p id="plan02-description">For teams and organization, starting at $29.99 per month</p>
		</div>
	</div>
	<div class="aegov-check-group">
		<input id="plan03" aria-describedby="plan03-description" name="plan" type="radio">
		<div>
			<label for="plan03">Enterprise plan</label>
			<p id="plan03-description">For large organisation with SAML support, starting at $99.99 per month</p>
		</div>
	</div>
</div>

As a list element

Use this variation when you need to present a list of selectable options with radio buttons for user interaction in a vertical selection with the selection element to the right.

<div class="divide-y divide-aeblack-100 sm:w-80">
	<div class="aegov-check-group group-list">
		<label for="card-1" id="card-1-description">Visa - XXXX XXXX XXXX 3456</label>
		<input id="card-1" aria-describedby="card-1-description" name="card" type="radio">
	</div>
	<div class="aegov-check-group group-list">
		<label for="card-2" id="card-2-description">Visa - XXXX XXXX XXXX 1345</label>
		<input id="card-2" aria-describedby="card-2-description" name="card" type="radio">
	</div>
	<div class="aegov-check-group group-list">
		<label for="card-3" id="card-3-description">Mastercard - XXXX XXXX XXXX 4453</label>
		<input id="card-3" aria-describedby="card-3-description" name="card" type="radio">
	</div>
</div>

Size variations

The radio sizes variation provides three size. These classes allow customization of the label font size and radio dimensions to suit specific design requirements.

Class	Properties
`.check-sm`	`height: 1rem; width: 1rem` `/* 16px /font-size: 0.85rem` `/ 14px */`
`.check-base`	`height: 1.25rem; width: 1.25rem` `/* 20px /font-size: 1rem` `/ 14px */`
`.check-lg`	`height: 1.5rem; width: 1.5rem` `/* 24px /font-size: 1.125rem` `/ 18px */`

<div class="space-y-6">
	<div class="aegov-check-item check-lg">
		<input type="radio" aria-describedby="opt-description_01" name="opt" id="opt_01">
		<label for="opt_01" id="opt-description_01">Option #1</label>
	</div>
	<div class="aegov-check-item">
		<input type="radio" aria-describedby="opt-description_02" name="opt" id="opt_02">
		<label for="opt_02" id="opt-description_02">Option #2</label>
	</div>
	<div class="aegov-check-item check-sm">
		<input type="radio" aria-describedby="opt-description_03" name="opt" id="opt_03">
		<label for="opt_03" id="opt-description_03">Option #3</label>
	</div>
</div>

Use of secondary colour

All form elements in the UAE Design System support the use of secondary colour.

Here is an example of the radio in the secondary colour. by default, the " aeblack " colour is the default secondary colour used. Refer to the Colour system guideline for more information on default colours used.

<div class="aegov-check-item check-secondary">
	<input checked id="secondary-radio"  type="radio" value="">
	<label for="secondary-radio">Secondary radio</label>
</div>

Behaviour

The behavior of a radio button component revolves around user interaction, primarily through clicks or taps.

When a user interacts with a radio button, it allows them to select a single option from a set of choices. The radio button component operates on a mutually exclusive selection principle, where only one option can be selected at a time. Clicking or tapping on a radio button updates its state to checked, while other options in the set automatically become unchecked. This interactive behavior ensures that users can make a single selection from a list of options.

State

By default, the ` hover ` and ` focus ` state of a radio has been defined. It is triggered when a user interacts with the element. The ` disabled ` status is set via scripting.

Disabled state

By adding a ` disabled ` attribute to a radio, you will essentially tell the browser that the radio is unusable. Disabled state for a radio would render it visually lighter. Add the ` aria-disabled="true" ` attribute to radio which is disabled as well as an added measure for assistive technologies.

Disabled radio

Disabled checked radio

Accessibility

Keyboard interactions are incorporated for accessibility, where 'Tab' to interacts with a radio, and 'Spacebar Key' key toggles the radio between the checked and unchecked states. This allows users to select or deselect the radio using the keyboard.

ARIA attributes and supporting attributes must also be added to radio components. The following ARIA and supporting attributes will apply.

` aria-checked="false" `
If you have added a label and named it accurately with the for attribute, the ` aria-labelledby="" ` attribute is not necessary. However, if you use the Radio with Additional Description variation, you must add the ARIA attribute corresponding the the ID of the paragraph.

Responsive element

This component can be resized based on breakpoint prefixes.

You can always control the responsive nature of a component by adding the screen size attribute and changing the size of an element per screen size. Read more about Responsive Design and how to use breakpoint prefix for classes on TailwindCSS.com

Hence, this component's size variations can be combined with breakpoint prefixes to control the size of the component on various screensizes.

By applying the ` check-sm `, the ` md:check-base ` and ` 2xl:check-lg ` classes, the radio dimensions adjust to different screen sizes, ensuring optimal visibility and usability.

RTL support

This component is supported and configured to work for RTL layouts. Refer to the layout guideline to understand how to enabled RTL for websites.

The following is an example of this component with text in Arabic.

الخيار 1

الخيار 2

All components that are part of the UAE Design System support RTL and have been designed to work for languages that require RTL layout.

The typography guidelines will also provide further information on use of the font stack for the Arabic language.

Usage

radio's can be an essential form element and very useful in many use cases where you may want the user to select single option from a set.

Where to use a radio?

Radio buttons are commonly used in forms when you want users to select a single option from a list of choices. For example, when asking a user to specify their gender.
Similar to checkboxes, radio buttons can be used in web applications or services to allow users to select a single option from a group of mutually exclusive choices. For instance, when setting a default language preference, users can choose from options like "English," "Spanish," or "French."
Radio buttons can be used for rating or feedback purposes. For example, in a customer satisfaction survey, users can rate their experience using radio buttons with options like "Very Satisfied," "Satisfied," "Neutral," "Dissatisfied," and "Very Dissatisfied."
Radio buttons can be employed in navigation menus or search filters when users need to choose a single category or filter option to refine their search results.
Radio buttons can be used to obtain explicit consent or agreement from users, similar to checkboxes. For instance, when users are required to agree to specific terms and conditions before proceeding with an action.