widget-tutorial/widget-exercises/8f091618-fe18-404a-803c-28ecd1b48465.html

A comprehensive tutorial + recipes to get started with widgets in Qlik Sense.

<style>padding:10px 10px 10px 10px;</style>
<div><h2>Single Buttons:</h2>

<lui-button>Default</lui-button>

<lui-button x-variant="success">Success</lui-button>

<lui-button x-variant="warning">Warning</lui-button>

<lui-button x-variant="error">Error</lui-button>
<hr>

<h2>Button Group</h2>

<div class="lui-buttongroup">
	<button class="lui-button">
		First button
	</button>
	<button class="lui-button">
		Second button
	</button>
	<button class="lui-button">
		Third button
	</button>
</div>

<hr>
<h2>Input</h2>
<input class="lui-input">

<hr>
<h2>Input Group</h2>
<div class="lui-input-group">
	<button class="lui-input-group__item  lui-input-group__button  lui-button">
		<span class="lui-button__icon  lui-icon  lui-icon--expression"></span>
	</button>
	<input class="lui-input-group__item  lui-input-group__input  lui-input">
	<button class="lui-input-group__item  lui-input-group__button  lui-button">
		<span class="lui-button__icon  lui-icon  lui-icon--expression"></span>
	</button>
</div>

<hr>
<h2>Checkbox</h2>
<label class="lui-checkbox">
	<input class="lui-checkbox__input" type="checkbox">
	<div class="lui-checkbox__check-wrap">
		<span class="lui-checkbox__check"></span>
		<span class="lui-checkbox__check-text">Label</span>
	</div>
</label>

<hr>
<h2>Radio Button</h2>
<label class="lui-radiobutton">
	<input class="lui-radiobutton__input" type="radio" name="myradio" value="1" checked="">
	<div class="lui-radiobutton__radio-wrap">
		<span class="lui-radiobutton__radio"></span>
		<span class="lui-radiobutton__radio-text">First button</span>
	</div>
</label>
<label class="lui-radiobutton">
	<input class="lui-radiobutton__input" type="radio" name="myradio" value="2" checked="">
	<div class="lui-radiobutton__radio-wrap">
		<span class="lui-radiobutton__radio"></span>
		<span class="lui-radiobutton__radio-text">Second button</span>
	</div>
</label>

<hr>
<h2>Select</h2>
<lui-select x-model="value">
	<option value="1">First</option>
	<option value="2">Second</option>
	<option value="3">Third</option>
</lui-select>

<hr>
<h2>Switch</h2>
<div class="lui-switch">
	<label class="lui-switch__label">
		<input type="checkbox" class="lui-switch__checkbox">
		<span class="lui-switch__span">
			<div class="lui-switch__inner"></div>
			<div class="lui-switch__switch"></div>
		</span>
	</label>
</div></div>