Forms

Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.

Overview

boodoo's form controls expand on HTML with custom styles, sizing, focus states, and more. Example form markup:

<form class="row g-3">
  <div class="col-md-6">
    <label for="email" class="form-label">Email address</label>
    <input type="email" class="form-control" id="email" placeholder="name@example.com">
  </div>
  <div class="col-md-6">
    <label for="password" class="form-label">Password</label>
    <input type="password" class="form-control" id="password">
  </div>
  <div class="col-12">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="check">
      <label class="form-check-label" for="check">Check me out</label>
    </div>
  </div>
  <div class="col-12">
    <button type="submit" class="btn btn-primary">Sign in</button>
  </div>
</form>

Form text

Block-level or inline-level form text can be created using .form-text.

Password

Your password must be 8-20 characters long.

<div class="w-50">
  <label for="inputPassword5" class="form-label">Password</label>
  <input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
  <div id="passwordHelpBlock" class="form-text">
    <span>Your password must be 8-20 characters long.</span>
  </div>
</div>

Disabled forms

Add the disabled boolean attribute on an input to prevent user interactions and make it appear lighter.

<input class="form-control mb-2" type="text" id="disabledInputOverview" name="disabledInputOverview" placeholder="Disabled input" disabled>
<input class="form-control" type="text" id="disabledReadonlyInputOverview" name="disabledReadonlyInputOverview" value="Disabled readonly input" aria-label="Disabled input example" disabled
  readonly>

Readonly

<input class="form-control" type="text" id="readonlyInputOverview" name="readonlyInputOverview" value="Readonly input here…" aria-label="readonly input example" readonly>