tabler-ui/src/_includes/cards/search-custom.html

Premium and Open Source dashboard template with responsive and high quality UI. For Free!

<div class="card">
	<div class="card-body">
		<form action="">

			<div class="form-group">
				<label class="form-label">Search</label>
				<input type="text" class="form-control"/>
			</div>

			<div class="form-group">
				<label class="form-label">Ratios</label>
				<div class="row align-items-center">
					<div class="col">
						<input type="range" class="form-control custom-range" step="5" min="0" max="50">
					</div>
					<div class="col-auto">
						<input type="number" class="form-control w-8" value="45"/>
					</div>
				</div>
			</div>

			<div class="form-group">
				<label class="form-label">Intensity</label>
				<div class="selectgroup w-100">
					<label class="selectgroup-item">
						<input type="radio" name="intensity" value="low" class="selectgroup-input" checked>
						<span class="selectgroup-button">Low</span>
					</label>
					<label class="selectgroup-item">
						<input type="radio" name="intensity" value="medium" class="selectgroup-input">
						<span class="selectgroup-button">Medium</span>
					</label>
					<label class="selectgroup-item">
						<input type="radio" name="intensity" value="high" class="selectgroup-input">
						<span class="selectgroup-button">High</span>
					</label>
				</div>
			</div>

			<div class="form-group">
				<label class="form-label">Size</label>
				<div class="selectgroup w-100">
					<label class="selectgroup-item">
						<input type="checkbox" name="value" value="50" class="selectgroup-input" checked>
						<span class="selectgroup-button">S</span>
					</label>
					<label class="selectgroup-item">
						<input type="checkbox" name="value" value="100" class="selectgroup-input">
						<span class="selectgroup-button">M</span>
					</label>

					<label class="selectgroup-item">
						<input type="checkbox" name="value" value="150" class="selectgroup-input">
						<span class="selectgroup-button">L</span>
					</label>
					<label class="selectgroup-item">
						<input type="checkbox" name="value" value="200" class="selectgroup-input">
						<span class="selectgroup-button">XL</span>
					</label>
				</div>
			</div>

			<div class="form-group">
				<label class="form-label">Company</label>
				<input type="text" class="form-control" placeholder="e.g. ACME Technology"/>
			</div>

			<div class="form-group">
				<label class="form-label">Add to list</label>
				<select class="form-control custom-select">
					<option>Base</option>
					<option>Custom</option>
				</select>
			</div>

			<div class="form-footer text-right">
				<button type="submit" class="btn btn-primary">Search</button>
			</div>

		</form>
	</div>
</div>