Components

Forms

Choose a focused form guide with complete, copy-ready examples for every control family.

Components guideCopy-ready referencev0.7.0 current

Components

Forms

Start with a layout pattern, then open a focused control page for an isolated rendered example and its copy-ready code.

Stacked form

HTML · Stacked form layout

<form class="bs-stack bs-gap-4">
  <div class="bs-form-group">
    <label class="bs-label" for="name">Name</label>
    <input class="bs-input" id="name" name="name" autocomplete="name" />
  </div>
  <div class="bs-form-group">
    <label class="bs-label" for="role">Role</label>
    <select class="bs-select" id="role" name="role">
      <option>Designer</option>
      <option>Engineer</option>
    </select>
  </div>
  <div class="bs-form-group">
    <label class="bs-label" for="notes">Notes</label>
    <textarea class="bs-textarea" id="notes" name="notes" rows="3"></textarea>
  </div>
  <label class="bs-check">
    <input class="bs-check-input" type="checkbox" name="updates" />
    <span class="bs-check-label">Send product updates</span>
  </label>
  <button class="bs-btn bs-btn-primary" type="submit">Create account</button>
</form>

Responsive form row

HTML · Responsive form row

<form class="bs-stack bs-gap-4">
  <div class="bs-form-row">
    <div class="bs-form-group">
      <label class="bs-label" for="first-name">First name</label>
      <input class="bs-input" id="first-name" name="first_name" autocomplete="given-name" />
    </div>
    <div class="bs-form-group">
      <label class="bs-label" for="last-name">Last name</label>
      <input class="bs-input" id="last-name" name="last_name" autocomplete="family-name" />
    </div>
  </div>
  <div class="bs-form-group">
    <label class="bs-label" for="email">Email address</label>
    <input class="bs-input" id="email" name="email" type="email" autocomplete="email" />
  </div>
  <div class="bs-flex bs-flex-wrap bs-gap-3">
    <button class="bs-btn bs-btn-primary" type="submit">Save profile</button>
    <button class="bs-btn bs-btn-secondary" type="button">Cancel</button>
  </div>
</form>

Choose a form topic

Inputs and textareasLabels, help text, validation, states, and sizes Input groups and iconsPrefixes, suffixes, buttons, selects, and Lucide icons Native selectsStyled semantic selects, option groups, sizes, and states Searchable selectComplete Boobstrap JS, Alpine.js, and React implementations Date and time inputsDate, time, datetime-local, month, and week pickers File, range, and color controlsUploads, sliders, and native color selection Passwords and masksPassword reveal behavior and declarative input formatting Checkboxes and radiosChecks, descriptions, inline choices, radios, and switches One-time passwordA complete six-digit code with paste and value synchronization

Start with semantics: native inputs, selects, textareas, fieldsets, and labels provide the baseline. Add Boobstrap classes for presentation and initialize JavaScript only for behavior such as masks, password reveal, OTP, or searchable selection.