| Expand | ||||||
|---|---|---|---|---|---|---|
| ||||||
|
Description
| Status | ||||||
|---|---|---|---|---|---|---|
|
Use radio groups when you want the person to select a single option from a short list. Read more
| Expand | ||||
|---|---|---|---|---|
| ||||
For example, choosing a day of the week. Related items:
|
Behaviour
When the radio group is 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.
Content 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, just add a radio button with a None option. Q: do we want to allow it?
- If you can't have a comprehensive list of all possible options, add an Other option.
- Labels should be concise and provide context.
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 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?
Current appearances in our products
| Expand | ||||
|---|---|---|---|---|
| ||||
System management | settings
Interactions | administration | interaction settings
|
...
New LUX design
Link to the designs location in One Drive: UX@Verint - Verint UX-Files/LUX/Design
...
TBD - Open issues
- If you need to have an unselected state, just add a radio button with a None option. Q: do we want to allow it?
- xxxxx
- xxxxx
Deceissiond Made
- xxxxx
- xxxxx
- xxxxx
Next Steps / Tasks
- xxxxx
- xxxxx
- xxxxx
| Html macro | ||
|---|---|---|
| ||
<link rel="stylesheet" href="http://bfs-eng-de-03.kana-test.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="http://bfs-eng-de-03.kana-test.com/bootstrap-4.0.0/dist/js/bootstrap.bundle.js"></script>
<div class="card">
<div class="card-header">Radio Button</div>
<div class="card-body">
<form>
<div class="form-group row">
<label for="inputKey" class="col-lg-3 col-form-label">Regular</label>
<div class="col-lg-9">
<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>
<div class="form-group row">
<label for="inputKey" class="col-lg-3 col-form-label">Disabled</label>
<div class="col-lg-9">
<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>
<div class="form-group row">
<label for="inputKey" class="col-lg-3 col-form-label">Error</label>
<div class="col-lg-9">
<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>
</form>
</div>
</div> |
...