Lead: Yehiel Elad-Certner -
Status
colour	Yellow
title	ongoing
Table of Contents
Description

...
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 17	New Version 18
Changes made by	Femi	Femi
Saved on	Jul 29, 2020	Jul 30, 2020
Content Comparison

Versions Compared

Key

Description
