Input fields, textareas and select fields

Input fields and text areas, or textboxes, are used to enter or edit text or numbers.

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.

Example
HTML

<form class="form-horizontal">
	<div class="form-group">
		<label for="textinput" class="col-4">
			<code><span class="na">type=</span>"text"</code>
		</label>
		<div class="col-8">
			<input type="text" class="form-control" placeholder="Text input" name="textinput" id="textinput">
		</div>
	</div>

	<div class="form-group">
		<label for="passinput" class="col-4">
			<code><span class="na">type=</span>"password"</code>
		</label>
		<div class="col-8">
			<input type="password" class="form-control" placeholder="Password" name="psw" value="password" id="passinput">
		</div>
	</div>

	<div class="form-group">
		<label for="emailinput" class="col-4">
			<code><span class="na">type=</span>"email"</code>
		</label>
		<div class="col-8">
			<input type="email" class="form-control" placeholder="[email protected]" name="email" autocomplete="off" id="emailinput">
		</div>
	</div>

	<div class="form-group">
		<label for="numberinput" class="col-4">
			<code><span class="na">type=</span>"number"</code>
		</label>
		<div class="col-8">
			<input type="number" class="form-control" placeholder="Number input" id="numberinput">
		</div>
	</div>

	<div class="form-group py-16">
		<span class="col-md-2">...</span>
	</div>

	<div class="form-group">
		<label for="textarea" class="col-4">
			<code>&lt;textarea&gt;</code>
		</label>
		<div class="col-8">
			<textarea class="form-control" rows="3" placeholder="Textarea" id="textarea"></textarea>
		</div>
	</div>
</form>

<form class="form-horizontal">
	<div class="form-group">
		<label class="col-sm-3 control-label" for="Donec"><code>&lt;select&gt;</code></label>
		<div class="col-sm-7">
			<select class="form-control">
				<option selected="selected">Option 1</option>
				<option>Option 2</option>
				<option>Option 3</option>
				<option>Option 4</option>
				<option>Option 5</option>
			</select>
		</div>
	</div>
</form>

States

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.

Example
HTML

<form class="form-horizontal col-md-8">
	<fieldset disabled>
		<div class="form-group">
			<label for="inputTitle1" class="col-sm-3 control-label">Title</label>
			<div class="col-sm-9">
				<select class="form-control">
					<option selected="selected">Mr.</option>
					<option>Mrs</option>
					<option>Miss</option>
					<option>Lord</option>
					<option>Queen</option>
					<option>Prince</option>
				</select>
			</div>
		</div>
		<div class="form-group">
			<label for="inputName3" class="col-sm-3 control-label">Name</label>
			<div class="col-sm-9">
				<input type="text" class="form-control" id="inputName3" placeholder="Name">
			</div>
		</div>
		<div class="form-group">
			<label for="inputPassword3" class="col-sm-3 control-label">Password</label>
			<div class="col-sm-9">
				<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
			</div>
		</div>
		<div class="form-group">
			<div class="col-md-9 offset-md-3">
				<div class="checkbox">
					<input type="checkbox" id="checkbox1">
					<label class="checkmark" for="checkbox1">Remember me</label>
				</div>
			</div>
		</div>
		<div class="form-group">
			<div class="col-md-9 offset-md-3">
				<button type="submit" class="btn btn-secondary">Sign in</button>
			</div>
		</div>
	</fieldset>
</form>

If your background is white, you have the option to have a grey readonly input using .inverted class.

Example
HTML

<form class="form-horizontal col-md-8">
	<fieldset disabled>
		<div class="form-group">
			<label for="inputTitle1" class="col-sm-3 control-label">Title</label>
			<div class="col-sm-9">
				<select class="form-control">
					<option selected="selected">Mr.</option>
					<option>Mrs</option>
					<option>Miss</option>
					<option>Lord</option>
					<option>Queen</option>
					<option>Prince</option>
				</select>
			</div>
		</div>
		<div class="form-group">
			<label for="inputName3" class="col-sm-3 control-label">Name</label>
			<div class="col-sm-9">
				<input type="text" class="form-control inverted" id="inputName3" placeholder="Name">
			</div>
		</div>
		<div class="form-group">
			<label for="inputPassword3" class="col-sm-3 control-label">Password</label>
			<div class="col-sm-9">
				<input type="password" class="form-control inverted" id="inputPassword3" placeholder="Password">
			</div>
		</div>
		<div class="form-group">
			<div class="col-md-9 offset-md-3">
				<div class="checkbox">
					<input type="checkbox" id="checkbox1" class="inverted">
					<label class="checkmark" for="checkbox1">Remember me</label>
				</div>
			</div>
		</div>
		<div class="form-group">
			<div class="col-md-9 offset-md-3">
				<button type="submit" class="btn btn-secondary">Sign in</button>
			</div>
		</div>
	</fieldset>
</form>

Readonly state

Add the readonly attribute on an input to prevent user input. Readonly fields are displayed with a muted background and border to indicate they are not editable.

The <select> element does not natively support the readonly attribute. To prevent interaction, combine readonly with tabindex="-1". The styling is applied via CSS, but the browser will not enforce readonly behaviour on its own.

Example
HTML

<form class="form-horizontal">
	<div class="form-group">
		<label for="readonlyField" class="col-6">
			<code><span class="nt">&lt;input</span> <span class="na">type=</span>"text" readonly<span class="nt">&gt;</span></code>
		</label>
		<div class="col-6">
			<input class="form-control" type="text" value="Readonly input here..." readonly id="readonlyField">
		</div>
	</div>

	<div class="form-group">
		<label for="readonlySelect" class="col-6">
			<code><span class="nt">&lt;select</span> readonly<span class="nt">&gt;</span></code>
		</label>
		<div class="col-6">
			<select class="form-control" tabindex="-1" readonly id="readonlySelect">
				<option selected="selected">Readonly option</option>
				<option>Option 2</option>
				<option>Option 3</option>
			</select>
		</div>
	</div>

	<div class="form-group">
		<label for="readonlyTextarea" class="col-6">
			<code><span class="nt">&lt;textarea</span> readonly<span class="nt">&gt;</span><span class="nt">&lt;/textarea&gt;</span></code>
		</label>
		<div class="col-6">
			<textarea class="form-control" readonly id="readonlyTextarea">Readonly textarea here... Lorem ipsum dolor sit amet, consectetur adipiscing elit.</textarea>
		</div>
	</div>
</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.

Example
HTML

Action

<div class="input-group">
	<a href="#!" class="btn" id="basic-addon">Action</a>
	<input type="text" class="form-control" placeholder="Text input..." aria-describedby="basic-addon" aria-label="Basic addon example 1">
</div>
<br><br>
<div class="input-group">
	<input type="text" class="form-control" placeholder="Text input..." aria-describedby="basic-addon2" aria-label="Basic addon example 2">
	<button type="button" class="btn" id="basic-addon2">Action</button>
</div>
<br><br>
<div class="input-group">
	<div class="dropdown">
		<button type="button" class="btn dropdown-toggle" id="exampleInput52">Default action</button>
		<ul class="dropdown-menu">
			<li class="dropdown-item"><a href="#!">Item 1</a></li>
			<li class="dropdown-item active"><a href="#!">Item 2, with a loooong label</a></li>
			<li class="dropdown-item disabled"><a href="#!" tabindex="-1" aria-disabled="true">Item 3</a></li>
			<li class="dropdown-item"><a href="#!">Item 4</a></li>
			<li class="dropdown-item active"><a href="#!" aria-selected="true">Item 5</a></li>
		</ul>
	</div>
	<input type="text" class="form-control" placeholder="Text input..." aria-label="Input..." aria-labelledby="exampleInput52">
</div>
<br><br>
<form class="form-horizontal">
	<div class="form-group">
		<label class="control-label col-sm-3" for="exampleInput53">Default input</label>
		<div class="input-group col-sm-9">
			<input type="text" id="exampleInput53" class="form-control" placeholder="Text input..." aria-label="Input...">
			<div class="dropdown">
				<button type="button" class="btn dropdown-toggle">Default action</button>
				<ul class="dropdown-menu">
					<li class="dropdown-item"><a href="#!">Item 1</a></li>
					<li class="dropdown-item active"><a href="#!">Item 2, with a loooong label</a></li>
					<li class="dropdown-item disabled"><a href="#!" tabindex="-1" aria-disabled="true">Item 3</a></li>
					<li class="dropdown-item"><a href="#!">Item 4</a></li>
				</ul>
			</div>
		</div>
	</div>
</form>

Additional examples

The following examples are also used by our Playwright CSS property assertion tests.

Input group button wrapper

Buttons inside an input group can be wrapped in .input-group-btn for flexbox grouping.

Example
HTML

<div class="input-group" id="input-group-btn-first">
	<div class="input-group-btn">
		<button type="button" class="btn">Action</button>
	</div>
	<input type="text" class="form-control" placeholder="Text input..." aria-label="Input group button first example">
</div>
<br><br>
<div class="input-group" id="input-group-btn-last">
	<input type="text" class="form-control" placeholder="Text input..." aria-label="Input group button last example">
	<div class="input-group-btn">
		<button type="button" class="btn">Action</button>
	</div>
</div>

Input group button sizes

Buttons inside an input group are automatically reduced to 32 px to match form controls, unless .btn-md or .btn-lg is applied.

Example
HTML

The following examples intentionally use .btn-md (40 px) and .btn-lg (48 px) to demonstrate that explicit size modifiers override the default 32 px input-group button height. These will be taller than the form control by design.

<div class="input-group">
	<button type="button" class="btn">Default</button>
	<input type="text" class="form-control" placeholder="Text input..." aria-label="Default button in input group">
</div>
<br><br>
<div class="input-group">
	<input type="text" class="form-control" placeholder="Text input..." aria-label="Dropdown in input group">
	<div class="dropdown">
		<button type="button" class="btn dropdown-toggle" id="inputGroupDropdownSize" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
		<ul class="dropdown-menu" role="menu" aria-expanded="false" aria-hidden="true" aria-labelledby="inputGroupDropdownSize">
			<li class="dropdown-item"><a href="#!">Item 1</a></li>
		</ul>
	</div>
</div>
<br><br>
<p>The following examples intentionally use <code>.btn-md</code> (40 px) and <code>.btn-lg</code> (48 px) to demonstrate that explicit size modifiers override the default 32 px input-group button height. These will be taller than the form control by design.</p>
<div class="input-group">
	<button type="button" class="btn btn-md">Medium</button>
	<input type="text" class="form-control" placeholder="Text input..." aria-label="Medium button in input group">
</div>
<br><br>
<div class="input-group">
	<button type="button" class="btn btn-lg">Large</button>
	<input type="text" class="form-control" placeholder="Text input..." aria-label="Large button in input group">
</div>