tabler/preview/_includes/cards/form/layout.html

{% assign horizontal = include.horizontal | default: false %}
<form class="card">
	<div class="card-header">
		<h3 class="card-title">{{ include.title | default: 'Basic form' }}</h3>
	</div>
	<div class="card-body">
		<div class="mb-3{% if horizontal %} row{% endif %}">
			<label class="{% if horizontal %}col-3 col-form-label{% else %}form-label{% endif %} required">Email address</label>
			<div{% if horizontal %} class="col"{% endif %}>
				<input type="email" class="form-control" aria-describedby="emailHelp" placeholder="Enter email">
				<small class="form-hint">We'll never share your email with anyone else.</small>
			</div>
		</div>

		<div class="mb-3{% if horizontal %} row{% endif %}">
			<label class="{% if horizontal %}col-3 col-form-label{% else %}form-label{% endif %} required">Password</label>
			<div{% if horizontal %} class="col"{% endif %}>
				<input type="password" class="form-control" placeholder="Password">
				<small class="form-hint">
					Your password must be 8-20 characters long, contain letters and numbers, and must not contain
					spaces, special characters, or emoji.
				</small>
			</div>
		</div>

		<div class="mb-3{% if horizontal %} row{% endif %}">
			<label class="{% if horizontal %}col-3 col-form-label{% else %}form-label{% endif %}">Select</label>
			<div{% if horizontal %} class="col"{% endif %}>
				<select class="form-select">
					<option>Option 1</option>
					<optgroup label="Optgroup 1">
						<option>Option 1</option>
						<option>Option 2</option>
					</optgroup>
				  <option>Option 2</option>
					<optgroup label="Optgroup 2">
						<option>Option 1</option>
						<option>Option 2</option>
					</optgroup>
					<optgroup label="Optgroup 3">
						<option>Option 1</option>
						<option>Option 2</option>
					</optgroup>
				  <option>Option 3</option>
				  <option>Option 4</option>
				</select>
			</div>
		</div>

		<div class="{% if horizontal %}row{% else %}mb-3{% endif %}">
			<label class="{% if horizontal %}col-3 col-form-label pt-0{% else %}form-label{% endif %}">Checkboxes</label>
			<div{% if horizontal %} class="col"{% endif %}>
				<label class="form-check">
					<input class="form-check-input" type="checkbox" checked>
					<span class="form-check-label">Option 1</span>
				</label>
				<label class="form-check">
					<input class="form-check-input" type="checkbox">
					<span class="form-check-label">Option 2</span>
				</label>
				<label class="form-check">
					<input class="form-check-input" type="checkbox" disabled>
					<span class="form-check-label">Option 3</span>
				</label>
			</div>
		</div>
	</div>
	<div class="card-footer text-end">
		<button type="submit" class="btn btn-primary">Submit</button>
	</div>
</form>