Description

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

Verint LUX Design System > Radio Button > Radio sample.png

Usage & Behavior

Use radio buttons to:

Select a single option from a list
Expose all available options

General guidelines

Structure

A radio button consists of:

A label describing the option
A corresponding radio button

Verint LUX Design System > Radio Button > Radio sample Copy.png

States

The radio button has 2 modes:

	Checked (Selected)
	Unchecked (Unselected)

For each of these modes, the different states below can apply:

State	Unselected	Selected
Regular
Hover
Active
Disabled
Focused
Focused Hover
Focused Active
Focused Disabled

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.
Only one option can be selected in a group of radio buttons.
One option must always be selected.
A group of radio buttons behaves like a single control: using ‘tab’ focuses on the group container, and users can then cycle through the individual options using the arrow keys.
The radio can be selected by clicking on either the button or the label.
The radio will have a hovered 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.

Verint LUX Design System > Radio Button > Radio sample Copy 2.png

Best practices

List options in a logical order:
- Most likely to least likely to be selected.
- Simplest to most complex operation.
Make the most likely or convenient radio button option the default.
If you need to have an unselected state, include a None option.
If you can't have a comprehensive list of all possible options, include an Other option.

Use a radio button when the options being presented are important enough to occupy all of the necessary screen space.

Do not use a radio button if:

You need to allow the user to make multiple selections → use Checkboxes, because radio buttons only allow single-selection.
You need to present more than 8 options → use a Drop Down menu.
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.
There are only two mutually exclusive options. Combine them into a single Checkbox or Toggle 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”.
The options are numbers with fixed steps → use a Slider.

Try to avoid:

Putting things in alphabetical order, because it is language dependent and not localizable.
Overlapping choices, e.g. Select age: 0-20, 20-40. What do you select if your age is 20?
Forgetting to include choices. e.g. Select age: Below 20, Above 20 - What do you select if you are exactly 20?

Accessibility compliance

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

LUX design

<link rel="stylesheet" href="https://ux.verint.com/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>