Expand

title	Expand for table of Content
order	update

Table of Contents

outline	true
style	square

Description

...

Table of Contents

Description

Radio buttons are used when a list of two or more options are mutually exclusive, meaning the user must select only one option.

...

Usage & Behavior

Use radio buttons to select a single option from a list, while exposing all available options.

General guidelines

Only one option

...

<<Types>>

<<use this section only if the component has several types that each requires its own page e.g. table, collapsable table>>

<<If you are using this section, then Usage & Behaviour should be used only for the Common functionalities in the page>>

...

Type

...

Usage

Usage & Behaviour

Use radio buttons to:

Select a single option from a list
Expose all available options

...

can be selected in a group of radio buttons.
One option must always be selected.

Structure

A radio button consists of:

A label describing the option
A corresponding radio button

...

States

State	Unselected	Selected
Regular	Image Added	Image Added
Hover	Image Added	Image Added
Active	Image Added	Image Added
Disabled	Image Added	Image Added
Read-Only	Image Added	Image Added
Focused	Image Added	Image Added
Focused Hover	Image Added	Image Added
Focused Active	Image Added	Image Added
Focused Disabled	Image Added	Image Added

Interaction

The user clicks a radio button to select the related option. This deselects the previously-selected option.
Clicking an option which is already selected does not deselect it, but clicking a different option transfers the selection to that option.
The radio can be selected by clicking on either the button or the label.
The radio will have a hover state when hovering over either the button or the label.
The radio will have an active state during the action of clicking either the button or the label.

Validations and errors

Please refer to Field Validation page for more information.

...

Best practices

Use:

to select a single option from a list, while exposing all available options

Do not Use:

where there is a need to allow the user to make multiple selections → use Checkboxes, because radio buttons only allow single-selection.
where there is a need to present more than 8 options → use a Drop-down Menu.
where the default option is recommended for most users in most situations. Consider a Drop-down Menu instead, which uses less space by not immediately showing all options.
where there are only two mutually exclusive options. Combine them into a single Checkbox or Switch. For example, use a checkbox for “I agree” (e.g. to terms and conditions) instead of two radio buttons for “I agree” and “I don’t agree”.
where the options are numbers with fixed steps → use a Slider.

General

List options in a logical order:
- Most likely to least likely to be selected.
- Simplest to most complex operation.
- Least to most risk.
Make one
Make the most likely or convenient radio button option the default.
Select the safest, most secure, and private options first. If safety and security aren’t factors, select the most likely or convenient option.If you need to have an unselected state, add a radio button with a None option
If no default exists, or unselected state is required, include a None option.
If you can't have a comprehensive list of all possible options,
add
include an

additional Other
option
option.
Labels should be concise and provide context.

Try to avoid:

Putting
putting things in alphabetical order, because it is language dependent and not localizable.
Overlapping
overlapping choices
.
, e.g.

Select age: 0-20, 20-40
-
. What do you
pick
select if your age is 20?
Forgetting
forgetting to include choices. e.g. Select age: Below 20, Above 20 - What do you
pick
select if you are exactly 20?

States

Image Removed

Interaction

<<for example, how to change a value – type, arrows, use slider>>

<<use Click target to describe the interaction>>

Validations and errors

<<used for specific components e.g. slider>>

Best practices

<<e.g. Slider should display a .label its on>>

Accessibility compliance

<<In general each component should be A11y complied, please follow the 3 guidelines linked below. At the very least we should document that each component is in compliance with each of the 3>>

Focus management

<<How will the component work with keyboard only - without a mouse. Can be reference if written above

We already set a general guidelines described in Keyboard & Focus Management Guidelines >>

Screen reader support

<<Make sure the components support screen reader for content or behaviour where needed - see Screen Reader Guidelines >>

Contrast & size compliance

...

Accessibility compliance

Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.

Focus management

Keyboard	Description
Tab	Navigates to the next component.
Shift + Tab	Navigates to the previous component.
Space	N/A
Enter	N/A
Esc	N/A
Arrows	Up/Left - Navigates to and selects the previous item. Down/Right - Navigates to and selects the next item.

A group of radio buttons behaves like a single control. Only the selected choice is accessible using the tab key, but users can then cycle through the individual options using the arrow keys.

Design

Zeplin link	Screen thumbnail
https://zpl.io/VxP6OWV

Image Removed

Image Added

...

Code

Html macro

sanitize	false

<link rel="stylesheet" href="https://ux.verint.com/bootstrap-4.0.0/dist/fonts/css/verint_lux.css">
<link rel="stylesheet" href="https://ux.verint.com/bootstrap-4.0.0/dist/css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ux.verint.com/bootstrap-4.0.0/dist/js/bootstrap.bundle.js"></script>
<script src="https://ux.verint.com/bootstrap-4.0.0/dist/other/accessibility.js"></script>
<script src="https://ux.verint.com/bootstrap-4.0.0/dist/other/prism.min.js"></script>
<link rel="stylesheet" href="https://ux.verint.com/bootstrap-4.0.0/dist/other/prism-coy.min.css">

<div class="card">
			<div class="card-header">Radio Button <button id="toggleMarkup" type="button" class="btn btn-sm btn-outline-primary btn btn-fixed-width float-right m-0" onclick="$('pre' ).toggle()">Toggle Markup</button></div>
			<div class="card-body">
				<form>
					<div class="form-group row">
						<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Regular</label>
						<div class="col-lg-4">
							<div class="custom-control custom-radio custom-control-inline">
								<input type="radio" id="customRadioInline1" name="customRadioInlineA" class="custom-control-input"> <label class="custom-control-label" for="customRadioInline1"></label>
							</div>
							<div class="custom-control custom-radio custom-control-inline">
								<input type="radio" id="customRadioInline2" name="customRadioInlineA" class="custom-control-input" checked> <label class="custom-control-label" for="customRadioInline2"></label>
							</div>
						</div>
						<div class="col-lg-6">
							<pre class="language-html"><code><script type="prism-html-markup"><div class="custom-control custom-radio custom-control-inline">
	<input type="radio" id="customRadioInline1" name="customRadioInlineA" class="custom-control-input">
	<label class="custom-control-label" for="customRadioInline1"></label>
</div>
<div class="custom-control custom-radio custom-control-inline">
	<input type="radio" id="customRadioInline2" name="customRadioInlineA" class="custom-control-input" checked>
	<label class="custom-control-label" for="customRadioInline2"></label>
</div></script></code></pre>
						</div>
					</div>
					<div class="form-group row">
						<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Disabled</label>
						<div class="col-lg-4">
							<div class="custom-control custom-radio custom-control-inline">
								<input type="radio" id="customRadioInline3" name="customRadioInlineB" class="custom-control-input" disabled> <label class="custom-control-label" for="customRadioInline3"></label>
							</div>
							<div class="custom-control custom-radio custom-control-inline">
								<input type="radio" id="customRadioInline4" name="customRadioInlineB" class="custom-control-input" disabled checked> <label class="custom-control-label" for="customRadioInline4"></label>
							</div>
						</div>
						<div class="col-lg-6">
							<pre class="language-html"><code><script type="prism-html-markup"><div class="custom-control custom-radio custom-control-inline">
	<input type="radio" id="customRadioInline3" name="customRadioInlineB" class="custom-control-input" disabled>
	<label class="custom-control-label" for="customRadioInline3"></label>
</div>
<div class="custom-control custom-radio custom-control-inline">
	<input type="radio" id="customRadioInline4" name="customRadioInlineB" class="custom-control-input" disabled checked>
	<label class="custom-control-label" for="customRadioInline4"></label>
</div></script></code></pre>
						</div>
					</div>
					<div class="form-group row">
						<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Error</label>
						<div class="col-lg-4">
							<div class="custom-control custom-radio custom-control-inline">
								<input type="radio" id="customRadioInline5" name="customRadioInlineC" class="custom-control-input is-invalid"> <label class="custom-control-label" for="customRadioInline5"></label>
							</div>
							<div class="custom-control custom-radio custom-control-inline">
								<input type="radio" id="customRadioInline6" name="customRadioInlineC" class="custom-control-input is-invalid" checked> <label class="custom-control-label" for="customRadioInline6"></label>
							</div>
						</div>
						<div class="col-lg-6">
							<pre class="language-html"><code><script type="prism-html-markup"><div class="custom-control custom-radio custom-control-inline">
	<input type="radio" id="customRadioInline5" name="customRadioInlineC" class="custom-control-input is-invalid">
	<label class="custom-control-label" for="customRadioInline5"></label>
</div>
<div class="custom-control custom-radio custom-control-inline">
	<input type="radio" id="customRadioInline6" name="customRadioInlineC" class="custom-control-input is-invalid" checked>
	<label class="custom-control-label" for="customRadioInline6"></label>
</div></script></code></pre>
						</div>
					</div>
				</form>
			</div>
		</div>

Version	Old Version 21	New Version Current
Changes made by	dana lees kunik	Hasitha Jayarathne
Saved on	Aug 25, 2019	Apr 05, 2024

Content Comparison

Versions Compared

Key

Description

Description

Usage & Behavior

General guidelines

<<Types>>

Usage & Behaviour

Structure

States

Interaction

Validations and errors

Best practices

States

Interaction

Validations and errors

Best practices

Accessibility compliance

Focus management

Screen reader support

Contrast & size compliance

Accessibility compliance

Focus management

Design

Code