...
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.
Image Modified
Usage & Behavior

A selector is commonly used:
...
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
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 Boxes.
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 26	New Version 27
Changes made by	Asaf Ben-Oved	Asaf Ben-Oved
Saved on	May 05, 2021	Jan 09, 2022
Content Comparison

Versions Compared

Key

Usage & Behavior

States

Interaction

Design

Code
