Form Controls

Example

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

Preview

Email address

Example textarea

HTML

<div class="mb-3">
  <label for="exampleFormControlInput1" class="form-label">Email address</label>
  <input
    type="email"
    class="form-control"
    id="exampleFormControlInput1"
    placeholder="[email protected]"
  />
</div>
<div class="mb-3">
  <label for="exampleFormControlTextarea1" class="form-label"
    >Example textarea</label
  >
  <textarea
    class="form-control"
    id="exampleFormControlTextarea1"
    rows="3"
  ></textarea>
</div>

Sizing

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

Preview

HTML

<input
  class="form-control form-control-lg my-2"
  type="text"
  placeholder=".form-control-lg"
  aria-label=".form-control-lg example"
/>
<input
  class="form-control my-2"
  type="text"
  placeholder="Default input"
  aria-label="default input example"
/>
<input
  class="form-control form-control-sm my-2"
  type="text"
  placeholder=".form-control-sm"
  aria-label=".form-control-sm example"
/>

Disabled & ReadOnly

Add the disabled boolean attribute on an input to give it a grayed out appearance and remove pointer events.
Add the readonly boolean attribute on an input to prevent modification of the input’s value.

Preview

HTML

<input
  class="form-control my-2"
  type="text"
  placeholder="Disabled input"
  aria-label="Disabled input example"
  disabled
/>
<input
  class="form-control my-2"
  type="text"
  value="Readonly input here..."
  aria-label="readonly input example"
  readonly
/>
<input
  class="form-control my-2"
  type="text"
  value="Disabled readonly input"
  aria-label="Disabled input example"
  disabled
  readonly
/>

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

Preview

Vertical

Password

Horizontal

HTML

<h5>Vertical</h5>
<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>
<h5>Horizontal</h5>
<form class="row g-3">
  <div class="col-auto">
    <label for="staticEmail2" class="visually-hidden">Email</label>
    <input
      type="text"
      readonly
      class="form-control-plaintext"
      id="staticEmail2"
      value="[email protected]"
    />
  </div>
  <div class="col-auto">
    <label for="inputPassword2" class="visually-hidden">Password</label>
    <input
      type="password"
      class="form-control"
      id="inputPassword2"
      placeholder="Password"
    />
  </div>
  <div class="col-auto">
    <button type="submit" class="btn btn-primary mb-3">Confirm identity</button>
  </div>
</form>

Color

Preview

Color picker

HTML

<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"
/>

Datalists

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.

Preview

Datalist example

HTML

<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>
  <option value="New York"></option>
  <option value="Seattle"></option>
  <option value="Los Angeles"></option>
  <option value="Chicago"></option>
</datalist>

File input

Preview

Default file input example

Multiple files input example

Disabled file input example

Small file input example

Large file input example

HTML

<div class="mb-3">
  <label for="formFile" class="form-label">Default file input example</label>
  <input class="form-control" type="file" id="formFile" />
</div>
<div class="mb-3">
  <label for="formFileMultiple" class="form-label"
    >Multiple files input example</label
  >
  <input class="form-control" type="file" id="formFileMultiple" multiple />
</div>
<div class="mb-3">
  <label for="formFileDisabled" class="form-label"
    >Disabled file input example</label
  >
  <input class="form-control" type="file" id="formFileDisabled" disabled />
</div>
<div class="mb-3">
  <label for="formFileSm" class="form-label">Small file input example</label>
  <input class="form-control form-control-sm" id="formFileSm" type="file" />
</div>
<div>
  <label for="formFileLg" class="form-label">Large file input example</label>
  <input class="form-control form-control-lg" id="formFileLg" type="file" />
</div>

About Privacy Contact