Forms

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

Form Control

Textual form controls—like <input>s, <select>s, and <textarea>s—are styled with the .form-control class. Included are styles for general appearance, focus state, sizing, and more.

Input

<!-- Input -->
<div class="mb-3">
  <label class="form-label" for="textInput">Input</label>
  <input type="text" id="textInput" class="form-control" placeholder="Input Text">
</div>

Email

<!-- Email -->
<div class="mb-3">
  <label class="form-label" for="email">Email</label>
  <input type="email" id="email" class="form-control" placeholder="email@example.com">
</div>

Password

    <!-- Passowrd -->
                          <div class="mb-3">
                            <label class="form-label" for="password">Password</label>
                            <input type="password" id="password" class="form-control" value="passwordexample">
                          </div>

Textarea

<!-- Textarea -->
 <div class="mb-3">
   <label for="textarea-input" class="form-label">Textarea</label>
   <textarea class="form-control" id="textarea-input" rows="5">Hello World!</textarea>
 </div>
<!-- Search input -->
 <div class="mb-3">
   <label for="search-input" class="form-label">Search</label>
   <input class="form-control" type="search" id="search-input" value="Search components">
 </div>

Url

<!-- URL Input -->
 <div class="mb-3">
   <label for="url-input" class="form-label">URL</label>
   <input class="form-control" type="url" id="url-input" value="#">
 </div>

Phone

<!-- Phone Input -->
 <div class="mb-3">
   <label for="telinput" class="form-label">Phone</label>
   <input class="form-control" type="tel" id="telinput" value="+91 12 3456 7890">
 </div>

Sizing

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

<!-- large input -->
 <div class="mb-3">
   <input type="text" class="form-control form-control-lg" placeholder="Large input">
 </div>
   <!-- normal input -->
 <div class="mb-3">
   <input type="text" class="form-control" placeholder="Normal input">
 </div>
  <!-- small input -->
 <div class="mb-3">
   <input type="text" class="form-control form-control-sm" placeholder="Small input">
 </div>

Select

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


<!-- Select Option -->
<div class="mb-3">
<label class="form-label" for="selectOne">Select <span
   class="text-secondary">(Optional)</span></label>
   <select class="form-select" 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>
</div>

Multiple Select


<!-- Select Option -->
<div class="mb-3">
<label class="form-label" for="selectOne">Select <span
   class="text-secondary">(Optional)</span></label>
   <select class="form-select" 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>
</div>

Select Menu Sizes

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

<!-- Select Large -->
 <select class="form-select form-select-lg mb-3">
   <option selected>Open this select menu</option>
   <option value="1">One</option>
   <option value="2">Two</option>
   <option value="3">Three</option>
 </select>
 <!-- Select Small -->
 <select class="form-select form-select-sm">
   <option selected>Open this select menu</option>
   <option value="1">One</option>
   <option value="2">Two</option>
   <option value="3">Three</option>
 </select>

Checks and radios

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

Checks

 <!-- Checks -->
  <div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
  <label class="form-check-label" for="flexCheckDefault">
    Default checkbox
  </label>
  </div>
  <div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" checked>
    <label class="form-check-label" for="flexCheckChecked">
      Checked checkbox
    </label>
  </div>

Indeterminate

Checkboxes can utilize the :indeterminate pseudo class when manually set via JavaScript (there is no available HTML attribute for specifying it).

 <!-- Checks -->
  <div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
  <label class="form-check-label" for="flexCheckDefault">
    Default checkbox
  </label>
  </div>
  <div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" checked>
    <label class="form-check-label" for="flexCheckChecked">
      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.

<!-- disabled -->
                                        <div class="form-check">
                                          <input class="form-check-input" type="checkbox" value="" id="flexCheckDisabled" disabled>
                                          <label class="form-check-label" for="flexCheckDisabled">
                                            Disabled checkbox
                                          </label>
                                        </div>
                                        <div class="form-check">
                                          <input class="form-check-input" type="checkbox" value="" id="flexCheckCheckedDisabled" checked disabled>
                                          <label class="form-check-label" for="flexCheckCheckedDisabled">
                                            Disabled checked checkbox
                                          </label>
                                        </div>

Radios

<!-- radio-->
 <div class="form-check">
   <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
   <label class="form-check-label" for="flexRadioDefault1">
     Default radio
   </label>
 </div>
 <div class="form-check">
   <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked>
   <label class="form-check-label" for="flexRadioDefault2">
     Default 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.

<!-- disabled -->
  <div class="form-check">
<input class="form-check-input" type="radio" name="flexRadioDisabled" id="flexRadioDisabled" disabled>
<label class="form-check-label" for="flexRadioDisabled">
  Disabled radio
</label>
  </div>
  <div class="form-check">
<input class="form-check-input" type="radio" name="flexRadioDisabled" id="flexRadioCheckedDisabled" checked disabled>
<label class="form-check-label" for="flexRadioCheckedDisabled">
  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. Consider using role="switch" to more accurately convey the nature of the control to assistive technologies that support this role. In older assistive technologies, it will simply be announced as a regular checkbox as a fallback. Switches also support the disabled attribute.

<!-- Switches -->
 <div class="form-check form-switch mb-2">
    <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
    <label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox input</label>
  </div>
  <div class="form-check form-switch  mb-2">
    <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckChecked" checked>
    <label class="form-check-label" for="flexSwitchCheckChecked">Checked switch checkbox input</label>
  </div>
  <div class="form-check form-switch  mb-2">
    <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDisabled" disabled>
    <label class="form-check-label" for="flexSwitchCheckDisabled">Disabled switch checkbox input</label>
  </div>
  <div class="form-check form-switch">
    <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckCheckedDisabled" checked disabled>
    <label class="form-check-label" for="flexSwitchCheckCheckedDisabled">Disabled checked switch checkbox input</label>
  </div>

Validation states

It provides valuable, actionable feedback to your users with HTML5 form validation.

Looks good!
Looks good!
@
Please choose a username.
Please provide a valid city.
Please select a valid state.
Please provide a valid zip.
You must agree before submitting. 
<!-- Validation Form -->
  <form class="row g-3 needs-validation" novalidate>
  <div class="col-md-4">
    <label for="validationCustom01" class="form-label">First name</label>
    <input type="text" class="form-control" id="validationCustom01" value="Mark" required>
    <div class="valid-feedback">
      Looks good!
    </div>
  </div>
  <div class="col-md-4">
    <label for="validationCustom02" class="form-label">Last name</label>
    <input type="text" class="form-control" id="validationCustom02" value="Otto" required>
    <div class="valid-feedback">
      Looks good!
    </div>
  </div>
  <div class="col-md-4">
    <label for="validationCustomUsername" class="form-label">Username</label>
    <div class="input-group has-validation">
      <span class="input-group-text" id="inputGroupPrepend">@</span>
      <input type="text" class="form-control" id="validationCustomUsername" aria-describedby="inputGroupPrepend" required>
      <div class="invalid-feedback">
        Please choose a username.
      </div>
    </div>
  </div>
  <div class="col-md-6">
    <label for="validationCustom03" class="form-label">City</label>
    <input type="text" class="form-control" id="validationCustom03" required>
    <div class="invalid-feedback">
      Please provide a valid city.
    </div>
  </div>
  <div class="col-md-3">
    <label for="validationCustom04" class="form-label">State</label>
    <select class="form-select" id="validationCustom04" required>
      <option selected disabled value="">Choose...</option>
      <option>...</option>
    </select>
    <div class="invalid-feedback">
      Please select a valid state.
    </div>
  </div>
  <div class="col-md-3">
    <label for="validationCustom05" class="form-label">Zip</label>
    <input type="text" class="form-control" id="validationCustom05" required>
    <div class="invalid-feedback">
      Please provide a valid zip.
    </div>
  </div>
  <div class="col-12">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
      <label class="form-check-label" for="invalidCheck">
        Agree to terms and conditions
      </label>
      <div class="invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
  <div class="col-12">
    <button class="btn btn-primary" type="submit">Submit form</button>
  </div>
</form>

Disabled & Readonly Fields

Use readonly or disabled attributes for .form-control

Disabled fieldset example 
<!-- Disabled Input -->
  <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>

Range

Create custom <input type="range"> controls with .custom-range. The track (the background) and thumb (the value) are both styled to appear the same across browsers. As only IE and Firefox support “filling” their track from the left or right of the thumb as a means to visually indicate progress, we do not currently support it.

 <!-- range -->
<label for="customRange1" class="form-label">Example range</label>
<input type="range" class="form-range" id="customRange1">

Disabled

Add the disabled boolean attribute on an input to give it a grayed out appearance and remove pointer events.

<!-- Disabled -->
<label for="disabledRange" class="form-label">Disabled range</label>
<input type="range" class="form-range" id="disabledRange" disabled>

Mix and max

Add the disabled boolean attribute on an input to give it a grayed out appearance and remove pointer events.

<!-- mix and max range -->
 <label for="customRange2" class="form-label">Example range</label>
 <input type="range" class="form-range" min="0" max="5" id="customRange2">

Steps

By default, range inputs “snap” to integer values. To change this, you can specify a step value. In the example below, we double the number of steps by using step="0.5".

<!-- Steps -->
<label for="customRange3" class="form-label">Example range</label>
<input type="range" class="form-range" min="0" max="5" step="0.5" id="customRange3">