Forms¶

Basic Input¶

Email address

Password

<div class="mb-3">
  <label class="form-label">Email address</label>
  <input type="email" class="form-control" placeholder="name@example.com">
</div>

Select¶

Select option

<select class="form-select">
  <option selected>Choose...</option>
  <option value="1">Option 1</option>
</select>

Switches and Checkboxes¶

Enabled

Remember me

<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="switch1" checked>
  <label class="form-check-label" for="switch1">Enabled</label>
</div>

Input Sizes¶

<input class="form-control form-control-lg" placeholder="Large">
<input class="form-control" placeholder="Default">
<input class="form-control form-control-sm" placeholder="Small">

Usage Guidelines¶

Always use <label> elements with for attributes
Use form-control for all text inputs
Use form-select for dropdowns
Group related fields with mb-3 spacing
Use form-check form-switch for toggles, form-check for checkboxes

On this page

Forms