Basic Forms

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.

Preview
HTML

Text

Password

Helper text Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.

Select (Optional)

Multiple select

Textarea

<form>
  <div class="mb-3">
    <label class="form-label" for="exampleFormControlInput1">Text</label>
    <input type="text" id="exampleFormControlInput1" class="form-control" placeholder="John Doe">
  </div>

  <div class="mb-3">
    <label class="form-label" for="exampleFormControlTitleInput">Text</label>
    <input type="text" id="exampleFormControlTitleInput" class="form-control form-control-title" placeholder="John Doe">
  </div>

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

  <div class="mb-3">
    <label class="form-label">Helper text</label>
    <input type="password" class="form-control" value="**********">
    <span class="form-text">Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.</span>
  </div>

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

  <div class="mb-3">
    <label class="form-label" for="exampleFormControlSelect1">Select <span class="form-label-secondary">(Optional)</span></label>
    <select id="exampleFormControlSelect1" class="form-control">
      <option>Choose an option</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>

  <div class="mb-3">
    <label class="form-label" for="exampleFormControlSelect2">Multiple select</label>
    <select id="exampleFormControlSelect2" class="form-control" size="3" multiple>
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>

  <div class="mb-3">
    <label class="form-label" for="exampleFormControlTextarea1">Textarea</label>
    <textarea id="exampleFormControlTextarea1" class="form-control" placeholder="Textarea field" rows="4"></textarea>
  </div>
</form>

Sizing

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

Preview
HTML

<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">

Form select

Custom <select> menus need only a custom class, .form-select to trigger the custom styles. Custom styles are limited to the <select>’s initial appearance and cannot modify the <option>s due to browser limitations.

Preview
HTML

<!-- Select -->
<select class="form-select">
  <option selected="">Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>
<!-- End Select -->

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

Preview
HTML

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

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

Upload file

<input type="file" id="customFileEg1" class="form-control">

<div class="form-attachment-btn btn btn-sm btn-primary">Upload file
  <input type="file" class="form-attachment-btn-label" id="fileUploader">
</div>

Range input

Create custom <input type="range"> controls with .form-range.

Preview
HTML

<input type="range" class="form-range" id="customRange1">

Disabled & Readonly Fields

Use readonly or disabled attributes for .form-control

Preview
HTML

Readonly plain text

Readonly field

<div class="row mb-3">
  <label class="col-sm-3 col-form-label">Readonly plain text</label>
  <div class="col-sm-9">
    <input type="text" class="form-control-plaintext" value="email@example.com" readonly>
  </div>
</div>

<div class="row">
  <label class="col-sm-3 col-form-label">Readonly field</label>
  <div class="col-sm-9">
    <input type="text" class="form-control" value="Read only" readonly>
  </div>
</div>

Preview
HTML

Disabled input

Disabled select

Disabled textarea

Disabled file input

Disabled range input

<div class="mb-3">
  <label class="form-label">Disabled input</label>
  <input type="text" class="form-control" placeholder="Disabled input" disabled>
</div>

<div class="mb-3">
  <label class="form-label">Disabled select</label>
  <select class="form-select" disabled>
    <option>Choose an option</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
  </select>
</div>

<div class="mb-3">
  <label class="form-label">Disabled textarea</label>
  <textarea class="form-control" placeholder="Disabled textarea" disabled></textarea>
</div>

<div class="mb-3">
  <label class="form-label">Disabled file input</label>
  <input type="file" id="customFileEg2" class="form-control" disabled>
</div>

<div class="mb-3">
  <label class="form-label">Disabled range input</label>
  <input type="range" class="form-range" value="3" min="0" max="10" disabled>
</div>

Validation states

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

Preview
HTML

<form>
  <div class="mb-3">
    <label for="validationValidInput1">Valid input</label>
    <input type="text" class="form-control is-valid" id="validationValidInput1" placeholder="Placeholder">
  </div>

  <div class="mb-3">
    <label for="validationValidSelect1">Valid select</label>
    <select class="form-select is-valid" id="validationValidSelect1">
      <option>Choose an option</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
    <span class="valid-feedback">Valid feedback</span>
  </div>

  <div class="mb-3">
    <label for="validationValidTextarea1">Valid textarea</label>
    <textarea class="form-control is-valid" placeholder="Textarea field" id="validationValidTextarea1" rows="4"></textarea>
  </div>

  <div class="mb-3">
    <label for="validationValidFileInput1">Valid file input</label>
    <input type="file" id="validationValidFileInput1" class="form-control is-valid">
  </div>
</form>

Preview
HTML

<form>
  <div class="mb-3">
    <label for="validationInvalidInput1">Valid input</label>
    <input type="text" class="form-control is-invalid" id="validationInvalidInput1" placeholder="Placeholder">
  </div>

  <div class="mb-3">
    <label for="validationInvalidSelect1">Valid select</label>
    <select class="form-select is-invalid" id="validationInvalidSelect1">
      <option>Choose an option</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
    <span class="invalid-feedback">Valid feedback</span>
  </div>

  <div class="mb-3">
    <label for="validationInvalidTextarea1">Valid textarea</label>
    <textarea class="form-control is-invalid" placeholder="Textarea field" id="validationInvalidTextarea1" rows="4"></textarea>
  </div>

  <div class="mb-3">
    <label for="validationInvalidFileInput1">Valid file input</label>
    <input type="file" id="validationInvalidFileInput1" class="form-control is-invalid">
  </div>
</form>

Validation methods

Parameters	Description
`data-hs-validation-equal-field`	The validator uses an element selector to compare the values of the current field and the field that was passed in as the selector.
`data-hs-validation-validate-class`	Attribute added to parent input element, instead of which validation classes will be added to customize styles. Make sure there is only one input inside the element with `data-hs-validation-validate-class`