Versions Compared

Version Old Version 40 New Version Current
Changes made by

dana lees kunik

Hasitha Jayarathne

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Table of Contents

Description

Status
colourYellow
titleOngoing

...

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

The radio button allows 2 modes:

...

Checked

...

Unchecked

For each if the modes, you can find the different states below:

...

State

Unselected

Selected

Regular

Image AddedImage Added

Hover

Image AddedImage Added

Active

Image AddedImage Added

Disabled

Image AddedImage Added

Read-Only

Radio Button.pngImage AddedRadio Button - Selected.pngImage Added

Focused

Image AddedImage Added

Focused Hover

Image AddedImage Added

Focused Active

Image AddedImage Added

Focused Disabled

Image AddedImage 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.

A user can select only one option from a group of radio buttons.

...

  • 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 validationValidation page for more information.

...

Best practices

...

Use:

  • 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, add a radio button with a None option.

...

If you can't have a comprehensive list of all possible options, add an Other option.

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

Do not use a radio button if:

  • You need to offer the user the option of multiple selection. In this case, use checkboxes instead because radio buttons are for single-selection contexts only.

  • You 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 dropdown menu→ use a Drop-down Menu.

  • The where the default option is recommended for most users in most situations. In this case, consider a dropdown list insteadConsider a Drop-down Menu instead, which uses less space by not immediately showing all options straightaway.

  • In special cases, where there are only two mutually exclusive options. Combine them into a single checkboxCheckbox or toggle switchSwitch. For example, use a checkbox for “I agree” (for example, e.g. to terms and conditions) instead of two radio buttons for “I agree” and “I don’t agree”.

  • The where the options are numbers with fixed steps . Use a slider→ use a Slider.

General

  • 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 no default exists, or unselected state is required, include a None option.

  • If you can't have a comprehensive list of all possible options, include an additional Other option.

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?

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 group individual options using the arrow keys.

Design

Zeplin link

Screen thumbnail

https://zpl.io/VxP6OWV

Image Removed

Current appearances in our products

Forecasting and Scheduling → Tactical Forecasts → Forecast:

...

LUX design 

Image Added

Code

Html macro
sanitizefalse
<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>