Basic Form
Basic Example#
Give textual form controls like <input>s and <textarea>s an upgrade with custom styles, sizing, focus states, and more.
<div class="mb-3">
<label for="simpleinput" class="form-label">Text</label>
<input type="text" id="simpleinput" class="form-control">
</div>
<div class="mb-3">
<label for="example-email" class="form-label">Email</label>
<input type="email" id="example-email" name="example-email" class="form-control" placeholder="Email">
</div>
<div class="mb-3">
<label for="example-password" class="form-label">Password</label>
<input type="password" id="example-password" class="form-control" value="password">
</div>
<div class="mb-3">
<label for="example-palaceholder" class="form-label">Placeholder</label>
<input type="text" id="example-palaceholder" class="form-control" placeholder="placeholder">
</div>
<div class="mb-3">
<label for="example-textarea" class="form-label">Text area</label>
<textarea class="form-control" id="example-textarea" rows="5"></textarea>
</div>
Input Sizing#
Set heights using classes like .form-control-lg and .form-control-sm.
<div class="d-flex flex-column gap-2 mb-3 w-50">
<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg" aria-label=".form-control-lg example">
<input class="form-control" type="text" placeholder="Default input" aria-label="default input example">
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm" aria-label=".form-control-sm example">
</div>
Disabled Input#
Add the disabled boolean attribute on an input to give it a grayed out appearance, remove pointer events, and prevent focusing.
<input class="form-control" type="text" placeholder="Disabled input" aria-label="Disabled input example" disabled>
<input class="form-control" type="text" value="Disabled readonly input" aria-label="Disabled input example" disabled readonly>
Readonly Input#
Add the readonly boolean attribute on an input to prevent modification of the input’s value. readonly inputs can still be focused and selected, while disabled inputs cannot.
If you want to have <input readonly> elements in your form styled as plain text, replace .form-control with .form-control-plaintext to remove the default form field styling and preserve the correct margin and padding.
<input class="form-control" type="text" value="Readonly input here..." aria-label="readonly input example" readonly>
<input type="text" readonly class="form-control-plaintext" id="staticEmail" value="email@example.com">
Datalists input#
If you want to have <input readonly> elements in your form styled as plain text, replace .form-control with .form-control-plaintext to remove the default form field styling and preserve the correct margin and padding.
<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 value="New York">
<option value="Seattle">
<option value="Los Angeles">
<option value="Chicago">
</datalist>
Select#
Custom <select> menus need only a custom class, .form-select to trigger the custom styles. Custom styles are limited to the <select>’s initial appearance and cannot modify the <option>s due to browser limitations.
The multiple attribute is also supported:
As is the size attribute:
<label for="example-select" class="form-label">Default Input Select</label>
<select class="form-select" id="example-select">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<label for="example-multiselect" class="form-label">Multiple Select</label>
<select id="example-multiselect" multiple="" class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<label for="example-multiselectsize" class="form-label">Multiple Select Size</label>
<select id="example-multiselectsize" class="form-select" size="3" aria-label="size 3 select example">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>