keyboard_double_arrow_left
help Help & getting started
  1. Home
  2. Overview

Forms.

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

Overview

We'll never share your email with anyone else.

<form>
  <div class="mb-3">
	<label for="exampleInputEmail1" class="form-label">Email address</label>
	<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
	<div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
  </div>
  <div class="mb-3">
	<label for="exampleInputPassword1" class="form-label">Password</label>
	<input type="password" class="form-control" id="exampleInputPassword1">
  </div>
  <div class="mb-3 form-check">
	<input type="checkbox" class="form-check-input" id="exampleCheck1">
	<label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Disabled forms

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

Disabled fieldset example 

<form>
  <fieldset disabled>
	<legend>Disabled fieldset example</legend>
	<div class="mb-3">
	  <label for="disabledTextInput" class="form-label">Disabled input</label>
	  <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
	</div>
	<div class="mb-3">
	  <label for="disabledSelect" class="form-label">Disabled select menu</label>
	  <select id="disabledSelect" class="form-select">
		<option>Disabled select</option>
	  </select>
	</div>
	<div class="mb-3">
	  <div class="form-check">
		<input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled>
		<label class="form-check-label" for="disabledFieldsetCheck">
		  Can't check this
		</label>
	  </div>
	</div>
	<button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>