tabler/preview/pages/onboarding.html

---
layout: base
title: Onboarding
permalink: onboarding.html
---

<nav class="navbar">
	<div class="container">
		<div class="row w-100 align-items-center">
			<div class="col me-auto">
				{% include "layout/navbar-logo.html" class="logo-gray" %}
			</div>
			<div class="col-2">
				{% include "ui/progress-steps.html" count=5 current=2 %}
			</div>
			<div class="col text-end">
				<a href="{{ page.url | relative }}" class="btn btn-ghost">Skip<span class="d-none d-md-inline">&nbsp;to dashboard</span></a>
			</div>
		</div>
	</div>
</nav>

<main class="py-5">
	<div class="container container-tight">
		<div class="page-header">
			<h1 class="page-title">
				Let's set up your account
			</h1>
		</div>
		<div class="card mt-5">
			<div class="card-body space-y-4">
				<div>
					<label class="form-label">Full name</label>
					<input type="text" class="form-control" placeholder="Enter your full name">
				</div>
				<div>
					<label class="form-label">Company name</label>
					<input type="text" class="form-control" placeholder="Enter your company name">
				</div>
				<div>
					<label class="form-label">Role</label>
					<select class="form-select">
						<option value="">Select your role</option>
						<option value="developer">Developer</option>
						<option value="designer">Designer</option>
						<option value="manager">Manager</option>
						<option value="founder">Founder</option>
						<option value="other">Other</option>
					</select>
				</div>
				<div>
					<label class="form-label">Team size</label>
					<div class="form-selectgroup">
						<label class="form-selectgroup-item">
							<input type="radio" name="team-size" value="1" class="form-selectgroup-input" checked>
							<span class="form-selectgroup-label">Just me</span>
						</label>
						<label class="form-selectgroup-item">
							<input type="radio" name="team-size" value="2-10" class="form-selectgroup-input">
							<span class="form-selectgroup-label">2-10 people</span>
						</label>
						<label class="form-selectgroup-item">
							<input type="radio" name="team-size" value="11-50" class="form-selectgroup-input">
							<span class="form-selectgroup-label">11-50 people</span>
						</label>
						<label class="form-selectgroup-item">
							<input type="radio" name="team-size" value="50+" class="form-selectgroup-input">
							<span class="form-selectgroup-label">50+ people</span>
						</label>
					</div>
				</div>
				<div>
					<label class="form-label">What are you planning to use this for?</label>
					<div class="form-check">
						<input class="form-check-input" type="radio" value="personal" id="use-personal" checked>
						<label class="form-check-label" for="use-personal">
							Personal projects
						</label>
					</div>
					<div class="form-check">
						<input class="form-check-input" type="radio" value="business" id="use-business">
						<label class="form-check-label" for="use-business">
							Business applications
						</label>
					</div>
					<div class="form-check">
						<input class="form-check-input" type="radio" value="client" id="use-client">
						<label class="form-check-label" for="use-client">
							Client work
						</label>
					</div>
					<div class="form-check">
						<input class="form-check-input" type="radio" value="learning" id="use-learning">
						<label class="form-check-label" for="use-learning">
							Learning and experimentation
						</label>
					</div>
				</div>
				<div>
					<label class="form-label">How did you hear about us?</label>
					<div class="form-check">
						<input class="form-check-input" type="checkbox" name="referral" value="search" id="ref-search">
						<label class="form-check-label" for="ref-search">
							Search engine
						</label>
					</div>
					<div class="form-check">
						<input class="form-check-input" type="checkbox" name="referral" value="social" id="ref-social">
						<label class="form-check-label" for="ref-social">
							Social media
						</label>
					</div>
					<div class="form-check">
						<input class="form-check-input" type="checkbox" name="referral" value="friend" id="ref-friend">
						<label class="form-check-label" for="ref-friend">
							Friend or colleague
						</label>
					</div>
					<div class="form-check">
						<input class="form-check-input" type="checkbox" name="referral" value="blog" id="ref-blog">
						<label class="form-check-label" for="ref-blog">
							Blog or article
						</label>
					</div>
					<div class="form-check">
						<input class="form-check-input" type="checkbox" name="referral" value="other" id="ref-other">
						<label class="form-check-label" for="ref-other">
							Other
						</label>
					</div>
				</div>
				<div>
					<div class="form-check form-switch">
						<input class="form-check-input" type="checkbox" id="notifications" checked>
						<label class="form-check-label" for="notifications">
							Send me product updates and tips via email
						</label>
					</div>
				</div>
			</div>
		</div>

		<div class="btn-list justify-content-between mt-4">
			{% include "ui/button.html" text="Back" color="link link-secondary" %}
			{% include "ui/button.html" text="Continue" color="primary" %}
		</div>
	</div>
</main>