basecoat/docs/_includes/form.njk

<section id="form" class="w-full rounded-lg border">
    <header class="border-b px-4 py-3">
      <h2 class="text-sm font-medium">Form</h2>
    </header>
    <div class="p-4">
      <form class="form grid w-full max-w-sm gap-6">
        <div class="grid gap-2">
          <label for="demo-form-text">Username</label>
          <input type="text" id="demo-form-text" placeholder="hunvreus">
          <p class="text-muted-foreground text-sm">This is your public display name.</p>
        </div>

        <div class="grid gap-2">
          <label for="demo-form-select">Email</label>
          <select id="demo-form-select">
            <option value="bob@example.com">m@example.com</option>
            <option value="alice@example.com">m@google.com</option>
            <option value="john@example.com">m@support.com</option>
          </select>
          <p class="text-muted-foreground text-sm">You can manage email addresses in your email settings.</p>
        </div>

        <div class="grid gap-2">
          <label for="demo-form-text">Bio</label>
          <textarea id="demo-form-textarea" placeholder="I like to..." rows="3"></textarea>
          <p class="text-muted-foreground text-sm">You can @mention other users and organizations.</p>
        </div>

        <div class="flex flex-col gap-3">
          <label for="demo-form-radio">Notify me about...</label>
          <fieldset id="demo-form-radio" class="grid gap-3">
            <label class="font-normal"><input type="radio" name="demo-form-radio" value="1">All new messages</label>
            <label class="font-normal"><input type="radio" name="demo-form-radio" value="2">Direct messages and mentions</label>
            <label class="font-normal"><input type="radio" name="demo-form-radio" value="3" >Nothing</label>
          </fieldset>
        </div>

        <div class="flex flex-row items-start gap-3 rounded-md border p-4 shadow-xs">
          <input type="checkbox" id="demo-form-checkbox">
          <div class="flex flex-col gap-1">
            <label for="demo-form-checkbox" class="leading-snug">Use different settings for my mobile devices</label>
            <p class="text-muted-foreground text-sm leading-snug">You can manage your mobile notifications in the mobile settings page.</p>
          </div>
        </div>

        <div class="flex flex-col gap-4">
          <header>
            <label for="demo-form-checkboxes" class="text-base leading-normal">Sidebar</label>
            <p class="text-muted-foreground text-sm">Select the items you want to display in the sidebar.</p>
          </header>
          <fieldset id="demo-form-checkboxes" class="flex flex-col gap-2">
            <label class="font-normal leading-tight">
              <input type="checkbox" name="demo-form-checkboxes" value="1" checked>
              Recents
            </label>
            <label class="font-normal leading-tight">
              <input type="checkbox" name="demo-form-checkboxes" value="2" checked>
              Home
            </label>
            <label class="font-normal leading-tight">
              <input type="checkbox" name="demo-form-checkboxes" value="3">
              Applications
            </label>
            <label class="font-normal leading-tight">
              <input type="checkbox" name="demo-form-checkboxes" value="4">
              Desktop
            </label>
            <label class="font-normal leading-tight">
              <input type="checkbox" name="demo-form-checkboxes" value="5">
              Download
            </label>
            <label class="font-normal leading-tight">
              <input type="checkbox" name="demo-form-checkboxes" value="6">
              Documents
            </label>
          </fieldset>
        </div>

        <div class="grid gap-2">
          <label for="demo-form-date">Date of birth</label>
          <input type="date" id="demo-form-date">
          <p class="text-muted-foreground text-sm">Your date of birth is used to calculate your age.</p>
        </div>

        <section class="grid gap-4">
          <h3 class="text-lg font-medium">Email Notifications</h3>
          <div class="gap-2 flex flex-row items-start justify-between rounded-lg border p-4 shadow-xs">
            <div class="flex flex-col gap-0.5">
              <label for="demo-form-switch" class="leading-normal">Marketing emails</label>
              <p class="text-muted-foreground text-sm">Receive emails about new products, features, and more.</p>
            </div>
            <input type="checkbox" id="demo-form-switch" role="switch">
          </div>
          <div class="gap-2 flex flex-row items-start justify-between rounded-lg border p-4 shadow-xs">
            <div class="flex flex-col gap-0.5 opacity-60">
              <label for="demo-form-switch" class="leading-normal">Marketing emails</label>
              <p class="text-muted-foreground text-sm">Receive emails about new products, features, and more.</p>
            </div>
            <input type="checkbox" id="demo-form-switch" role="switch" disabled>
          </div>
        </section>

        <button type="submit" class="btn">Submit</button>
      </form>
    </div>
  </section>