Forms

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

Form controls

Give textual form controls like <input>s and <textarea>s an upgrade with custom styles, sizing, and more.

<label class="form-label" for="email">Email Address</label>
<input class="form-control" id="email" type="email" placeholder="Email Address">
<label class="form-label" for="textarea">Textarea</label>
<textarea class="form-control" id="textarea" rows="3" placeholder="Textarea"></textarea>

Sizing

Set heights using classes like .form-control-lg and .form-control-sm.

<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg" aria-label=".form-control-lg example">
<input class="form-control" type="text" placeholder="Default input" aria-label="Default input example">
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm" aria-label=".form-control-sm example">

Readonly

Add the readonly boolean attribute on an input to prevent modification of the input’s value.

<input class="form-control" type="text" placeholder="Readonly input example" aria-label="Readonly input example" readonly>

Disabled

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

<label class="form-label" for="inputDisabled">Disabled input</label>
<input class="form-control" id="inputDisabled" type="text" placeholder="Disabled input" disabled>

Select

Customize the native <select>s with custom CSS that changes the element’s initial appearance.

Default

Custom <select> menus need only a custom class, .form-control to trigger the custom styles. Custom styles are limited to the <select>'s initial appearance and cannot modify the <option>s due to browser limitations.

<select class="form-control" aria-label="Default select example">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

Sizing

You may also choose from small and large custom selects to match our similarly sized text inputs.

<select class="form-control form-control-lg" aria-label=".form-control-lg example">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>
<select class="form-control form-control-sm" aria-label=".form-control-sm example">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

Disabled

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

<label class="form-label" for="selectDisabled">Disabled select</label>
<select class="form-control" id="selectDisabled" disabled>
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

Checks

Create consistent cross-browser and cross-device checkboxes and radios with our completely rewritten checks component.

Approach

Browser default checkboxes and radios are replaced with the help of .form-check, a series of classes for both input types that improves the layout and behavior of their HTML elements, that provide greater customization and cross browser consistency. Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.

Structurally, our <input>s and <label>s are sibling elements as opposed to an <input> within a <label>. This is slightly more verbose as you must specify id and for attributes to relate the <input> and <label>. We use the sibling selector (~) for all our <input> states, like :checked or :disabled. When combined with the .form-check-label class, we can easily style the text for each item based on the <input>'s state.

Checkbox

<div class="form-check">
  <input class="form-check-input" id="checkboxDefault" type="checkbox">
  <label class="form-check-label" for="checkboxDefault">Default checkbox</label>
</div>
<div class="form-check">
  <input class="form-check-input" id="checkboxChecked" type="checkbox" checked>
  <label class="form-check-label" for="checkboxChecked">Checked checkbox</label>
</div>

Disabled

Add the disabled attribute and the associated <label>s are automatically styled to match with a lighter color to help indicate the input’s state.

<div class="form-check">
  <input class="form-check-input" id="checkboxDisabled" type="checkbox" disabled>
  <label class="form-check-label" for="checkboxDisabled">Disabled checkbox</label>
</div>
<div class="form-check">
  <input class="form-check-input" id="checkboxCheckedDisabled" type="checkbox" checked disabled>
  <label class="form-check-label" for="checkboxCheckedDisabled">Disabled checked checkbox</label>
</div>

Radios

<div class="form-check">
  <input class="form-check-input" id="radioDefault" type="radio">
  <label class="form-check-label" for="radioDefault">Default radio</label>
</div>
<div class="form-check">
  <input class="form-check-input" id="radioChecked" type="radio" checked>
  <label class="form-check-label" for="radioChecked">Checked radio</label>
</div>

Disabled

Add the disabled attribute and the associated <label>s are automatically styled to match with a lighter color to help indicate the input’s state.

<div class="form-check">
  <input class="form-check-input" id="radioDisabled" type="radio" disabled>
  <label class="form-check-label" for="radioDisabled">Disabled radio</label>
</div>
<div class="form-check">
  <input class="form-check-input" id="radioCheckedDisabled" type="radio" checked disabled>
  <label class="form-check-label" for="radioCheckedDisabled">Disabled checked radio</label>
</div>

Switches

A switch has the markup of a custom checkbox but uses the .form-switch class to render a toggle switch. Switches also support the disabled attribute.

<div class="form-check form-switch">
  <input class="form-check-input" id="switchDefault" type="checkbox">
  <label class="form-check-label" for="switchDefault">Default switch</label>
</div>
<div class="form-check form-switch">
  <input class="form-check-input" id="switchChecked" type="checkbox" checked>
  <label class="form-check-label" for="switchChecked">Checked switch</label>
</div>
<div class="form-check form-switch">
  <input class="form-check-input" id="switchDisabled" type="checkbox" disabled>
  <label class="form-check-label" for="switchDisabled">Disabled switch</label>
</div>
<div class="form-check form-switch">
  <input class="form-check-input" id="switchCheckedDisabled" type="checkbox" checked disabled>
  <label class="form-check-label" for="switchCheckedDisabled">Disabled checked switch</label>
</div>

Without labels

Omit the <label> tag for checkboxes and radios that have no label text. Remember to still provide some form of label for assistive technologies (for instance, using aria-label).

<div class="form-check">
  <input class="form-check-input" type="checkbox" aria-label="Checkbox without label">
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" aria-label="Radio without label">
</div>
<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" aria-label="Switch without label">
</div>

Sizing

Built with em units, custom checks, radios, and switches will scale to their own font-size, or their containing element's (explicit or inherited) font-size. Here we're using a modifier class to set font-size: 1.5rem on the container.

Note that you could scope the sizing to the <input> itself, but you'll need additional styles to change the indentation of the <label>'s text. Alternatively, you could set a font-size on the wrapper and then override the <label>'s font-size.

<div class="form-check fs-md">
  <input class="form-check-input" id="checkboxResized" type="checkbox">
  <label class="form-check-label" for="checkboxResized">Resized checkbox</label>
</div>
<div class="form-check fs-md">
  <input class="form-check-input" id="radioResized" type="radio">
  <label class="form-check-label" for="radioResized">Resized radio</label>
</div>
<div class="form-check form-switch fs-md">
  <input class="form-check-input" id="switchResized" type="checkbox">
  <label class="form-check-label" for="switchResized">Resized switch</label>
</div>