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

CheckboxChecks, descriptions, inline options, and validation RadioSingle-select radio groups, descriptions, and invalid state SwitchOn/off toggle switches, descriptions, and confirmations InputsText controls, labels, helper text, validation, and sizes TextareaMulti-line text inputs, rows, validation, and flush styling 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 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.

Forms Architecture API

The form system coordinates grouping, responsive row grids, labels, control primitives, and validation states.

Class	Purpose
`.bs-form-group`	Vertical grid layout binding label, control, helper text, and feedback messages.
`.bs-form-row`	Responsive grid row distributing child form groups into multi-column layouts on larger screens.
`.bs-label`	Associated field label with baseline alignment and bold typography.
`.bs-label-required`	Required field indicator (renders red asterisk) for required form inputs.
`.bs-label-optional`	Muted optional tag for non-mandatory form inputs.
`.bs-form-text`	Muted descriptive helper text placed below or beside a control.
`.bs-is-valid`	Explicit positive validation state with green border, focus ring, and icon accent.
`.bs-is-invalid`	Explicit negative validation state with danger border, focus ring, and icon accent.
`.bs-form-feedback-valid`	Success message text associated with valid form input.
`.bs-form-feedback-invalid`	Error message text describing validation failures.