Form Elements

Form Layouts

There are a few differnt layout styles that are possible with Bootstrap. For Lone Wolf products, we will use either the standard form or the inline form styles.

Standard Form Example

The standard form style can take advantage of Bootstrap's responsive grid classes, or the inputs can stretch to the full width of their container.

<form>
	<div class="row">
		<div class="col-6 col-md-2">
			<fieldset class="form-group">
				<label for="exampleInputA" class="control-label">Default With Label</label>
				<input id="exampleInputA" type="text" class="form-control" placeholder=".col-6.col-md-2">
			</fieldset>
		</div>
		<div class="col-6 col-md-4">
			<fieldset class="form-group">
				<label for="exampleInputB" class="control-label">Default With Label</label>
				<input id="exampleInputB" type="text" class="form-control" placeholder=".col-6.col-md-4">
			</fieldset>
		</div>
		<div class="col-12 col-md-6">
			<fieldset class="form-group">
				<label for="exampleInputC" class="control-label">Default With Label</label>
				<input id="exampleInputC" type="text" class="form-control" placeholder=".col-12.col-md-6">
			</fieldset>
		</div>
	</div>
	<div class="row">
		<div class="col">
			<fieldset class="form-group">
				<label for="exampleInputD" class="control-label">Default With Label</label>
				<input id="exampleInputD" type="text" class="form-control" placeholder=".col">
			</fieldset>
		</div>
	</div>
	<div class="row">
		<div class="col text-center">
			<button class="btn btn-primary">SUBMIT</button>
		</div>
	</div>
</form>

Inline Form Example

Use this style when you need to horizontally align your inputs, labels and any help text.

<form class="form-inline">
	<div class="form-group">
		<label for="inputUserName4">User Name</label>
		<input type="password" id="inputUserName4" class="form-control mx-sm-3" aria-describedby="UserNameInline">
	</div>
	<div class="form-group">
		<label for="inputPassword4">Password</label>
		<input type="password" id="inputPassword4" class="form-control mx-sm-3" aria-describedby="passwordHelpInline">
		<small id="passwordHelpInline" class="text-muted mr-4">
			Must be 8-20 characters long.
		</small>
	</div>
	<div class="form-group">
		<button class="btn btn-secondary">CREATE ACCOUNT</button>
	</div>
</form>

Default Input Styles

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.

accessibility View Accessibility Notes

<!-- default w/ help block -->
<fieldset class="form-group">
	<label for="exampleInput1" class="control-label">Default With Label</label>
	<input id="exampleInput1" type="text" class="form-control" placeholder="Placeholder text">
	<p id="passwordHelpBlock" class="form-text text-muted">
	  Help block text is great for user feedback.
	</p>
</fieldset>

<!-- success w/ help block -->
<fieldset class="form-group has-success">
	<label for="exampleInput2" class="control-label">Success input</label>
	<input id="exampleInput2" type="text" value="Success! Done correctly." class="form-control"/>
	<p id="passwordHelpBlock" class="form-text text-success">
	  Help block text is great for user feedback.
	</p>
</fieldset>

<!-- danger w/ icon -->
<fieldset class="form-group has-danger">
	<label for="exampleInput3" class="control-label">Error input with icon</label>
	<input id="exampleInput3" type="email" value="This value is incorrect" class="form-control form-control-danger"/>
</fieldset>

<!-- 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>

Control Sizing

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 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.

accessibility 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.

accessibility 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.

accessibility 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.

accessibility View Accessibility Notes

Input with Datepicker

Textarea

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

accessibility View Accessibility Notes

<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>

<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.

accessibility View Accessibility Notes

<fieldset class="form-group custom-controls-stacked">
<label class="custom-control custom-checkbox">
  <input type="checkbox" id="cb01" class="custom-control-input">
  <span class="custom-control-indicator"></span>
  <span class="custom-control-description">Check this custom checkbox</span>
</label>
<label class="custom-control custom-checkbox">
  <input type="checkbox" id="cb02" class="custom-control-input">
  <span class="custom-control-indicator"></span>
  <span class="custom-control-description">Also this one</span>
</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.

accessibility View Accessibility Notes

<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.

accessibility View Accessibility Notes

<fieldset class="form-group custom-controls-stacked">
<legend>Do you use  &lt;fieldset&gt;s with &lt;legend&gt;s for accessibility?</legend>
<label class="custom-control custom-radio">
<input id="radioStacked1" name="radio-stacked" type="radio" class="custom-control-input">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Toggle this custom radio</span>
</label>
<label class="custom-control custom-radio">
<input id="radioStacked2" name="radio-stacked" type="radio" class="custom-control-input">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Or toggle this other custom radio</span>
</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.

accessibility View Accessibility Notes

<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>

Drag and Drop

This is not an example of drag-and-drop upload functionality. This element is more so a reference for the class names that should be applied to a drag and drop area.

We should also aim to also include an upload button so users have a fallback option. Our example uses the custom file upload input from Bootstrap 4. The text inside the "input" can be updated with the selected file name via JavaScript—this won't happen automatically.

<div class="upload-area">
	<div class="upload-area-text">
		<p><i class="upload-icon material-icons" aria-hidden="true">file_upload</i></p>
		<p>Drag and drop or select to upload a document</p>
		<label class="custom-file">
		  <input type="file" id="file" class="custom-file-input">
		  <span class="custom-file-control"></span>
		</label>
	</div>
</div>

Form Presentation View / Uneditable Form Field

This is a view for form related info as it appears in an uneditable or presentation state.

					<div class="lw-form-content-block">
						  <div class="row">
							    <div class="col-md">
								      <h5>Form Category</h5>
								      <p><strong>Field Label:</strong> Field Content</p>
								      <p><strong>Field Label:</strong> Field Content</p>
								      <p><strong>Field Label:</strong> Field Content</p>
							    </div>
						  </div>
					</div>