Skip to main content
Quick Start

Athena UI

Forms

Labels, validation, help text, grouped inputs, and auth controls.

New Page

Input Catalogue

A broad sample of form controls with labels, help text, autocomplete, and accessible grouping.

Compact range input for simple priority selection.
4
72
Selected options use a dark blue background with white text for contrast.
Use server-side validation for type and size.
Account Type
Preferences

Optional Validation

This tab shows the same Bootstrap validation pattern with live feedback switched on or off for the demo.

Enter at least two characters.
Looks good.
Use a valid email address.
Email format is valid.
Use at least 12 characters.
Length requirement met.
Choose a plan.
Add a short implementation note.

HTML
<section class="athena-card p-4">
      <ul class="nav nav-tabs mb-4" id="forms-demo-tabs" role="tablist">
        <li class="nav-item" role="presentation"><button class="nav-link active" id="forms-inputs-tab" data-bs-toggle="tab" data-bs-target="#forms-inputs-panel" type="button" role="tab" aria-controls="forms-inputs-panel" aria-selected="true">Input Catalogue</button></li>
        <li class="nav-item" role="presentation"><button class="nav-link" id="forms-validation-tab" data-bs-toggle="tab" data-bs-target="#forms-validation-panel" type="button" role="tab" aria-controls="forms-validation-panel" aria-selected="false">Validation Demo</button></li>
      </ul>
      <div class="tab-content">
        <div class="tab-pane fade show active" id="forms-inputs-panel" role="tabpanel" aria-labelledby="forms-inputs-tab" tabindex="0">
          <h2 class="h4">Input Catalogue</h2>
          <p class="text-secondary">A broad sample of form controls with labels, help text, autocomplete, and accessible grouping.</p>
          <form class="row g-3" action="#" method="post" enctype="multipart/form-data" novalidate>
            <div class="col-md-6"><label class="form-label" for="form-name">Full Name</label><input id="form-name" class="form-control" autocomplete="name"></div>
            <div class="col-md-6"><label class="form-label" for="form-email">Email Address</label><input id="form-email" type="email" class="form-control" autocomplete="email"></div>
            <div class="col-md-6"><label class="form-label" for="form-passphrase">Passphrase</label><input id="form-passphrase" type="password" class="form-control" autocomplete="new-password"></div>
            <div class="col-md-6"><label class="form-label" for="form-tel">Telephone</label><input id="form-tel" type="tel" class="form-control" autocomplete="tel"></div>
            <div class="col-md-6"><label class="form-label" for="form-url">Website</label><input id="form-url" type="url" class="form-control" placeholder="https://example.test"></div>
            <div class="col-md-6"><label class="form-label" for="form-search">Search Query</label><input id="form-search" type="search" class="form-control" placeholder="Search records"></div>
            <div class="col-md-4">
              <label class="form-label" for="form-number">Seats</label>
              <div class="athena-number-stepper" data-athena-stepper>
                <button class="btn btn-outline-secondary" type="button" data-athena-step="-1" aria-label="Decrease Seats"><i class="bi bi-dash" aria-hidden="true"></i></button>
                <input id="form-number" type="number" min="1" max="250" value="24" class="form-control" inputmode="numeric">
                <button class="btn btn-outline-secondary" type="button" data-athena-step="1" aria-label="Increase Seats"><i class="bi bi-plus" aria-hidden="true"></i></button>
              </div>
            </div>
            <div class="col-md-4"><label class="form-label" for="form-range">Priority</label><input id="form-range" type="range" min="1" max="5" value="3" class="form-range"><div class="form-text">Compact range input for simple priority selection.</div></div>
            <div class="col-md-4"><label class="form-label" for="form-colour">Brand Colour</label><input id="form-colour" type="color" value="#2563eb" class="form-control form-control-color"></div>
            <div class="col-md-6">
              <label class="form-label" for="form-priority-scale">Escalation Priority</label>
              <div class="athena-range-meter">
                <output class="athena-range-output" for="form-priority-scale" data-athena-range-output>4</output>
                <input id="form-priority-scale" type="range" min="0" max="10" value="4" class="form-range">
                <div class="athena-range-scale" aria-hidden="true"><span>0 Low</span><span>10 Critical</span></div>
              </div>
            </div>
            <div class="col-md-6">
              <label class="form-label" for="form-confidence">Confidence</label>
              <div class="athena-range-meter">
                <output class="athena-range-output" for="form-confidence" data-athena-range-output>72</output>
                <input id="form-confidence" type="range" min="0" max="100" value="72" class="form-range">
                <div class="athena-range-scale" aria-hidden="true"><span>0%</span><span>100%</span></div>
              </div>
            </div>
            <div class="col-md-4"><label class="form-label" for="form-date">Review Date</label><input id="form-date" type="date" class="form-control"></div>
            <div class="col-md-4"><label class="form-label" for="form-time">Review Time</label><input id="form-time" type="time" class="form-control"></div>
            <div class="col-md-4"><label class="form-label" for="form-datetime">Deadline</label><input id="form-datetime" type="datetime-local" class="form-control"></div>
            <div class="col-md-6"><label class="form-label" for="form-month">Billing Month</label><input id="form-month" type="month" class="form-control" value="2026-06"><span class="athena-input-preview" data-athena-month-output></span></div>
            <div class="col-md-6"><label class="form-label" for="form-week">Reporting Week</label><input id="form-week" type="week" class="form-control" value="2026-W23"><span class="athena-input-preview" data-athena-week-output></span></div>
            <div class="col-md-6"><label class="form-label" for="form-role">Role</label><select id="form-role" class="form-select"><option>Administrator</option><option>Operator</option><option>Viewer</option></select></div>
            <div class="col-md-6"><label class="form-label" for="form-team">Team</label><select id="form-team" class="form-select"><option>Operations</option><option>Support</option><option>Finance</option><option>Security</option></select><span class="athena-input-preview" data-athena-team-output></span></div>
            <div class="col-md-6"><label class="form-label" for="form-multi">Notification Channels</label><select id="form-multi" class="form-select athena-multi-select" multiple><option selected>Email</option><option>SMS</option><option>In-app</option><option>Webhook</option></select><div class="form-text">Selected options use a dark blue background with white text for contrast.</div></div>
            <div class="col-md-6"><label class="form-label" for="form-file">Upload Evidence</label><input id="form-file" type="file" class="form-control"><div class="form-text">Use server-side validation for type and size.</div></div>
            <fieldset class="col-md-6"><legend class="form-label fs-6">Account Type</legend><div class="form-check"><input id="form-radio-1" class="form-check-input" type="radio" name="account-type" checked><label class="form-check-label" for="form-radio-1">Standard</label></div><div class="form-check"><input id="form-radio-2" class="form-check-input" type="radio" name="account-type"><label class="form-check-label" for="form-radio-2">Enterprise</label></div></fieldset>
            <fieldset class="col-md-6"><legend class="form-label fs-6">Preferences</legend><div class="form-check"><input id="form-confirm" class="form-check-input" type="checkbox"><label class="form-check-label" for="form-confirm">Send a confirmation email</label></div><div class="form-check form-switch"><input id="form-switch" class="form-check-input" type="checkbox" role="switch"><label class="form-check-label" for="form-switch">Enable weekly digest</label></div></fieldset>
            <div class="col-md-6"><label class="form-label" for="form-readonly">Read-only Token</label><input id="form-readonly" class="form-control" value="athena-demo-token" readonly></div>
            <div class="col-md-6"><label class="form-label" for="form-disabled">Disabled Field</label><input id="form-disabled" class="form-control" value="Unavailable" disabled></div>
            <div class="col-12"><label class="form-label" for="form-notes">Notes</label><textarea id="form-notes" class="form-control" rows="4" maxlength="500">Use text areas for longer supporting context.</textarea></div>
            <div class="col-12 d-flex gap-2"><button class="btn btn-primary" type="submit">Submit Form</button><button class="btn btn-outline-secondary" type="reset">Reset Form</button></div>
          </form>
        </div>
        <div class="tab-pane fade" id="forms-validation-panel" role="tabpanel" aria-labelledby="forms-validation-tab" tabindex="0">
          <div class="d-flex flex-wrap justify-content-between align-items-start gap-3 mb-3">
            <div>
              <h2 class="h4">Optional Validation</h2>
              <p class="text-secondary mb-0">This tab shows the same Bootstrap validation pattern with live feedback switched on or off for the demo.</p>
            </div>
            <div class="form-check form-switch athena-validation-toolbar">
              <input class="form-check-input" type="checkbox" role="switch" id="validation-live-toggle" data-athena-validation-toggle aria-controls="forms-validation-demo">
              <label class="form-check-label" for="validation-live-toggle">Enable Live Validation</label>
            </div>
          </div>
          <p class="small text-secondary" data-athena-validation-status data-target="forms-validation-demo" aria-live="polite"></p>
          <form id="forms-validation-demo" class="row g-3" action="#" method="post" data-athena-validation-demo novalidate>
            <div class="col-md-6">
              <label class="form-label" for="validation-name">Full Name</label>
              <input id="validation-name" class="form-control" autocomplete="name" required minlength="2">
              <div class="invalid-feedback">Enter at least two characters.</div>
              <div class="valid-feedback">Looks good.</div>
            </div>
            <div class="col-md-6">
              <label class="form-label" for="validation-email">Email Address</label>
              <input id="validation-email" type="email" class="form-control" autocomplete="email" required>
              <div class="invalid-feedback">Use a valid email address.</div>
              <div class="valid-feedback">Email format is valid.</div>
            </div>
            <div class="col-md-6">
              <label class="form-label" for="validation-passphrase">Passphrase</label>
              <input id="validation-passphrase" type="password" class="form-control" autocomplete="new-password" required minlength="12">
              <div class="invalid-feedback">Use at least 12 characters.</div>
              <div class="valid-feedback">Length requirement met.</div>
            </div>
            <div class="col-md-6">
              <label class="form-label" for="validation-plan">Plan</label>
              <select id="validation-plan" class="form-select" required>
                <option value="">Choose a plan</option>
                <option>Team</option>
                <option>Business</option>
                <option>Enterprise</option>
              </select>
              <div class="invalid-feedback">Choose a plan.</div>
            </div>
            <div class="col-12">
              <label class="form-label" for="validation-notes">Implementation Notes</label>
              <textarea id="validation-notes" class="form-control" rows="3" maxlength="280" required></textarea>
              <div class="invalid-feedback">Add a short implementation note.</div>
            </div>
            <div class="col-12 d-flex gap-2"><button class="btn btn-primary" type="submit">Validate Demo</button><button class="btn btn-outline-secondary" type="reset">Reset Demo</button></div>
          </form>
        </div>
      </div>
    </section>