Forms
Learn how to style input fields, radiobuttons, checkboxes and toggles.
Input Fields
To style an input simply add a .form-control class.
All input fields must either have an associated label or have an aria-label attribute. Optionally, they can have a description text. Use .form-label for labels, and .form-text for input description text. Also, labels can be hidden (but still accessible by screen readers) by adding .visually-hidden class.
You can use layout classes on inputs or on wrapper elements to create custom layouts.
Simple Input
Snippet:
<label id="input-label-1" for="input-example-1" class="form-label required">Form label</label>
<input type="text" id="input-example-1" class="form-control w-100" value="" placeholder="Input field" required aria-labelledby="input-label-1" aria-describedby="input-help-1">
<p class="form-text" id="input-help-1">Input help text</p>
Search Input
Snippet:
<label id="input-label-3" for="input-example-3" class="form-label visually-hidden">Form label</label>
<input type="search" id="input-example-3" class="form-control has-search w-100" value="" placeholder="Search" aria-labelledby="input-label-3" aria-describedby="input-help-3">
<p class="form-text" id="input-help-3">Add <code>.has-search</code> to the input</p>
Invalid Input
Snippet:
<label id="input-label-4" for="input-example-4" class="form-label required">Form label</label>
<input type="text" id="input-example-4" class="form-control is-invalid w-100" value="" placeholder="Invalid input" required aria-labelledby="input-label-4" aria-describedby="input-help-4">
<p class="form-text is-invalid" id="input-help-4">Error description. Add <code>.is-invalid</code> to the input and to the description</p>
Valid Input
Snippet:
<label id="input-label-5" for="input-example-5" class="form-label required">Form label</label>
<input type="text" id="input-example-5" class="form-control is-valid w-100" value="" placeholder="Valid input" required aria-labelledby="input-label-5" aria-describedby="input-help-5">
<p class="form-text is-valid" id="input-help-5">Add <code>.is-valid</code> to the input and to the description</p>
Disabled Input
Snippet:
<label id="input-label-6" for="input-example-6" class="form-label required">Form label</label>
<input type="text" id="input-example-6" class="form-control w-100" value="" placeholder="Input field" required disabled aria-labelledby="input-label-6" aria-describedby="input-help-6">
<p class="form-text" id="input-help-6">Input help text</p>
Select
Snippet:
<select class="form-control w-100">
<option value="option1" selected="selected">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
Checkboxes
Snippet:
<label class="form-checkbox">
<input type="checkbox" name="checkbox-name">
<div class="checkbox mr-8"></div>
<span>Checkbox label</span>
</label>
Radiobuttons
Snippet:
<label class="form-radio">
<input type="radio" name="radio-name">
<span>Radio label</span>
</label>
Toggles
Snippet:
<div class="d-flex align-items-center">
<label class="toggle mr-8">
<input
type="checkbox"
name="toggle-name"
id="toggle-id"
/>
<span class="toggle-btn"></span>
</label>
<label for="toggle-id">Toggle label</label>
</div>