Checkbox

The checkbox component is a widely used input element that allows users to select one or more options from a set. It provides a familiar and intuitive interface for capturing user preferences, performing multiple selections, or toggling specific settings.

Introduction

The checkbox component allows users to select one or more options. This documentation provides guidance on implementation best practices and accessibility considerations for creating intuitive and inclusive checkbox interactions as part of the UAE Design Language System.

Visual representation

The following element is a visual representation of the checkbox component which would ideally be used within a form element.

<div class="aegov-check-item">
	<input id="checkbox1" type="checkbox" value="1">
	<label for="checkbox1">I would prefer option 1</label>
</div>
<div class="aegov-check-item">
	<input id="checkbox2" type="checkbox" value="2">
	<label for="checkbox2">I would prefer option 2</label>
</div>
<div class="aegov-check-item">
	<input id="checkbox3" type="checkbox" value="3">
	<label for="checkbox3">I would prefer option 3</label>
</div>

Code structure

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


<div class="aegov-check-item">
	<input id="checkbox1" type="checkbox" value=" ... value ...">
	<label for="checkbox1">... label ...</label>
</div>

A pro tip for checkboxes

Always make sure you add the <label> and the ` for="" ` attribute that corresponds to the ID of the checkbox field. This is required to maintain accessibility practices and also provides a better user experience.

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.

Inline with link

You may need to add a single checkbox element that may need a link element along with it. To include an anchor link within the label of the checkbox component, use the following example as a reference for implementation.

<div class="aegov-check-item">
	<input id="link-checkbox" type="checkbox" value="0">
	<label for="link-checkbox">I agree with the <a href="#"> terms and conditions.</a> </label>
</div>

With additional description

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

This is visually appealing, provides more context to the element and is encouraged by the UAE design system when the options provided needs more explaination.

<div class="space-y-4">
	<div class="aegov-check-group">
		<input checked id="alert-checkbox" aria-describedby="alert-checkbox-description" name="alert-checkbox" value="1" type="checkbox">
		<div>
			<label for="alert-checkbox">Alerts</label>
			<p id="alert-checkbox-description">Get notified when there is a critical issue.</p>
		</div>
	</div>
	<div class="aegov-check-group">
		<input id="promo-checkbox" aria-describedby="promo-checkbox-description" name="promo-checkbox" value="2" type="checkbox">
		<div>
			<label for="promo-checkbox">Promotions</label>
			<p id="promo-checkbox-description">Get notified when there is an offer.</p>
		</div>
	</div>
	<div class="aegov-check-group">
		<input id="upgrade-checkbox" aria-describedby="upgrade-checkbox-description" name="upgrade-checkbox" value="3" type="checkbox">
		<div>
			<label for="upgrade-checkbox">Upgrades</label>
			<p id="upgrade-checkbox-description">Get notified about critical upgrades to the system.</p>
		</div>
	</div>
</div>

As a list element

The checkbox with list is a very useful element stack of checkboxes when you need the check element to be in line with a large list. It provides a useful experience when the user wants to view a list of options and may need to scroll through a large list.

Use this variation when you need to present a list of selectable options with checkboxes for user interaction. It is most likely to be used in a filter block

Similar to the checkbox user interaction, the label must be present and marking a checkbox as disabled will reduce the opacity on the label as well.

<div class="divide-y divide-aeblack-100">
	<div class="aegov-check-group group-list">
		<label for="person-1" id="person-1-description">Abdullah Al Mehri</label>
		<input id="person-1" aria-describedby="person-1-description" name="person-1" value="1" type="checkbox">
	</div>
	<div class="aegov-check-group group-list">
		<label for="person-2" id="person-2-description">Maryam Al Kamali</label>
		<input id="person-2" aria-describedby="person-2-description" name="person-2" value="2" type="checkbox">
	</div>
	<div class="aegov-check-group group-list">
		<label for="person-3" id="person-3-description">Shehzad Obaid</label>
		<input id="person-3" aria-describedby="person-3-description" name="person-3" value="3" type="checkbox">
	</div>
	<div class="aegov-check-group group-list">
		<label for="person-4" id="person-4-description">Ramakrishnan Iyer</label>
		<input id="person-4" aria-describedby="person-4-description" name="person-4" value="4" type="checkbox">
	</div>
</div>

Size variations

The checkbox sizes variation provides three size. These classes allow customization of the label font size and checkbox 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">
	<!-- example of a large checkbox -->
	<div class="aegov-check-item check-lg">
		<input type="checkbox" id="checkbox-lg" value="">
		<label for="checkbox-lg">Checkbox large</label>
	</div>
	<!-- example of a standard checkbox -->
	<div class="aegov-check-item check-base">
		<input type="checkbox" id="checkbox-base" value="">
		<label for="checkbox-base">Checkbox default</label>
	</div>
	<!-- example of a small checkbox -->
	<div class="aegov-check-item check-sm">
		<input type="checkbox" id="checkbox-sm" value="">
		<label for="checkbox-sm">Checkbox small</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 button element in 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 to be used.

<div class="space-y-4">
	<div class="aegov-check-item check-secondary">
		<input checked id="checkbox1-s" type="checkbox" value="1">
		<label for="checkbox1-s">I would prefer option 1</label>
	</div>
	<div class="aegov-check-item check-secondary">
		<input id="checkbox-s" type="checkbox" value="2">
		<label for="checkbox-s">I would prefer option 2</label>
	</div>
	<div class="aegov-check-item check-secondary">
		<input id="checkbox3-s" type="checkbox" value="3">
		<label for="checkbox3-s">I would prefer option 3</label>
	</div>
</div>

Behaviour

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

When a user interacts with a checkbox, it allows them to select or deselect a specific option independently. The checkbox component operates on a simple toggle principle, where clicking or tapping on the checkbox updates its state between checked and unchecked.

This interactive behavior provides users with the ability to make multiple selections or enable/disable specific settings within a form or interface.

State

By default, the ` hover ` and ` focus ` state of a checkbox 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 checkbox, you will essentially tell the browser that the checkbox is unusable. Disabled state for a checkbox would render it visually lighter. Add the ` aria-disabled="true" ` attribute to checkbox which is disabled as well as an added measure for assistive technologies.

I would prefer option 1

I would prefer option 2

I would prefer option 3

Accessibility

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

ARIA attributes and supporting attributes must also be added to checkbox 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 checkbox 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 checkbox dimensions adjust to different screen sizes, ensuring optimal visibility and usability.

PRO TIP: Drag the visual example to change the width.

Full screen mode

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

أفضّل الخيار 3

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

Checkboxes can be an essential form element and very useful in many use cases where you may want the user to select multiple values.

Where to use a checkbox?

Within a form where multiple choices are required.
In web applications or web services, checkboxes are used for toggling settings or preferences on and off. An example can be options like "Receive email notifications" or "Alert me by SMS".
Alongside statements like "I agree to the terms and conditions" to get explicit consent from users before they proceed with certain actions.
To dynamically affect a list where elements of a filter are checkboxes.
For feedback's and survey as options.