| Table of Contents |
|---|
...
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.
...
| Html macro | ||
|---|---|---|
| ||
<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>
|
...