...
Type | Usage |
|---|---|
Usage & Behaviour
...
Use radio buttons
...
to:
- Select a single option from a list
- Expose all available options
General guidelines
- 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 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 you can't have a comprehensive list of all possible options, add an Other option.
- Labels should be concise and provide context.
...
- 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 pick if your age is 20?
- Forgetting to include choices. e.g. Select age: Below 20, Above 20 - What do you pick if you are exactly 20?
States
<<e.g. active disabled, error, hover, temporary (spinner size), empty etc...>>
Interaction
<<for example, how to change a value – type, arrows, use slider>>
...
...
LUX design
| Html macro | ||
|---|---|---|
| ||
<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>
|
...