tabler/preview/pages/onboarding.astro

---
// NOTE: `current=2` passed to ProgressSteps is a no-op (reads `active`, not `current`) — only step 1 is active.
import BaseLayout from '@shared/layouts/BaseLayout.astro'
import Logo from '@shared/components/navbar/Logo.astro'
import ProgressSteps from '@ui/ProgressSteps.astro'
import Button from '@ui/Button.astro'
import ButtonList from '@ui/ButtonList.astro'
import FormGroup from '@ui/FormGroup.astro'
---

<BaseLayout title="Onboarding">
  <nav class="navbar">
    <div class="container">
      <div class="row w-100 align-items-center">
        <div class="col me-auto">
          <Logo class="logo-gray" />
        </div>
        <div class="col-2">
          <ProgressSteps count={5} />
        </div>
        <div class="col text-end">
          <a href="." 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" id="content">
    <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">
          <FormGroup label="Full name" for="onboarding-full-name" class="">
            <input type="text" class="form-control" id="onboarding-full-name" placeholder="Enter your full name" />
          </FormGroup>
          <FormGroup label="Company name" for="onboarding-company-name" class="">
            <input type="text" class="form-control" id="onboarding-company-name" placeholder="Enter your company name" />
          </FormGroup>
          <FormGroup label="Role" for="onboarding-role" class="">
            <select class="form-select" id="onboarding-role">
              <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>
          </FormGroup>
          <fieldset class="border-0 p-0 m-0">
            <legend class="form-label float-none mb-0" style="font-size: inherit;">Team size</legend>
            <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>
          </fieldset>
          <fieldset class="border-0 p-0 m-0">
            <legend class="form-label float-none mb-0" style="font-size: inherit;">What are you planning to use this for?</legend>
            <div class="form-check">
              <input class="form-check-input" type="radio" name="use-for" 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" name="use-for" 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" name="use-for" 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" name="use-for" value="learning" id="use-learning" />
              <label class="form-check-label" for="use-learning"> Learning and experimentation </label>
            </div>
          </fieldset>
          <fieldset class="border-0 p-0 m-0">
            <legend class="form-label float-none mb-0" style="font-size: inherit;">How did you hear about us?</legend>
            <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>
          </fieldset>
          <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>

      <ButtonList class="justify-content-between mt-4">
        <Button text="Back" color="link link-secondary" />
        <Button text="Continue" color="primary" />
      </ButtonList>
    </div>
  </main>
</BaseLayout>