Forms

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

Overview

Below are components for forms (input fields, sliders, chips, help text, error management). However, note that buttons are in the “Buttons” section, menu-buttons are in the “Drop-downs” section and pickers are in the “Pickers” section.

Bootstrap’s form controls expand on our Rebooted form styles with classes. Use these classes to opt into their customized displays for a more consistent rendering across browsers and devices.

Be sure to use an appropriate type attribute on all inputs (e.g., email for email address or number for numerical information) to take advantage of newer input controls like email verification, number selection, and more.

Inputs

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.

<form>
  <div class="form-group">
    <label for="inputEmail1">Example label</label>
    <div class="form-control-container ">
  <input type="email" class="form-control " id="inputEmail1" title="Example input" placeholder="Example input" >
  <span class="form-control-state"></span>
</div>

  </div>
  <div class="form-group">
    <label for="textarea1">Example textarea</label>
    <div class="form-control-container">
  <textarea class="form-control " id="textarea1" placeholder="Example textarea" ></textarea>
  <span class="form-control-state"></span>
</div>

  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Input small

<form>
  <div class="form-group">
    <label for="inputSmall1">Small input</label>
    <div class="form-control-container ">
  <input type="email" class="form-control form-control-sm" id="inputSmall1" title="Small input" placeholder="Small input" >
  <span class="form-control-state"></span>
</div>

  </div>
</form>

Inputs with icon

Use .has-left-icon class on .form-control element. Then use .form-control-icon element with an fonticon element inside.

<div class="form-control-container has-left-icon">
  <input type="" class="form-control " id="inputIcon1" title="Example for auto-completion" placeholder="Example for auto-completion" >
  <span class="form-control-state"></span>
  <span class="form-control-icon"><i class="icons-search"></i></span>

</div>

Readonly inputs

Add the readonly boolean attribute on an input to prevent modification of the input’s value.

<label for="readonly1">Readonly input</label>
<div class="form-control-container ">
  <input type="text" class="form-control " id="readonly1" title="Readonly input here..." placeholder="Readonly input here..." readonly>
  <span class="form-control-state"></span>
</div>
<label for="readonly2">Readonly textarea</label>
<div class="form-control-container">
  <textarea class="form-control " id="readonly2" placeholder="Readonly textarea here..." readonly></textarea>
  <span class="form-control-state"></span>
</div>

Required inputs

Add the required boolean attribute on an input.

For accessibility reasons, you have to put indication on * signification before any occurence of required fields.

Fields marked with * are required.

<p class="mt-3">Fields marked with * are required.</p>
<label for="required1" class="required">Required input</label>
<div class="form-control-container ">
  <input type="text" class="form-control " id="required1" title="Required input here..." placeholder="Required input here..." required>
  <span class="form-control-state"></span>
</div>

Input with clear option

The clear text behavior is made of javascript. Use data-component="control" with data-clear-option="true" to enable it. Don’t forget to add the button element.

<div class="form-control-container" data-component="control" data-clear-option="true">
  <input class="form-control clear-option " id="readonly2" title="Search..." placeholder="Search..." data-role="input">
  <span class="form-control-state"></span>
  <button type="button" class="btn-clear btn-primary d-none" data-btn="clear">
    <span class="sr-only">Clear text</span>
    <i class="icons-close" aria-hidden="true"></i>
  </button>
</div>

Input for standardized data

In some cases, fields can contain standardized data. Unmodifiable characters can be taken out of the input area, and the display varies depending on the data.

Numéro de transfert
TX
<fieldset>
  <legend class="text-base font-weight-medium mb-2">Numéro de transfert</legend>
  <div class="row align-items-center">
    <div class="col-4">
      <div class="form-control-container">
        <input class="form-control" type="text" maxlength="4" title="4 premiers caractères">
        <span class="form-control-state"></span>
      </div>
    </div>
    <div class="col-1 text-center font-weight-medium">
      TX
    </div>
    <div class="col-4">
      <div class="form-control-container">
        <input class="form-control" type="text" maxlength="4" title="4 derniers caractères après TX">
        <span class="form-control-state"></span>
      </div>
    </div>
  </div>
</fieldset>

Textarea options

Auto sizing

Add a stretchy class on textarea element.

<label for="stretchyTextarea1">Auto sizing textarea</label>
<div class="form-control-container">
  <textarea class="form-control stretchy" id="stretchyTextarea1" placeholder="Auto sizing" ></textarea>
  <span class="form-control-state"></span>
</div>

Textarea with counter

0/200 caractères
<div class="form-control-container" data-component="control">
  <label for="countTextarea1">Character counter</label>
  <textarea class="form-control stretchy " id="countTextarea1" placeholder="Character counter" data-role="input" aria-describedby="charcounter">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex illum aliquid, quis, labore sed ullam porro quam dolor error enim fuga et. Ratione assumenda, facilis illum placeat eligendi animi architecto.</textarea>
  <span class="form-control-state"></span>
</div>
<div class="mt-2 font-weight-medium" data-role="counter" data-limit="200" id="charcounter"><span data-role="counter-value">0</span>/200 caractères</div>

Multi-line text field with a toolbar

We recommend limiting toolbars to one line and putting secondary tools in a context menu if needed.

<div class="form-group">
  <label for="exampleFormControlTextarea3">Example textarea</label>
  <div class="form-toolbar">
    <div class="form-toolbar-content">
      <button type="button" class="form-toolbar-item">
        <span class="sr-only">Bold</span>
        <i class="icons-toolbar-bold" aria-hidden="true"></i>
      </button>
      <button type="button" class="form-toolbar-item">
        <span class="sr-only">Italic</span>
        <i class="icons-toolbar-italic" aria-hidden="true"></i>
      </button>
      <button type="button" class="form-toolbar-item">
        <span class="sr-only">Underline</span>
        <i class="icons-toolbar-underline" aria-hidden="true"></i>
      </button>
      <span class="form-toolbar-separator"></span>
      <button type="button" class="form-toolbar-item">
        <span class="sr-only">Text align left</span>
        <i class="icons-toolbar-left icons-size-1x25" aria-hidden="true"></i>
      </button>
      <button type="button" class="form-toolbar-item">
        <span class="sr-only">Text align center</span>
        <i class="icons-toolbar-center icons-size-1x25" aria-hidden="true"></i>
      </button>
      <button type="button" class="form-toolbar-item">
        <span class="sr-only">List</span>
        <i class="icons-toolbar-list icons-size-1x25" aria-hidden="true"></i>
      </button>
    </div>
    <div class="form-toolbar-right">
      <div class="btn-group dropdown">
        <button type="button" class="btn btn-options dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <i class="icons-options icons-size-1x75" aria-hidden="true"></i>
        </button>
        <div class="dropdown-menu dropdown-menu-right">
          <button class="dropdown-item" type="button">Option 1</button>
          <button class="dropdown-item" type="button">Option 2</button>
          <button class="dropdown-item" type="button">Option 3</button>
        </div>
      </div>
    </div>
  </div>
  <div class="form-control-container">
    <textarea id="exampleFormControlTextarea3" class="form-control" title="Comment" placeholder="Comment"></textarea>
    <span class="form-control-state"></span>
  </div>
</div>

Range slider

Sliders let users define and adjust a value or a range along a pre-defined span of values. There are two types of sliders: single-value and dual-point. When necessary, display a minimum and maximum value at each end of the line.

With a slider, users can choose an approximate value, i.e., a value considered to be relative.

<div class="range-slider" data-component="range-slider" data-target="#range_01">
  <i class="icons-interrogation icons-size-1x25 pr-2" aria-hidden="true"></i>
  <div id="range_01" data-min="25" data-max="125" data-hide-from-to="true">
  </div>
  <i class="icons-interrogation icons-size-1x25 pl-2" aria-hidden="true"></i>
</div>
25
125
<div class="range-slider" data-component="range-slider" data-target="#range_02">
  <span class="d-inline-block pr-2">25</span>
  <div id="range_02" data-min="25" data-max="125" data-type="double" data-from="50" data-to="100">
  </div>
  <span class="d-inline-block pl-2">125</span>
</div>
25
125
<div class="range-slider is-disabled" data-component="range-slider" data-target="#range_03">
  <span class="d-inline-block pr-2">25</span>
  <div id="range_03" data-min="25" data-max="125" data-type="double" data-from="50" data-to="100">
  </div>
  <span class="d-inline-block pl-2">125</span>
</div>

Chips

Chips are compact components that appear after entering or selecting items as tags in a field. They can be used for various item types (contacts, concepts, etc.) and are predefined or can be adjusted for specific needs.

Mathéo Mercier
<div role="list">
  <div class="chips-group" role="listitem">
    <span class="chips chips-label">Mathéo Mercier</span>
    <button type="button" class="chips chips-btn chips-only-icon">
      <span class="sr-only">Remove Mathéo Mercier</span>
      <i class="icons-close" aria-hidden="true"></i>
    </button>
  </div>
</div>
<label class="font-weight-medium mb-2" for="addreceivers1">Add receivers</label>
<div class="form-control-container form-chips-container" data-component="chips">
  <input data-role="typewriter" type="text" class="chips-input stretchy" id="addreceivers1" />
  <label class="font-weight-medium mb-2 sr-only" for="receivers1">Receivers</label>
  <select class="sr-only" data-role="input" tabindex="-1" aria-hidden="true" id="receivers1" multiple>
    <option selected>Sem Inceptos Tellus</option>
    <option>Amet Porta</option>
    <option selected>Pharetra Fusce Venenatis</option>
  </select>
</div>

Alternatives to hidden labels

Assistive technologies such as screen readers will have trouble with your forms if you don’t include a label for every input. For these inline forms, you can hide the labels using the .sr-only class. There are further alternative methods of providing a label for assistive technologies, such as the aria-label, aria-labelledby or title attribute. If none of these are present, assistive technologies may resort to using the placeholder attribute, if present, but note that use of placeholder as a replacement for other labelling methods is not advised.

Help text

Inside field

You can precise what do you expect directly inside the input field with placeholder="Help text". The placeholder disappear when you enter a character.

<label class="font-weight-medium mb-2" for="inputPassword4">Password</label>
<div class="form-control-container">
  <input type="password" id="inputPassword4" class="form-control" title="Password must be 50 characters long, and contain emojis"  placeholder="Password must be 50 characters long, and contain emojis">
  <span class="form-control-state"></span>
</div>

Outside field

Block-level help text in forms can be created using .form-text (previously known as .help-block in v3). Inline help text can be flexibly implemented using any inline HTML element and utility classes like .text-muted.

Associating help text with form controls

Help text should be explicitly associated with the form control it relates to using the aria-describedby attribute. This will ensure that assistive technologies—such as screen readers—will announce this help text when the user focuses or enters the control.

Help text below inputs can be styled with .form-text. This class includes display: block and adds some top margin for easy spacing from the inputs above.

Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
<label class="font-weight-medium mb-2" for="inputPassword5">Password</label>
<div class="form-control-container">
  <input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock" title="Password">
  <span class="form-control-state"></span>
</div>
<small id="passwordHelpBlock" class="form-text text-muted">
  Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
</small>

Inline text can use any typical inline HTML element (be it a <small>, <span>, or something else) with nothing more than a utility class.

Must be 8-20 characters long.
<form class="form-inline">
  <div class="form-group">
    <label class="font-weight-medium" for="inputPassword6">Password</label>
    <div class="form-control-container mx-sm-3">
      <input type="password" id="inputPassword6" class="form-control" aria-describedby="passwordHelpInline" title="Password">
      <span class="form-control-state"></span>
    </div>
    <small id="passwordHelpInline" class="text-muted">
      Must be 8-20 characters long.
    </small>
  </div>
</form>

Validation

Provide valuable, actionable feedback to your users with HTML5 form validation–available in all our supported browsers. Choose from the browser default validation feedback, or implement custom messages with our built-in classes and starter JavaScript.

We highly recommend pouet custom validation styles as native browser defaults are not announced to screen readers.

The checkmarks are not mandatory (and even not included in SNCF’s guidelines), but it is a interesting way to show users that a field is validated. Use it if you want.

Server side

We recommend using client side validation, but in case you require server side, you can indicate invalid form fields with .is-invalid. Note that .invalid-feedback is also supported with these classes.

Please choose a username.
Please provide a valid city.
<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label class="font-weight-medium mb-2 required" for="validationCustom01">First name</label>
      <div class="form-control-container">
        <input type="text" class="form-control" id="validationCustom01" placeholder="First name" value="Mark" required>
        <span class="form-control-state"></span>
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label class="font-weight-medium mb-2 required" for="validationCustom02">Last name</label>
      <div class="form-control-container">
        <input type="text" class="form-control" id="validationCustom02" placeholder="Last name" value="Otto" required>
        <span class="form-control-state"></span>
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label class="font-weight-medium mb-2 required" for="validationCustomUsername">Username</label>
      <div class="form-control-container is-invalid">
        <input type="text" class="form-control" id="validationCustomUsername" placeholder="Username" aria-describedby="inputGroupPrepend" required>
        <span class="form-control-state"></span>
      </div>
      <div class="invalid-feedback" id="inputGroupPrepend">
        Please choose a username.
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label class="font-weight-medium mb-2 required" for="validationCustom03">City</label>
      <div class="form-control-container is-invalid">
        <input type="text" class="form-control" id="validationCustom03" placeholder="City" aria-describedby="inputGroupPrepend2" required>
        <span class="form-control-state"></span>
      </div>
      <div class="invalid-feedback" id="inputGroupPrepend2">
        Please provide a valid city.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

Error message

Oouups ! Vous avez une erreur

  • Veuillez vérifier l'adresse email saisie
Please provide a valid city.
<form class="needs-validation" novalidate>
  <div class="form-error mb-3">
    <h2 class="text-white text-uppercase">Oouups ! Vous avez une erreur</h2>
    <ul class="mt-1 mb-0">
      <li>Veuillez vérifier l'adresse email saisie</li>
    </ul>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label class="font-weight-medium mb-2 required" for="validationCustom03">City</label>
      <div class="form-control-container is-invalid">
        <input type="text" class="form-control" id="validationCustom03" placeholder="City" aria-describedby="iputGroupPrepend3" required>
        <span class="form-control-state"></span>
      </div>
      <div class="invalid-feedback" id="iputGroupPrepend3">
        Please provide a valid city.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

Browser defaults

Not interested in custom validation feedback messages or writing JavaScript to change form behaviors? All good, you can use the browser defaults. Try submitting the form below. Depending on your browser and OS, you’ll see a slightly different style of feedback.

While these feedback styles cannot be styled with CSS, you can still customize the feedback text through JavaScript.

<form>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label class="font-weight-medium mb-2 required" for="validationDefault01">First name</label>
      <div class="form-control-container">
        <input type="text" class="form-control" id="validationDefault01" placeholder="First name" value="Mark" required>
        <span class="form-control-state"></span>
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label class="font-weight-medium mb-2 required" for="validationDefault02">Last name</label>
      <div class="form-control-container">
        <input type="text" class="form-control" id="validationDefault02" placeholder="Last name" value="Otto" required>
        <span class="form-control-state"></span>
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label class="font-weight-medium mb-2 required" for="validationDefaultUsername">Username</label>
      <div class="form-control-container">
        <input type="text" class="form-control" id="validationDefaultUsername" placeholder="Username" required>
        <span class="form-control-state"></span>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label class="font-weight-medium mb-2 required" for="validationDefault03">City</label>
      <div class="form-control-container">
        <input type="text" class="form-control" id="validationDefault03" placeholder="City" required>
        <span class="form-control-state"></span>
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label class="font-weight-medium mb-2 required" for="validationDefault04">State</label>
      <div class="form-control-container">
        <input type="text" class="form-control" id="validationDefault04" placeholder="State" required>
        <span class="form-control-state"></span>
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label class="font-weight-medium mb-2 required" for="validationDefault05">Zip</label>
      <div class="form-control-container">
        <input type="text" class="form-control" id="validationDefault05" placeholder="Zip" required>
        <span class="form-control-state"></span>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="custom-control custom-checkbox mb-2 mr-sm-2">
      <input class="custom-control-input" type="checkbox" value="" id="invalidCheck2" required>
      <label class="custom-control-label font-weight-medium" for="invalidCheck2">Agree to terms and conditions</label>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>
Did you find what you’re looking for ? If not, please tell us .