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:

...

A button group of equal options.
Individual options presented as either text or an icon.
Button width:
- When using icons,
the options
- the buttons should be of equal width.
- When using text, it is recommended that the buttons should be of equal width
and prominence
- where possible.

Default State

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

...

Alternatively, icons can be used to replace button labels.

States

State	Icon	Text
Regular	Image Modified	Image Modified
Hover	Image Modified	Image Modified
Active	Image Modified	Image Modified
Selected	Image Modified	Image Modified
Selected, Hover	Image Added	Image Added
Disabled	Image Modified	Image Modified
Focused	Image Modified	Image Modified
Focused, Hover	Image Modified	Image Modified
Focused, Active	Image Modified	Image Modified
Focused, Disabled	Image Modified	Image Modified

Interaction

Single Selection

...

Single selection works in the same way as a group of Radio Buttons.
Multi-selection works in the same way as a group of Check Boxesof 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 Modified
https://zpl.io/2Eyk8XD	Image Modified

Code

Html macro

sanitize	false

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

Version	Old Version 27	New Version Current
Changes made by	Asaf Ben-Oved	Rajesh Venkatesh
Saved on	Jan 09, 2022	Mar 26, 2024

Content Comparison

Versions Compared

Key