...
Radio buttons are used when a list of two or more options are mutually exclusive, meaning the user must select 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
When the radio buttons are focused on, it is possible to change selection with the arrow keys. If it is disabled, the cursor will indicate that the selection cannot be made.
...
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>>
<<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
<<Visual designers must comply with the minimal of Contrast + Font Size Guidelines for each component>>
Design
Zeplin link | Screen thumbnail |
|---|---|
| <<Zeplin Link>> | <<Screen with 200 width>> |
...
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>
|
...