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.
<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 > < textarea> </code >
</label >
<div class ="col-8" >
<textarea class ="form-control" rows ="3" placeholder ="Textarea" id ="textarea" > </textarea >
</div >
</div >
</form >
Select fields
<form class ="form-horizontal" >
<div class ="form-group" >
<label class ="col-sm-3 control-label" for ="Donec" > <code > < select> </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.
<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-default" > 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.
<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-default" > Sign in</button >
</div >
</div >
</fieldset >
</form >
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.
<form class ="form-horizontal" >
<div class ="form-group" >
<label for ="readonlyField" class ="col-6" >
<code > <span class ="nt" > < input</span > <span class ="na" > type=</span > "text" readonly<span class ="nt" > > </span > </code >
</label >
<div class ="col-6" >
<input class ="form-control" type ="text" value ="Readonly input here..." tabindex ="-1" readonly id ="readonlyField" >
</div >
</div >
<div class ="form-group" >
<label for ="readonlyTextarea" class ="col-6" >
<code > <span class ="nt" > < textarea</span > readonly<span class ="nt" > > </span > <span class ="nt" > < /textarea> </span > </code >
</label >
<div class ="col-6" >
<textarea class ="form-control" tabindex ="-1" readonly id ="readonlyTextarea" > Readonly textarea here... Lorem ipsum dolor sit amet, consectetur adipiscing elit.</textarea >
</div >
</div >
</form >
<form class ="form-horizontal" >
<div class ="form-group" >
<label for ="readonlyField" class ="col-6" >
<code > <span class ="nt" > < input</span > <span class ="na" > class=</span > "inverted" <span class ="na" > type=</span > "text" readonly<span class ="nt" > > </span > </code >
</label >
<div class ="col-6" >
<input class ="form-control inverted" type ="text" value ="Readonly input here..." tabindex ="-1" readonly id ="readonlyField" >
</div >
</div >
<div class ="form-group" >
<label for ="readonlyTextarea" class ="col-6" >
<code > <span class ="nt" > < input</span > <span class ="na" > class=</span > "inverted" <span class ="na" > type=</span > "text" readonly<span class ="nt" > > </span > </code >
</label >
<div class ="col-6" >
<textarea class ="form-control inverted" tabindex ="-1" readonly id ="readonlyTextarea" > Readonly textarea here... Lorem ipsum dolor sit amet, consectetur adipiscing elit.</textarea >
</div >
</div >
</form >
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.
<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 >
Design System