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 text field

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

<input type="text" class="form-control" placeholder="Default input" />

Sizes

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

<input class="form-control form-control-sm" type="text" placeholder="Small" />
<input class="form-control" type="text" placeholder="Normal" />
<input class="form-control form-control-lg" type="text" placeholder="Large" />

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="Disabled input"
 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="Readonly input here..."
 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="d-flex align-items-center">
  <label class="me-3 fw-semibold">Email:</label>
  <input type="text" readonly class="form-control-plaintext" value="[email protected]" />
</div>

With icons

Text fields can include elements before and after the input. This is useful for adding elements like icons or buttons into the text field.

Before input

Add an icon element with the .input-field-leading class inside the .input-field element.

<div class="input-field">
  <span class="input-field-leading"><i class="fas fa-user-circle"></i></span>
  <input type="text" class="form-control" />
</div>

After input

Add an icon element with the .input-field-trailing class inside the .input-field element.

<div class="input-field">
  <span class="input-field-trailing"><i class="fas fa-exclamation-triangle"></i></span>
  <input type="text" class="form-control" />
</div>

Validation

<form>
  <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.

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-color"
 id="exampleColorInput" value="#563d7c" title="Choose your color">

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.