Text inputs

Best practices

  • Use labels to indicate the type of information required. Labels should always be above the field and aligned to the left.
  • Add helper text where further clarification or rationale is required. It should always be below the field and aligned to the left.

If your text field requires specific formatting (such as character limits, valid email addresses, or phone numbers), try to prevent user error by only accepting certain values and using the correct input type attribute.

How it works

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

This email address will be used for logging in 
<div class="form-group">
  <label for="exampleFormControlInput1">Email address</label>
  <input type="email" class="form-control" id="exampleFormControlInput1">
  <small class="form-text text-muted">
    This email address will be used for logging in
  </small>
</div>

Sizing

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

In most cases the default sized form components should be used. Smaller sizing could be used in instances where there are space limitations or the form is not the main action on the page (a form within the footer or sidebar for instance).

<div class="form-group">
  <label for="inputSm">Small input</label>
  <input id="inputSm" class="form-control form-control-sm mb-2" type="text">
</div>
<div class="form-group">
  <label for="inputLg">Large input</label>
  <input id="inputLg" class="form-control form-control-lg" type="text">
</div>

Read-only

Add the readonly boolean attribute on an input to prevent modification of the input’s value. Read-only inputs appear lighter (just like disabled inputs), but retain the standard cursor.

<div class="form-group">
  <label for="readOnly">Read-only</label>
  <input id="readOnly" class="form-control" type="text" readonly>
</div>

Read-only plain text

If you want to have <input readonly> elements in your form styled as plain text, use the .form-control-plaintext class to remove the default form field styling and preserve the correct margin and padding.

<div class="form-group row">
  <label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
  <div class="col-sm-8">
    <input type="text" readonly class="form-control-plaintext" id="staticEmail" value="email@example.com">
  </div>
</div>
<div class="form-group row">
  <label for="inputUsername" class="col-sm-2 col-form-label">Username</label>
  <div class="col-sm-5">
    <input type="text" class="form-control" id="inputUsername">
  </div>
</div>