Form Elements

Default Inputs

Bootstrap form inputs now come in two styles: default and active (floating) label style; their HTML markup is slightly different.

Note that wrapping an input.form-control inside a fieldset.form-group or div.form-group helps with layout styling. For labels, using .control-label will apply a smaller, muted font style.

View Accessibility Notes

Form With Default Input Styles
<fieldset class="form-group">
	<label for="REPLACE ME" class="control-label">Default With Label</label>
	<input id="REPLACE ME" type="text" class="form-control" placeholder="REPLACE ME">
</fieldset>

Input Group Add Ons

Note: Input groups with Icon Add-on do not need a label, use ARIA-LABEL instead.

Note: Input groups with Icon Add-on do not need a label, use ARIA-LABEL instead.

Note: Input groups with Button Add-on do not need a label, use ARIA-LABEL instead.

<!-- Input Group With Outside Add On -->
<fieldset class="form-group">
	<div class="input-group">
		<span class="input-group-addon" id="sizing-addon2" aria-hidden="true"><i class="material-icons">group</i></span>
		<input aria-label="REPLACE ME" type="text" class="form-control" placeholder="Icon Add-on Outside">
	</div>
</fieldset>

<!-- Input Group With Inside Add On -->
<fieldset class="form-group">
	<div class="input-group-inside">
		<span class="input-group-addon" id="sizing-addon2" aria-hidden="true"><i class="material-icons">search</i></span>
		<input aria-label="REPLACE ME" type="text" class="form-control" placeholder="Icon Add-on Inside">
	</div>
</fieldset>

Active Label Inputs

Make inputs, selects and textareas minimalist by placing the dynamic .form-active-labels on the containing form or div.

IMPORTANT! Labels must be placed after inputs to work properly, and should not include the .control-label class.

IMPORTANT! Do not use placeholder text when utilizing the floating label; the label acts as both placeholder and then label on input:focus and when the input contains a value.

Form With Active Labels

Note: Because these Icon Add-on inputs have a label, a ARIA-LABEL is not needed .

Note: Because these Button Add-on inputs have a label, a ARIA-LABEL is not needed .

<form class="form-active-labels">
	<fieldset class="form-group">
		<input id="REPLACE ME" type="text" class="form-control">
		<label for="REPLACE ME">With Active Label</label>
	</fieldset>
</form>

Default Selects

Using Bootstrap selects out-of-the-box.

View Accessibility Notes 

<!-- Single Select -->
<div class="form-group">
	<label for="REPLACE ME" class="control-label">Basic Select</label>
	<select id="REPLACE ME" class="form-control c-select">
	  <option selected>What is your favourite type of cat?</option>
	  <option value="fluffy">Fluffy</option>
	  <option value="grumpy">Grumpy</option>
	  ...
	</select>
</div>

<!-- Multi Select -->
<div class="form-group">
	<label for="REPLACE ME" class="control-label">Multi-Select</label>
	<select id="REPLACE ME" class="form-control" multiple="" aria-multiselectable="true">
		<option>Chocolate Mint</option>
		<option>Cookies and Cream</option>
		...
	</select>
</div>

Active Label Selects

Apply an Active Label style to Bootstrap select.

View Accessibility Notes 

<form class="form-active-labels">
	<!-- Active Label Single Select -->
	<div class="form-group">
		<select id="REPLACE ME" class="form-control c-select">
		  <option selected> </option>
		  <option value="fluffy">Fluffy</option>
		  <option value="grumpy">Grumpy</option>
		  ...
		</select>
		<label for="REPLACE ME">Active Label Select</label>
	</div>
</form>

ComboBoxes and MultiSelects

Use Selectize.js to transform a plain select into an ComboBox (text input + select dropdown + auto-suggest)—just place a .selectize class on the select! Create a MultiSelect using customization options available within the Selectize.js plugin.

View Accessibility Notes

Inputs using Selectize

Datepicker

Use Datepicker.js to add a date-select-field with a built in calendar, by placing a .datepicker class on any text input.

View Accessibility Notes

Input with Datepicker

Textarea

The textarea has a new style, so it looks similar to all other inputs.

View Accessibility Notes

Default Textarea

<form>
	<fieldset class="form-group">
		<label for="ta1" class="control-label">Select a Date:</label>
		<textarea id="ta1" class="form-control" placeholder="Placeholder text to prompt the user." rows="5"></textarea>
	</fieldset>
</form>

Textarea With Active/Floating Label

IMPORTANT! Do not use placeholder text when utilizing the floating label; the label acts as both placeholder and then label on input:focus. 

 <form class="form-active-labels">
	<div class="form-group">
		<textarea id="REPLACE ME" class="form-control" rows="5"></textarea>
		<label for="REPLACE ME">Write Something Lengthy, The Label Will Float On :focus</label>
	</div>
 </form>

Checkboxes

Bootstrap 4 introduces accessible and customized checkboxes which override default browser checkbox styles. — Source.

View Accessibility Notes

Inline checkboxes

Stacked checkboxes

Use the class .c-inputs-stacked on the containing .form-group to push each checkbox to its own line. 

 <fieldset class="form-group">
	<label class="c-input c-checkbox">
		<input type="checkbox" name="optionsCheckboxes" id="cb-option1">
		<span class="c-indicator"></span>
		Check and uncheck this label
	</label>
 </fieldset>

Toggle Switch (or Checkbox Toggle)

Style a checkbox into a toggle switch by wrapping the input with a .cbt class. The add a label + span "sandwich" directly after the input to create the moving toggle switch.

Note: .cbt is an abreviation for checkbox toggle.

View Accessibility Notes

Standard Toggle

This toggle's label and "toggle" switch, by default, align to the left.

Justified Toggle

Add the .cbt-justified class to .cbt-control to justify the label and toggle across the full width of their parent container. 

<fieldset class="form-group">
	<div class="cbt-control">
       	<label for="cbt-1">Receive Notifications</label>
        <span class="cbt">
			<input id="cbt-1" class="" type="checkbox" checked="" aria-label="REPLACE ME">
			<label for="cbt-1" id="cbt-1-label">
				<span class="checked"></span>
				<span class="toggle"></span>
				<span class="unchecked"></span>
			</label>
		</span>
	</div>
</fieldset>

Radios

Bootstrap 4 introduces accessible and customized radios which override default browser radio styles. — Source.
Use the class .c-inputs-stacked on the containing .form-group to push each radio to its own line.

View Accessibility Notes

Inline radio

Do you use <fieldset>s with <legend>s for accessibility?

Stacked radios

Toggle inputs can be stacked 
 <fieldset class="form-group">
	<legend>Do you use  &lt;fieldset&gt;s with &lt;legend&gt;s for accessibility?</legend>
	<label class="c-input c-radio">
		<input id="radio1" name="radio" type="radio">
		<span class="c-indicator"></span>
		Yes, I do
	</label>
	<label class="c-input c-radio">
		<input id="radio2" name="radio" type="radio">
		<span class="c-indicator"></span>
		No, not at this time
	</label>
 </fieldset>

Radio Button Groups

The option to style a selection of radios as a button group is as simple as wrapping the radios in the .btn-group.radio-btn-group classes, and then apply .btn classes to the labels.

Radio Button Groups accept the standard button styles and Button Group sizing classes.

View Accessibility Notes

Select a Layout: 
<fieldset class="form-group">
    <legend>Select a Layout:</legend>
    <div class="btn-group radio-btn-group" role="group" aria-label="Select Layout">
        <label for="l-grid" class="btn btn-primary-outline" aria-label="Grid View">
            <input id="l-grid" name="mode" type="radio" value="grid" checked>
            <i class="material-icons" aria-hidden="true">apps</i> Grid
        </label>
        <label for="l-list" class="btn btn-primary-outline" aria-label="List View">
            <input id="l-list" name="mode" type="radio" value="list">
            <i class="material-icons" aria-hidden="true">list</i> List
        </label>
        <label for="l-map" class="btn btn-primary-outline" aria-label="Map View">
            <input id="l-map" name="mode" type="radio" value="map">
            <i class="material-icons" aria-hidden="true">place</i> Map
        </label>
    </div>
</fieldset>