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.

Disabled forms

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

Readonly