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-->
<div class="mb-3">
<label class="form-label" for="email">Email</label>
<input type="email" id="email" class="form-control" placeholder="email@example.com">
</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="name@example.com">
<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
<!--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>Color
<div class="mb-4">
<label class="form-label fw-semibold
pb-1 mb-2">
Color:
<span class="text-body fw-normal" id="colorOption">Gray</span>
</label>
<div class="d-flex flex-wrap gap-2
align-items-center"
data-label="#colorOption">
<input type="radio" class="btn-check" name="colors" id="grayColor"
checked="" />
<label for="grayColor" class="btn-color-swatch" data-label="Gray">
<span class="icon-shape icon-xxs
bg-light"></span>
<span class="visually-hidden">Gray</span>
</label>
<input type="radio" class="btn-check" name="colors" id="black" />
<label for="black" class="btn-color-swatch" data-label="Green">
<span class="icon-shape icon-xxs
bg-success"></span>
<span class="visually-hidden">Black</span>
</label>
<input type="radio" class="btn-check" name="colors" id="blue" />
<label for="blue" class="btn-color-swatch" data-label="Blue">
<span class="icon-shape icon-xxs
bg-info"></span>
<span class="visually-hidden">Blue</span>
</label>
<input type="radio" class="btn-check" name="colors" id="Red" />
<label for="Red" class="btn-color-swatch" data-label="Red">
<span class="icon-shape icon-xxs
bg-danger"></span>
<span class="visually-hidden">Red</span>
</label>
</div>
</div>Count Input
<div class="d-flex align-items-center
gap-3 mb-2">
<div class="d-flex align-items-center
mt-2 border">
<button
class="btn btn-icon
btn-focus-none quantity-btn minus fs-5 btn-sm">-</button>
<input type="number"
class="form-control
quantity-input text-center mx-1 p-0 border-0
form-control-sm"
value="1" min="1" style="width: 50px" />
<button
class="btn btn-icon
btn-focus-none quantity-btn plus fs-5 btn-sm">+</button>
</div>
</div>
<div class="d-flex align-items-center
gap-3 mb-2">
<div class="d-flex align-items-center
mt-2 border">
<button
class="btn btn-icon
btn-focus-none quantity-btn minus fs-5">-</button>
<input type="number"
class="form-control
quantity-input text-center mx-1 p-0 border-0"
value="1" min="1" style="width: 50px" />
<button
class="btn btn-icon
btn-focus-none quantity-btn plus fs-5">+</button>
</div>
</div>
<div class="d-flex align-items-center
gap-3 mb-2">
<div class="d-flex align-items-center
mt-2 border">
<button
class="btn btn-icon
btn-focus-none quantity-btn minus fs-5 btn-lg">-</button>
<input type="number"
class="form-control
quantity-input text-center mx-1 p-0 border-0
form-control-lg"
value="1" min="1" style="width: 50px" />
<button
class="btn btn-icon
btn-focus-none quantity-btn plus fs-5 btn-lg">+</button>
</div>
</div>