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.

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.

type="text"

type="password"

type="email"

type="number"

...

<textarea>

Select fields

Readonly state

Add the readonly attribute on an input to prevent user input and to add specific style.

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 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 field -->
<select class="form-control">
  <option> ... </option>
</select>

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

<!-- Disabled state on the whole fieldset -->
<form>
  <fieldset disabled>
    ...
  </fieldset>
</form>