tabler/preview/pages/form-layout.html

---
title: Form layout
page-header: Form Layout
page-menu: form.layout
layout: default
permalink: form-layout.html
page-libs: [litepicker]
---

<div class="row row-cards row-cols-1 row-cols-md-2">
	<div class="col">
		<div class="row row-cards">
			<div class="col-12">
				<div class="card">
					<div class="card-header">
						<h3 class="card-title">
							Basic Form
						</h3>
					</div>
					<div class="card-body">
						<form class="space-y">
							<div class="row">
								<div class="col-6">
									<label class="form-label visually-hidden" for="basic-name">Name</label>
									<input type="text" placeholder="Name" class="form-control" id="basic-name" name="name" />
								</div>
								
								<div class="col-6">
									<label class="form-label visually-hidden" for="basic-email">Email address</label>
									<input type="email" placeholder="Email address" class="form-control" id="basic-email" name="email" />
								</div>
							</div>

							<div>
								<label class="form-label visually-hidden" for="basic-password">Password</label>
								<input type="password" placeholder="Password" class="form-control" id="basic-password" name="password" />
							</div>

							<div>
								<label class="form-label visually-hidden" for="basic-password-confirm">Confirm Password</label>
								<input type="password" placeholder="Confirm Password" class="form-control" id="basic-password-confirm" name="password_confirm" />
							</div>

							<div>
								{% include "ui/button.html" color="primary" block text="Submit" %}
							</div>
						</form>
					</div>
				</div>
			</div>
			<div class="col-12">
				<div class="card">
					<div class="card-header">
						<h3 class="card-title">
							Example Form
						</h3>
					</div>
					<div class="card-body">
						<form>
							<div class="space-y">
								<div>
									<label class="form-label" for="example-first-name">
										First Name
									</label>
									<input type="text" placeholder="Enter first name" class="form-control" id="example-first-name" name="first_name">
								</div>

								<div>
									<label class="form-label" for="example-last-name">
										Last Name
									</label>
									<input type="text" placeholder="Enter last name" class="form-control" id="example-last-name" name="last_name">
								</div>

								<div>
									<label class="form-label" for="example-email">
										Email
									</label>
									<input type="email" placeholder="Enter email address" class="form-control" id="example-email" name="email">
								</div>

								<div>
									<label class="form-label" for="example-subject">
										Select Subject
									</label>
									<select class="form-select" id="example-subject" name="subject">
										<option>
											Option 1
										</option>
										<option>
											Option 2
										</option>
										<option>
											Option 3
										</option>
										<option>
											Option 4
										</option>
									</select>
								</div>

								<div>
									<label class="form-label" for="example-message">
										Message
									</label>
									<textarea placeholder="Enter your message" rows="6" class="form-control" id="example-message" name="message"></textarea>
								</div>

								<div>
									{% include "ui/button.html" color="primary" block text="Send Message" icon-end="arrow-right" %}
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>


	</div>

	<div class="col">
		<div class="row row-cards">
			<div class="col-12">
				<div class="card">
					<div class="card-header">
						<h3 class="card-title">
							Example Form with Icons
						</h3>
					</div>
					<div class="card-body">
						<form class="space-y">
							<div>
								{% include "ui/form/input-icon.html" icon="user" placeholder="Username" prepend %}
							</div>

							<div>
								{% include "ui/form/input-icon.html" icon="mail" placeholder="Email address" prepend type="mail" %}
							</div>

							<div>
								{% include "ui/form/input-icon.html" icon="lock" placeholder="Password" prepend type="password" %}
							</div>

							<div>
								{% include "ui/form/input-icon.html" icon="lock" placeholder="Confirm Password" prepend type="password" %}
							</div>

							<div>
								<div class="row align-items-center">
									<div class="col">
										{% include "ui/form/check.html" title="Remember me" class="m-0" %}
									</div>
									<div class="col-auto">
										{% include "ui/button.html" color="primary" text="Create Account" icon-end="arrow-right" %}
									</div>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>

			<div class="col-12">
				<div class="card">
					<div class="card-header">
						<h3 class="card-title">
							Form with Icons and Validation
						</h3>
					</div>
					<div class="card-body">
						<form class="space-y">
							<div>
								<div class="input-icon">
									<span class="input-icon-addon">
										{% include "ui/icon.html" icon="user" %}
									</span>
									<input type="text" value="" class="form-control is-invalid" placeholder="Username">
									<div class="invalid-feedback">
										This throws the icon out of bounds when input element contains `is-invalid` class.
									</div>
								</div>
							</div>

							<div>
								<div class="input-icon">
									<span class="input-icon-addon">
										{% include "ui/icon.html" icon="mail" %}
									</span>
									<input type="email" value="" class="form-control is-valid" placeholder="Email">
									<div class="valid-feedback">
										This email looks good!
									</div>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>

			<div class="col-12">
				{% include "cards/form/layout.html" horizontal=true title="Horizontal form" %}
			</div>

			<div class="col-12">
				<div class="card">
					<div class="card-header">
						<h3 class="card-title">
							Example Form
						</h3>
					</div>
					<div class="card-body">
						<form>
							<div class="space-y">
								<div>
									<h4>
										Personal Info
									</h4>
								</div>

								<div class="row row-cols-2 g-4">
									<div>
										<label class="form-label">
											First Name
										</label>
										<input type="text" placeholder="Enter first name" class="form-control">
									</div>

									<div>
										<label class="form-label">
											Last Name
										</label>
										<input type="text" placeholder="Enter last name" class="form-control">
									</div>

									<div>
										<label class="form-label">
											Gender
										</label>
										<div>
											<select class="form-select">
												<option>
													Male
												</option>
												<option>
													Female
												</option>
												<option>
													Others
												</option>
											</select>
										</div>
									</div>
									
									<div>
										<label class="form-label">
											Date of Birth
										</label>
									
										<div>
											{% include "ui/datepicker.html" layout="icon" id="birth-date" %}
										</div>
									</div>
								</div>

								<div>
									<label class="form-label">
										Category
									</label>
									<div>
										<select class="form-select">
											<option>
												Category 1
											</option>
											<option>
												Category 2
											</option>
											<option>
												Category 3
											</option>
										</select>
									</div>
								</div>

								<div>
									<h4>
										Address
									</h4>
								</div>

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

								<div class="row row-cols-2 g-4">
									<div>
										<label class="form-label">
											City
										</label>
										<input type="text" class="form-control">
									</div>
									
									<div>
										<label class="form-label">
											State
										</label>
										<input type="text" class="form-control">
									</div>
									
									<div>
										<label class="form-label">
											Post Code
										</label>
										<input type="text" class="form-control">
									</div>
									
									<div>
										<label class="form-label">
											Country
										</label>
										<div>
											<select class="form-select">
												<option>
													--Select Country--
												</option>
												{% for country in flags %}
												<option>
													{{ country.name }}
												</option>
												{% endfor %}
											</select>
										</div>
									</div>
								</div>

								<div>
									<div>
										<label class="form-label">
											Membership
										</label>

										<div class="d-flex flex-row gap-4">
											{% include "ui/form/check.html" title="Free" type="radio" name="membership" checked=true %}
											{% include "ui/form/check.html" title="Paid" type="radio" name="membership" %}
										</div>
									</div>
								</div>

								<div class="text-end">
									{% include "ui/button.html" text="Cancel" %}
									{% include "ui/button.html" color="primary" text="Save Changes" %}
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>