Forms

Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.

Form Input Type

Textual form controls—like <input> s, <select> s, and <textarea> s—are styled with the .form-control class. Included are styles for general appearance, focus state, sizing, and more.

Input

<div class="mb-3">
<label class="form-label" for="textInput">Label</label>
<input type="text" id="textInput" class="form-control" placeholder="placeholder">
</div>

Email

<!--email-->
<div class="mb-3">
<label class="form-label" for="email">Email</label>
<input type="email" id="email" class="form-control" placeholder="[email protected]">
</div>

Password

<!--password-->
<div class="mb-3">
<label class="form-label" for="password">Password</label>
<input type="password" id="password" class="form-control" value="passwordexample">
</div>

Textarea

 <!--textarea-->
<div class="mb-3">
<label for="textarea-input" class="form-label">Textarea</label>
<textarea class="form-control" id="textarea-input" rows="5">Hello World!</textarea>
</div>

Search

 <!--search-->
<div class="mb-3">
<label for="search-input" class="form-label">Search</label>
<input class="form-control" type="search" id="search-input" value="Search components">
</div>

Url

<!--url-->
<div class="mb-3">
<label for="url-input" class="form-label">URL</label>
<input class="form-control" type="url" id="url-input" value="https://getbootstrap.com">
</div>

Phone

<!--phone-->
<div class="mb-3">
<label for="telinput" class="form-label">Phone</label>
<input class="form-control" type="tel" id="telinput" value="+91 12 3456 7890">
</div>

Sizing

<!--larg input-->
<div class="mb-3">
<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg"
aria-label=".form-control-lg example">
</div>
<!--default input-->
<div class="mb-3">
<input class="form-control" type="text" placeholder="Default input"
aria-label="default input example">
</div>
<!--small input-->
<div class="mb-3">
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm"
aria-label=".form-control-sm example">
</div>

Select

Customize the native <select> s with custom CSS that changes the element’s initial appearance.

Default

<!--default select-->
<select class="form-select" aria-label="Default 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>

You may also choose from small and large custom selects to match our similarly sized text inputs.

Sizing

<!--default select-->
<select class="form-select" aria-label="Default 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>

Multiple Select

<!--multiple select-->
<select class="form-select" multiple aria-label="multiple 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>

Checks and radios

Create consistent cross-browser and cross-device checkboxes and radios with our completely rewritten checks component.

Checks

<!--checks-->
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
<label class="form-check-label" for="flexCheckDefault">
Default checkbox
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckChecked2" checked>
<label class="form-check-label" for="flexCheckChecked2">
Checked checkbox
</label>
</div>

Indeterminate

 <!--indeterminate-->
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault1">
<label class="form-check-label" for="flexCheckDefault1">
Default checkbox
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" checked>
<label class="form-check-label" for="flexCheckChecked">
Checked checkbox
</label>
</div>

Disabled

Add the disabled attribute and the associated <label> s are automatically styled to match with a lighter color to help indicate the input’s state. 

 <!-- disabled -->
<div class="form-check">
<input class="form-check-input" type="radio" name="flexRadioDisabled" id="flexRadioDisabled"
disabled>
<label class="form-check-label" for="flexRadioDisabled">
Disabled radio
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="flexRadioDisabled"
id="flexRadioCheckedDisabled" checked disabled>
<label class="form-check-label" for="flexRadioCheckedDisabled">
Disabled checked radio
</label>
</div>

Switches

A switch has the markup of a custom checkbox but uses the .form-switch class to render a toggle switch. Consider using role="switch" to more accurately convey the nature of the control to assistive technologies that support this role. In older assistive technologies, it will simply be announced as a regular checkbox as a fallback. Switches also support the disabled attribute.

Switches

<!--switches-->
<div class="form-check form-switch mb-2">
<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
<label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox input</label>
</div>
<div class="form-check form-switch  mb-2">
<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckChecked" checked>
<label class="form-check-label" for="flexSwitchCheckChecked">Checked switch checkbox input</label>
</div>
<div class="form-check form-switch  mb-2">
<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDisabled"
disabled>
<label class="form-check-label" for="flexSwitchCheckDisabled">Disabled switch checkbox
input</label>
</div>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckCheckedDisabled"
checked disabled>
<label class="form-check-label" for="flexSwitchCheckCheckedDisabled">Disabled checked switch
checkbox input</label>
</div>

Range

Use our custom range inputs for consistent cross-browser styling and built-in customization.

Example range

 <!--example range-->
<label for="customRange1" class="form-label">Example range</label>
<input type="range" class="form-range" id="customRange1">

Disabled

<!--disabled-->
<label for="disabledRange" class="form-label">Disabled range</label>
<input type="range" class="form-range" id="disabledRange" disabled>

Min and max

 <!--min and max-->
<label for="customRange2" class="form-label">Example range</label>
<input type="range" class="form-range" min="0" max="5" id="customRange2">

Steps

<!--steps-->
<label for="customRange3" class="form-label">Example range</label>
<input type="range" class="form-range" min="0" max="5" step="0.5" id="customRange3">

Input group

Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs.

Basic example

@
@example.com
https://example.com/users/
Example help text goes outside the input group.
$ .00
@
With textarea 
<!--inputgroup-->
<div class="input-group mb-3">
<span class="input-group-text" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
<span class="input-group-text" id="basic-addon2">@example.com</span>
</div>
<div class="mb-3">
<label for="basic-url" class="form-label">Your vanity URL</label>
<div class="input-group">
<span class="input-group-text" id="basic-addon3">https://example.com/users/</span>
<input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3 basic-addon4">
</div>
<div class="form-text" id="basic-addon4">Example help text goes outside the input group.</div>
</div>
<div class="input-group mb-3">
<span class="input-group-text">$</span>
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
<span class="input-group-text">.00</span>
</div>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Username" aria-label="Username">
<span class="input-group-text">@</span>
<input type="text" class="form-control" placeholder="Server" aria-label="Server">
</div>
<div class="input-group">
<span class="input-group-text">With textarea</span>
<textarea class="form-control" aria-label="With textarea"></textarea>
</div>

Button addons

<!--button adoons-->
<div class="input-group mb-3">
<button class="btn btn-outline-secondary" type="button" id="button-addon1">Button</button>
<input type="text" class="form-control" placeholder="" aria-label="Example text with button addon" aria-describedby="button-addon1">
</div>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="button-addon2">
<button class="btn btn-outline-secondary" type="button" id="button-addon2">Button</button>
</div>
<div class="input-group mb-3">
<button class="btn btn-outline-secondary" type="button">Button</button>
<button class="btn btn-outline-secondary" type="button">Button</button>
<input type="text" class="form-control" placeholder="" aria-label="Example text with two button addons">
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username with two button addons">
<button class="btn btn-outline-secondary" type="button">Button</button>
<button class="btn btn-outline-secondary" type="button">Button</button>
</div>

Floating labels

Create beautifully simple form labels that float over your input fields.

Example

<!--floating lables-->
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="[email protected]">
<label for="floatingInput">Email address</label>
</div>
<div class="form-floating">
<input type="password" class="form-control" id="floatingPassword" placeholder="Password">
<label for="floatingPassword">Password</label>
</div>

Textareas

 <!--text area-->
<div class="form-floating">
<textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea"></textarea>
<label for="floatingTextarea">Comments</label>
</div>

Validation

Provide valuable, actionable feedback to your users with HTML5 form validation, via browser default behaviors or custom styles and JavaScript.

Validation

Looks good!
Looks good!
@
Please choose a username.
Please provide a valid city.
Please select a valid state.
Please provide a valid zip.
You must agree before submitting.
 <!--validation form-->
<form class="row g-3 needs-validation" novalidate>
<div class="col-md-4">
<label for="validationCustom01" class="form-label">First name</label>
<input type="text" class="form-control" id="validationCustom01" value="Mark" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-md-4">
<label for="validationCustom02" class="form-label">Last name</label>
<input type="text" class="form-control" id="validationCustom02" value="Otto" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-md-4">
<label for="validationCustomUsername" class="form-label">Username</label>
<div class="input-group has-validation">
<span class="input-group-text" id="inputGroupPrepend">@</span>
<input type="text" class="form-control" id="validationCustomUsername"
aria-describedby="inputGroupPrepend" required>
<div class="invalid-feedback">
Please choose a username.
</div>
</div>
</div>
<div class="col-md-6">
<label for="validationCustom03" class="form-label">City</label>
<input type="text" class="form-control" id="validationCustom03" required>
<div class="invalid-feedback">
Please provide a valid city.
</div>
</div>
<div class="col-md-3">
<label for="validationCustom04" class="form-label">State</label>
<select class="form-select" id="validationCustom04" required>
<option selected disabled value="">Choose...</option>
<option>...</option>
</select>
<div class="invalid-feedback">
Please select a valid state.
</div>
</div>
<div class="col-md-3">
<label for="validationCustom05" class="form-label">Zip</label>
<input type="text" class="form-control" id="validationCustom05" required>
<div class="invalid-feedback">
Please provide a valid zip.
</div>
</div>
<div class="col-12">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
<label class="form-check-label" for="invalidCheck">
Agree to terms and conditions
</label>
<div class="invalid-feedback">
You must agree before submitting.
</div>
</div>
</div>
<div class="col-12">
<button class="btn btn-primary" type="submit">Submit form</button>
</div>
</form>