Text field

Bootstrap 5 Text fields component

Give textual form controls like <input>s and <textarea>s an upgrade with custom styles, sizing, focus states, and more.

Basic TextField

Using the .form-control class on the <input> element.

<input type="text" class="form-control" placeholder="Click here to input..." />

Disabled

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

<input class="form-control" type="text" placeholder="can't touch this..."
 aria-label="disabled input example" disabled />

Readonly

Add the readonly boolean attribute on an input to prevent modification of the input’s value. readonly inputs can still be focused and selected, while disabled inputs cannot.

<input class="form-control" type="text" value="Is read only..."
 aria-label="readonly input example" readonly />

Readonly plain text

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

<div class="mb-3 row">
  <label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
  <div class="col-sm-10">
    <input type="text" readonly class="form-control-plaintext" id="staticEmail" value="[email protected]">
  </div>
</div>
<div class="mb-3 row">
  <label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
  <div class="col-sm-10">
    <input type="password" class="form-control" id="inputPassword">
  </div>
 </div>

Sizes

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

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

Validation

Use the .is-invalid and is-valid shows the error and success state for the text input.

<form class="was-validated">
  <div class="mb-3">
    <label for="validationDefault01" class="form-label">First name</label>
    <input type="text" class="form-control is-invalid" id="validationDefault01" required />
    <div class="invalid-feedback">This field is required.</div>
  </div>
  <div>
    <label for="validationDefault02" class="form-label">Last name</label>
    <input type="text" class="form-control is-valid" id="validationDefault02" />
    <div class="valid-feedback">Field validation is successful.</div>
  </div>
</form>

See more information about how to validation at the Validation section.

Input types

The <input> element support for all HTML5 types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.

File input

Set the type="file" to the <input>.

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

Color input

Set the type="color" and add .form-control-color to the <input>. We use the modifier class to set fixed heights and override some inconsistencies between browsers.

<label for="exampleColorInput" class="form-label">Color picker</label>
<input type="color" class="form-control form-control-sm form-control-color"
 id="exampleColorInput" value="#8777d9" title="Choose your color">

You can use form-control-sm or .form-control-lg to change its sizes.

Email input

The input field type="email" defines the email address field. The input value is automatically validated to ensure that it is a properly formatted email address.

<input type="email" class="form-control" placeholder="Email input" />

Password input

The input field type="password" defines a password field, thus hiding characters as confidential information.

<input type="password" class="form-control" placeholder="Password input" />

Number input

The input type="number" defines field for entering a number.

<input type="number" class="form-control" placeholder="Number input" />

Phone number input

The input type="tel" defines a field for entering a telephone number.

<input type="tel" class="form-control" placeholder="Phone number input" />

URL input

The input type="url" defines a field for entering a URL.

<input type="url" class="form-control" placeholder="Url input" />

Multiline input

A textarea tag lets a user input a longer amount of text than a standard text field input.

<textarea class="form-control" id="textAreaExample" rows="3" placeholder="Add a message here"></textarea>

Datalist Input

Datalists allow you to create a group of <option>s that can be accessed (and autocompleted) from within an <input>. These are similar to <select> elements, but come with more menu styling limitations and differences.

While most browsers and operating systems include some support for <datalist> elements, their styling is inconsistent at best. Learn more about support for datalist elements.

<label for="exampleDataList" class="form-label">Datalist example</label>
<input class="form-control" list="datalistOptions" id="exampleDataList" placeholder="Type to search...">
<datalist id="datalistOptions">

  <option value="San Francisco">
  <option value="New York">
  <option value="Seattle">
  <option value="Los Angeles">
  <option value="Chicago">
</datalist>

Accessibility

• Avoid using placeholder text whenever possible. Make sure any critical information is communicated either in the field label or using helper text below the field. Search fields or brief examples are the only exceptions where placeholder text is OK.