Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Lead:  << Yehiel Elad-Certner >> << Select the status -  

Status
colourYellow
titleongoing
    >>

Table of Contents

Description

<< Short description of the component and when it is used >>

<< Most communicative screenshot of the component >>

Basic Flow

<< Relevant only for patterns that have a more complex flow than the typical control (e.g. drag & drop) >> 

Types 

<< Relevant only if the component has several distinct types (e.g. editable tables, nested tables). In this case each type should be described in a sub-page >>

<<If you are using this section Usage & Behaviour should be used only for the Common functionalities in the page>>

...

Type

...

Usage

...

Image

...

<< Link to the relevant page >>

...

<< Link to the relevant page >>

Usage & Behaviour

<< Use a visual for each sub-section >>

General guidelines

<< Describes the component, use sub-section when they are relevant to the components >>

<< In case of a complex component duplicate this section, describing each sub-component separately >>

Structure

<<A description of the structure of the component, including areas, sub-components etc.>>

Placement and Positioning

<<For example, in popups and toast messages>>

Default State

<<When there is more than one state for a control or area. Including default values>>

Content

<<Including labels, microcopy, number of items, order of items etc.>>

Internal Logic

<<For example, controls dependencies in a form>>

States

<<e.g. active disabled, error, hover, temporary (spinner size), empty etc...>>

...

State

...

Image

...

Comment

...

<<Can be splitter to several if needed e.g. https://kanasoftware.jira.com/wiki/spaces/UserExp/pages/916130232/Primary+Regular+and+emphasised#PrimaryRegularandemphasised-States >>

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

Transitions

<<Used to describe transitions or animations the occurs in any of the interaction stages>>

Best practices

<<e.g. Slider should display a label its on>>

Use:

  • <…>

  • <…>

Don’t use

  • <…>

  • <…>

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 /wiki/spaces/UX/pages/308969693 >>

Screen reader support 

<<Make sure the components support screen reader for content or behaviour where needed - see /wiki/spaces/UX/pages/308248620 >>

Contrast & size compliance

<<Visual designers must comply with the minimal of /wiki/spaces/UX/pages/301498483 for each component>>

Design

...

Zeplin link

...

Screen thumbnail

...

<<Short Zeplin link. You
Use this
Image Removed>>

...

<<Screen with 200 width>>

Code

...

Table of Contents

Description

Selectors display a set of icons or text buttons in a row as a single element. They allow users to choose one or more options out of a predefined range.

...

Usage & Behavior

A selector is commonly used:

  • As an alternative to Drop-down Menu or Radio Buttons.

  • As a switch between different views.

  • As a toggle between two or more content sections within the same panel.

General guidelines

Structure

A selector consists of:

  • A button group of equal options.

  • Individual options presented as either text or an icon.

  • Button width:

    • When using icons, the buttons should be of equal width.

    • When using text, it is recommended that the buttons should be of equal width where possible.

Default State

The default selection is usually the first option in the group.

Content

Button labels need to be as short as possible, and should ideally be only one word.

Alternatively, icons can be used to replace button labels.

States

State

Icon

Text

Comment

Regular

Image AddedImage Added

Hover

Image AddedImage Added

Active

Image AddedImage Added

Selected

Image AddedImage Added

Selected, Hover

image-20240326-053312.pngImage Addedimage-20240326-053403.pngImage Added

Disabled

Image AddedImage Added

Focused

Image AddedImage Added

Focused, Hover

Image AddedImage Added

Focused, Active

Image AddedImage Added

Focused, Disabled

Image AddedImage Added

Interaction

Single Selection

Clicking an unselected option in the group should:

  • change that option to Selected.

  • automatically deselect the previously-selected button, which is then viewed as Regular.

Multiple Selection

  • Clicking an option will select it regardless to other selected items.

  • Clicking the option again deselects it.

  • In this mode the user can deselect all items.

Best practices

Use:

  • when there are only 5 or fewer options.

  • where there’s enough room to fit the options within the UI.

  • when you want to switch between alternative views of the same content.

  • when the options are closely related in context or content.

Don’t use:

  • if there are more than 5 option → use a Drop-down Menu or Radio Buttons.

  • if there is limited room to fit the options within the UI → use a Drop-down Menu.

  • if the options aren't closely related in context or content → use a collection of Buttons (toolbar).

General

Try to avoid using a selector for only two options.

Accessibility Compliance

Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.

Focus management

  • Single selection works in the same way as a group of Radio Buttons.

  • Multi-selection works in the same way as a group of Checkboxes.

Responsive design

Verint products should support all devices down to the common tablet size (960px width). For general guidelines, see Fundamentals - Responsive design.

  • Where a selector exceeds the container width, the width of each button may be reduced. All buttons should remain an equal size.

  • The buttons may not wrap onto multiple rows.

  • Where button labels no longer fit, one of the following may happen. The labels can be either:

    • truncated with an ellipsis, with the full label shown in a tooltip on hover, or

    • replaced with icons.

Design

Zeplin link

Screen thumbnail

https://zpl.io/V4AZnjN

Image Added

https://zpl.io/2Eyk8XD

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">Selector Icon Single Select <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="btn-group btn-group-sm btn-group-toggle" data-toggle="buttons">
							  <label class="btn btn-outline-light btn-sm active">
							    <input type="radio" name="options" id="option1" autocomplete="off" checked>
							    <i class="icon-package"></i>
							  </label>
							  <label class="btn btn-outline-light btn-sm">
							    <input type="radio" name="options" id="option2" autocomplete="off">
							    <i class="icon-format"></i>
							  </label>
							  <label class="btn btn-outline-light btn-sm">
							    <input type="radio" name="options" id="option3" autocomplete="off">
							    <i class="icon-print"></i>
							  </label>
							  <label class="btn btn-outline-light btn-sm">
							    <input type="radio" name="options" id="option4" autocomplete="off">
							    <i class="icon-settings"></i>
							  </label>
							</div>
						</div>
						<div class="col-lg-6">
							<pre class="language-html"><code><script type="prism-html-markup"><div class="btn-group btn-group-sm btn-group-toggle" data-toggle="buttons">
	<label class="btn btn-outline-light btn-sm active">
		<input type="radio" name="options" id="option1" autocomplete="off" checked>
		<i class="icon-package"></i>
	</label>
	<label class="btn btn-outline-light btn-sm">
		<input type="radio" name="options" id="option2" autocomplete="off">
		<i class="icon-format"></i>
	</label>
	<label class="btn btn-outline-light btn-sm">
		<input type="radio" name="options" id="option3" autocomplete="off">
		<i class="icon-print"></i>
	</label>
	<label class="btn btn-outline-light btn-sm">
		<input type="radio" name="options" id="option4" autocomplete="off">
		<i class="icon-settings"></i>
	</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="btn-group btn-group-sm btn-group-toggle" data-toggle="buttons">
							  <label class="btn btn-outline-light btn-sm disabled">
							    <input type="radio" name="options2" id="option5" autocomplete="off" disabled checked>
							    <i class="icon-package"></i>
							  </label>
							  <label class="btn btn-outline-light btn-sm disabled">
							    <input type="radio" name="options2" id="option6" autocomplete="off" disabled>
							    <i class="icon-format"></i>
							  </label>
							  <label class="btn btn-outline-light btn-sm disabled">
							    <input type="radio" name="options2" id="option7" autocomplete="off" disabled>
							    <i class="icon-print"></i>
							  </label>
							  <label class="btn btn-outline-light btn-sm disabled">
							    <input type="radio" name="options2" id="option8" autocomplete="off" disabled>
							    <i class="icon-settings"></i>
							  </label>
							</div>
						</div>
						<div class="col-lg-6">
							<pre class="language-html"><code><script type="prism-html-markup"><div class="btn-group btn-group-sm btn-group-toggle" data-toggle="buttons">
	<label class="btn btn-outline-light btn-sm disabled">
		<input type="radio" name="options" id="option1" autocomplete="off" checked>
		<i class="icon-package"></i>
	</label>
	<label class="btn btn-outline-light btn-sm disabled">
		<input type="radio" name="options" id="option2" autocomplete="off">
		<i class="icon-format"></i>
	</label>
	<label class="btn btn-outline-light btn-sm disabled">
		<input type="radio" name="options" id="option3" autocomplete="off">
		<i class="icon-print"></i>
	</label>
	<label class="btn btn-outline-light btn-sm disabled">
		<input type="radio" name="options" id="option4" autocomplete="off">
		<i class="icon-settings"></i>
	</label>
</div></script></code></pre>
						</div>
					</div>
				</form>
			</div>
		</div>
		<div class="card">
			<div class="card-header">Selector Icon Multiple Select</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="btn-group btn-group-sm">
							  <button type="button" class="btn btn-outline-light btn-sm" data-toggle="button" aria-pressed="false" autocomplete="off">
							    <i class="icon-package"></i>
							  </button>
							  <button type="button" class="btn btn-outline-light btn-sm" data-toggle="button" aria-pressed="false" autocomplete="off">
							    <i class="icon-format"></i>
							  </button>
							  <button type="button" class="btn btn-outline-light btn-sm" data-toggle="button" aria-pressed="false" autocomplete="off">
							    <i class="icon-print"></i>
							  </button>
							  <button type="button" class="btn btn-outline-light btn-sm" data-toggle="button" aria-pressed="false" autocomplete="off">
							    <i class="icon-settings"></i>
							  </button>
							</div>
						</div>
						<div class="col-lg-6">
							<pre class="language-html"><code><script type="prism-html-markup"><div class="btn-group btn-group-sm">
	<button type="button" class="btn btn-outline-light btn-sm" data-toggle="button" aria-pressed="false" autocomplete="off">
		<i class="icon-package"></i>
	</button>
	<button type="button" class="btn btn-outline-light btn-sm" data-toggle="button" aria-pressed="false" autocomplete="off">
		<i class="icon-format"></i>
	</button>
	<button type="button" class="btn btn-outline-light btn-sm" data-toggle="button" aria-pressed="false" autocomplete="off">
		<i class="icon-print"></i>
	</button>
	<button type="button" class="btn btn-outline-light btn-sm" data-toggle="button" aria-pressed="false" autocomplete="off">
		<i class="icon-settings"></i>
	</button>
</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="btn-group btn-group-sm">
							  <button type="button" class="btn btn-outline-light btn-sm" data-toggle="button" aria-pressed="false" autocomplete="off" disabled>
							    <i class="icon-package"></i>
							  </button>
							  <button type="button" class="btn btn-outline-light btn-sm" data-toggle="button" aria-pressed="false" autocomplete="off" disabled>
							    <i class="icon-format"></i>
							  </button>
							  <button type="button" class="btn btn-outline-light btn-sm" data-toggle="button" aria-pressed="false" autocomplete="off" disabled>
							    <i class="icon-print"></i>
							  </button>
							  <button type="button" class="btn btn-outline-light btn-sm" data-toggle="button" aria-pressed="false" autocomplete="off" disabled>
							    <i class="icon-settings"></i>
							  </button>
							</div>
						</div>
						<div class="col-lg-6">
							<pre class="language-html"><code><script type="prism-html-markup"><div class="btn-group btn-group-sm">
	<button type="button" class="btn btn-outline-light btn-sm" data-toggle="button" aria-pressed="false" autocomplete="off" disabled>
		<i class="icon-package"></i>
	</button>
	<button type="button" class="btn btn-outline-light btn-sm" data-toggle="button" aria-pressed="false" autocomplete="off" disabled>
		<i class="icon-format"></i>
	</button>
	<button type="button" class="btn btn-outline-light btn-sm" data-toggle="button" aria-pressed="false" autocomplete="off" disabled>
		<i class="icon-print"></i>
	</button>
	<button type="button" class="btn btn-outline-light btn-sm" data-toggle="button" aria-pressed="false" autocomplete="off" disabled>
		<i class="icon-settings"></i>
	</button>
</div></script></code></pre>
						</div>
					</div>
				</form>
			</div>
		</div>
		<div class="card">
			<div class="card-header">Selector Single Select</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="btn-group btn-group-sm btn-group-toggle" data-toggle="buttons">
							  <label class="btn btn-outline-light btn-sm btn-fixed-width active">
							    <input type="radio" name="options" id="option1" autocomplete="off" checked> Item 1
							  </label>
							  <label class="btn btn-outline-light btn-sm btn-fixed-width">
							    <input type="radio" name="options" id="option2" autocomplete="off"> Item 2
							  </label>
							  <label class="btn btn-outline-light btn-sm btn-fixed-width">
							    <input type="radio" name="options" id="option3" autocomplete="off"> Item 3
							  </label>
							  <label class="btn btn-outline-light btn-sm btn-fixed-width">
							    <input type="radio" name="options" id="option4" autocomplete="off"> Item 4
							  </label>
							</div>
						</div>
						<div class="col-lg-6">
							<pre class="language-html"><code><script type="prism-html-markup"><div class="btn-group btn-group-sm btn-group-toggle" data-toggle="buttons">
	<label class="btn btn-outline-light btn-sm btn-fixed-width active">
		<input type="radio" name="options" id="option1" autocomplete="off" checked> Item 1
	</label>
	<label class="btn btn-outline-light btn-sm btn-fixed-width">
		<input type="radio" name="options" id="option2" autocomplete="off"> Item 2
	</label>
	<label class="btn btn-outline-light btn-sm btn-fixed-width">
		<input type="radio" name="options" id="option3" autocomplete="off"> Item 3
	</label>
	<label class="btn btn-outline-light btn-sm btn-fixed-width">
		<input type="radio" name="options" id="option4" autocomplete="off"> Item 4
	</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="btn-group btn-group-sm btn-group-toggle" data-toggle="buttons">
							  <label class="btn btn-outline-light btn-sm btn-fixed-width disabled">
							    <input type="radio" name="options2" id="option5" autocomplete="off" disabled checked> Item 1
							  </label>
							  <label class="btn btn-outline-light btn-sm btn-fixed-width disabled">
							    <input type="radio" name="options2" id="option6" autocomplete="off" disabled> Item 2
							  </label>
							  <label class="btn btn-outline-light btn-sm btn-fixed-width disabled">
							    <input type="radio" name="options2" id="option7" autocomplete="off" disabled> Item 3
							  </label>
							  <label class="btn btn-outline-light btn-sm btn-fixed-width disabled">
							    <input type="radio" name="options2" id="option8" autocomplete="off" disabled> Item 4
							  </label>
							</div>
						</div>
						<div class="col-lg-6">
							<pre class="language-html"><code><script type="prism-html-markup"><div class="btn-group btn-group-sm btn-group-toggle" data-toggle="buttons">
	<label class="btn btn-outline-light btn-sm btn-fixed-width disabled">
		<input type="radio" name="options" id="option1" autocomplete="off" checked> Item 1
	</label>
	<label class="btn btn-outline-light btn-sm btn-fixed-width disabled">
		<input type="radio" name="options" id="option2" autocomplete="off"> Item 2
	</label>
	<label class="btn btn-outline-light btn-sm btn-fixed-width disabled">
		<input type="radio" name="options" id="option3" autocomplete="off"> Item 3
	</label>
	<label class="btn btn-outline-light btn-sm btn-fixed-width disabled">
		<input type="radio" name="options" id="option4" autocomplete="off"> Item 4
	</label>
</div></script></code></pre>
						</div>
					</div>
				</form>
			</div>
		</div>
		<div class="card">
			<div class="card-header">Selector Multiple Select</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="btn-group btn-group-sm">
							  <button type="button" class="btn btn-outline-light btn-sm btn-fixed-width" data-toggle="button" aria-pressed="false" autocomplete="off">
							    Item 1
							  </button>
							  <button type="button" class="btn btn-outline-light btn-sm btn-fixed-width" data-toggle="button" aria-pressed="false" autocomplete="off">
							    Item 2
							  </button>
							  <button type="button" class="btn btn-outline-light btn-sm btn-fixed-width" data-toggle="button" aria-pressed="false" autocomplete="off">
							    Item 3
							  </button>
							  <button type="button" class="btn btn-outline-light btn-sm btn-fixed-width" data-toggle="button" aria-pressed="false" autocomplete="off">
							    Item 4
							  </button>
							</div>
						</div>
						<div class="col-lg-6">
							<pre class="language-html"><code><script type="prism-html-markup"><div class="btn-group btn-group-sm">
	<button type="button" class="btn btn-outline-light btn-sm btn-fixed-width" data-toggle="button" aria-pressed="false" autocomplete="off">
		Item 1
	</button>
	<button type="button" class="btn btn-outline-light btn-sm btn-fixed-width" data-toggle="button" aria-pressed="false" autocomplete="off">
		Item 2
	</button>
	<button type="button" class="btn btn-outline-light btn-sm btn-fixed-width" data-toggle="button" aria-pressed="false" autocomplete="off">
		Item 3
	</button>
	<button type="button" class="btn btn-outline-light btn-sm btn-fixed-width" data-toggle="button" aria-pressed="false" autocomplete="off">
		Item 4
	</button>
</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="btn-group btn-group-sm">
							  <button type="button" class="btn btn-outline-light btn-sm btn-fixed-width" data-toggle="button" aria-pressed="false" autocomplete="off" disabled>
							    Item 1
							  </button>
							  <button type="button" class="btn btn-outline-light btn-sm btn-fixed-width" data-toggle="button" aria-pressed="false" autocomplete="off" disabled>
							    Item 2
							  </button>
							  <button type="button" class="btn btn-outline-light btn-sm btn-fixed-width" data-toggle="button" aria-pressed="false" autocomplete="off" disabled>
							    Item 3
							  </button>
							  <button type="button" class="btn btn-outline-light btn-sm btn-fixed-width" data-toggle="button" aria-pressed="false" autocomplete="off" disabled>
							    Item 4
							  </button>
							</div>
						</div>
						<div class="col-lg-6">
							<pre class="language-html"><code><script type="prism-html-markup"><div class="btn-group btn-group-sm">
	<button type="button" class="btn btn-outline-light btn-sm btn-fixed-width" data-toggle="button" aria-pressed="false" autocomplete="off" disabled>
		Item 1
	</button>
	<button type="button" class="btn btn-outline-light btn-sm btn-fixed-width" data-toggle="button" aria-pressed="false" autocomplete="off" disabled>
		Item 2
	</button>
	<button type="button" class="btn btn-outline-light btn-sm btn-fixed-width" data-toggle="button" aria-pressed="false" autocomplete="off" disabled>
		Item 3
	</button>
	<button type="button" class="btn btn-outline-light btn-sm btn-fixed-width" data-toggle="button" aria-pressed="false" autocomplete="off" disabled>
		Item 4
	</button>
</div></script></code></pre>
						</div>
					</div>
				</form>
			</div>
		</div>