Input fields, textareas and select fields

Input fields and text areas, or textboxes, are used to enter or edit text or numbers. Read more about textboxes in the UX Guidelines.

Use when

  • The user needs to enter or edit data.

Design

Inputs and textareas

Most common form control, text-based input fields. Includes support for all HTML5 types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel and color.





... 

					

<!-- Input field types -->



<input type="text" class="form-control" placeholder="Text input" name="textinput">




<input type="password" placeholder="Password" name="psw">




<input type="number" placeholder="Number" pattern="\d*" name="entry-size">




<input type="email" placeholder="Email" name="entry-email">



<!-- Textarea -->



<textarea class="form-control" rows="3"></textarea>

Select fields 

					


<select class="form-control">
  <option selected="selected">Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</select>

States

Readonly state

Add the readonly attribute on an input to prevent user input and to add specific style. If your background is white, you have the option to have a grey readonly input using .inverted class. 



					


<input type="text" readonly class="form-control" value="Readonly input here…" name="readonlyinput">




<textarea readonly class="form-control">Readonly input here…</textarea>

Disabled state

Add the disabled attribute on an input to prevent user input and trigger a slightly different look. You can also add it as class on each element that you need to be disabled from your form or add it as attribute or class to a <fieldset> to disable all the controls within the <fieldset> at once.

					


<input type="text" disabled class="form-control" placeholder="Text input" name="textinput">




<select class="form-control" disabled>
  <option> ... </option>
</select>



<!-- Disabled state on the whole fieldset -->



<form>
  <fieldset disabled>
    ...
  </fieldset>
</form>

Input group

Place one button or dropdown on either side of an input, and wrap those elements in a div with .input-group class.

We do not support multiple buttons on a single side, or multiple form-controls/inputs in a single input group.

Action 






					

<!-- Input group with button -->



<div class="input-group">
  <input type="text" class="form-control" placeholder="Text input" name="textinput" aria-describedby="basic-addon">
  <button type="button" id="basic-addon" class="btn">Action</button>
</div>



<!-- Input group with dropdown -->



<div class="input-group">
  <div class="dropdown">
    <button type="button" id="basic-addon" class="btn">Action</button>
    <ul class="dropdown-menu">
      ...
    </ul>
  </div>
  <input type="text" class="form-control" placeholder="Text input" name="textinput" aria-label="Text input">
</div>