Skip to main content

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.

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>

Form Sections

Organize complex enterprise forms into visual grouped cards using .form-section, complete with .form-section-title and .form-section-desc.

Organization Details

Manage your business entity profile and communication preferences.

<div class="form-section">
  <h3 class="form-section-title"><span>Organization Details</span></h3>
  <p class="form-section-desc"><span>Manage your business entity profile and communication preferences.</span></p>
  <div class="row g-3">
    <div class="col-md-6">
      <label class="form-label" for="orgNameInput"><span>Company Name</span></label>
      <input type="text" class="form-control" id="orgNameInput" name="orgName" placeholder="Acme Global Inc.">
    </div>
    <div class="col-md-6">
      <label class="form-label" for="orgEmailInput"><span>Billing Email</span></label>
      <input type="email" class="form-control" id="orgEmailInput" name="orgEmail" placeholder="billing@acme.com">
    </div>
  </div>
</div>