Form Element
Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.
Input
Textual form controls—like inputs, selects, and textareas—are styled with the .form-control class. Included are styles for general appearance, focus state, sizing, and more.
<div class="row">
<div class="col-md-4 mb-3">
<input type="text" class="form-control" placeholder="Input Box">
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control"placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control" placeholder="Disabled" disabled>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Input Box">
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Disabled" disabled>
</div>
<div class="col-md-4 mb-md-0 mb-3">
<input type="text" class="form-control is-invalid" placeholder="Input Box">
</div>
<div class="col-md-4 mb-md-0 mb-3">
<input type="text" class="form-control is-invalid" placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4">
<input type="text" class="form-control is-invalid" placeholder="Disabled" disabled>
</div>
</div>
Select
Textual form controls—like inputs, selects, and textareas—are styled with the .form-control class. Included are styles for general appearance, focus state, sizing, and more.
<div class="row">
<div class="col-md-4 mb-3">
<select class="form-select">
<option selected>Select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="col-md-4 mb-3">
<select class="form-select" readonly>
<option selected disabled>Select</option>
<option value="1" disabled>One</option>
<option value="2" disabled>Readonly</option>
<option value="3" disabled>Three</option>
</select>
</div>
<div class="col-md-4 mb-3">
<select class="form-select" disabled>
<option selected>Select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="col-md-4 mb-3">
<select class="form-select is-valid">
<option selected>Select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="col-md-4 mb-3">
<select class="form-select is-valid" readonly>
<option disabled>Select</option>
<option value="1" disabled>One</option>
<option value="2" selected disabled>Readonly</option>
<option value="3" disabled>Three</option>
</select>
</div>
<div class="col-md-4 mb-3">
<select class="form-select is-valid" disabled>
<option selected>Select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="col-md-4 mb-md-0 mb-3">
<select class="form-select is-invalid">
<option selected>Select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="col-md-4 mb-md-0 mb-3">
<select class="form-select is-invalid" readonly>
<option>Select</option>
<option value="1" disabled>One</option>
<option value="2" selected disabled>Readonly</option>
<option value="3" disabled>Three</option>
</select>
</div>
<div class="col-md-4">
<select class="form-select is-invalid" disabled>
<option selected>Select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
</div>
Textarea
Textual form controls—like inputs, selects, and textareas—are styled with the .form-control class. Included are styles for general appearance, focus state, sizing, and more.
<div class="row">
<div class="col-md-4 mb-3">
<textarea class="form-control" rows="3" placeholder="Textarea"></textarea>
</div>
<div class="col-md-4 mb-3">
<textarea class="form-control mt-1" rows="3" placeholder="Readonly Textarea" readonly>Readonly Textarea</textarea>
</div>
<div class="col-md-4 mb-3">
<textarea class="form-control mt-1" rows="3" placeholder="Disabled Textarea" disabled></textarea>
</div>
<div class="col-md-4 mb-3">
<textarea class="form-control is-valid" rows="3" placeholder="Textarea"></textarea>
</div>
<div class="col-md-4 mb-3">
<textarea class="form-control is-valid mt-1" rows="3" placeholder="Readonly Textarea" readonly>Readonly Textarea</textarea>
</div>
<div class="col-md-4 mb-3">
<textarea class="form-control is-valid mt-1" rows="3" placeholder="Disabled Textarea" disabled></textarea>
</div>
<div class="col-md-4 mb-md-0 mb-3">
<textarea class="form-control is-invalid" rows="3" placeholder="Textarea"></textarea>
</div>
<div class="col-md-4 mb-md-0 mb-3">
<textarea class="form-control is-invalid" rows="3" placeholder="Readonly Textarea" readonly>Readonly Textarea</textarea>
</div>
<div class="col-md-4">
<textarea class="form-control is-invalid" rows="3" placeholder="Disabled Textarea" disabled></textarea>
</div>
</div>
Sizing
Set heights using classes like .form-control-lg, form-select-lg and .form-control-sm, form-select-sm.
<div class="row">
<div class="col-md-6">
<input class="form-control form-control-lg mb-3" type="text" placeholder=".form-control-lg">
<input class="form-control mb-3" type="text" placeholder="Default input">
<input class="form-control form-control-sm mb-md-0 mb-3" type="text" placeholder=".form-control-sm">
</div>
<div class="col-md-6">
<select class="form-select form-select-lg mb-3">
<option selected>Large Select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<select class="form-select mb-3">
<option selected>Default Select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<select class="form-select form-select-sm">
<option selected>Small Select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
</div>
Readonly plain text
If you want to have input readonly elements in your form styled as plain text, use the .form-control-plaintext class to remove the default form field styling and preserve the correct margin and padding.
<div class="mb-1 row">
<label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-6">
<input type="text" readonly class="form-control-plaintext" id="staticEmail" value="email@example.com">
</div>
</div>
<div class="mb-1 row">
<label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-6">
<input type="password" class="form-control" id="inputPassword">
</div>
</div>
Input Shapes
Set different styles of input using .square-input, .rounded-input modifier classes.
<input type="text" class="form-control square-input mb-3" placeholder="Square Input">
<input type="text" class="form-control rounded-input" placeholder="Rounded Input">
Help text
Help text below inputs can be styled with .form-text. Inline help text can be implemented using utility classes like .text-muted.
<div class="form-group">
<label class="form-label" for="inputPassword5">Password</label>
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
<small id="passwordHelpBlock" class="form-text text-muted">
Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
</small>
</div>
File browser
A custom file browser with change and remove function.
<div class="mb-3">
<label for="formFile" class="form-label">Default file input example</label>
<input class="form-control" type="file" id="formFile">
</div>
<div class="mb-3">
<label for="formFileMultiple" class="form-label">Multiple files input example</label>
<input class="form-control" type="file" id="formFileMultiple" multiple>
</div>
<div class="mb-3">
<label for="formFileDisabled" class="form-label">Disabled file input example</label>
<input class="form-control" type="file" id="formFileDisabled" disabled>
</div>
<div class="mb-3">
<label for="formFileSm" class="form-label">Small file input example</label>
<input class="form-control form-control-sm" id="formFileSm" type="file">
</div>
<div>
<label for="formFileLg" class="form-label">Large file input example</label>
<input class="form-control form-control-lg" id="formFileLg" type="file">
</div>
Checkbox and radio
Create consistent cross-browser and cross-device checkboxes and radios with our completely rewritten checks component.
Sizing
Inline
Without label
Toggle buttons
<div class="row row-cols-5">
<div class="col mb-1">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="customCheck1">
<label class="form-check-label" for="customCheck1">Checkbox Static</label>
</div>
</div>
<div class="col mb-1">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="customCheck2" checked>
<label class="form-check-label" for="customCheck2">Checkbox Active</label>
</div>
</div>
<div class="col mb-1">
<div class="form-check">
<input type="checkbox" class="form-check-input is-valid" id="customCheck3" checked>
<label class="form-check-label" for="customCheck3">Checkbox Active</label>
</div>
</div>
<div class="col mb-1">
<div class="form-check">
<input type="checkbox" class="form-check-input is-invalid" id="customCheck4">
<label class="form-check-label" for="customCheck4">Checkbox Active</label>
</div>
</div>
<div class="col mb-1">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="customCheck5" disabled>
<label class="form-check-label" for="customCheck5">Checkbox Disabled</label>
</div>
</div>
<div class="col mb-1">
<div class="form-check">
<input type="radio" id="customRadio1" name="customRadio" class="form-check-input">
<label class="form-check-label" for="customRadio1">Radio Static</label>
</div>
</div>
<div class="col mb-1">
<div class="form-check">
<input type="radio" id="customRadio2" name="customRadio" checked class="form-check-input">
<label class="form-check-label" for="customRadio2">Radio Active</label>
</div>
</div>
<div class="col mb-1">
<div class="form-check">
<input type="radio" id="customRadio2" name="customRadio" checked class="form-check-input is-valid">
<label class="form-check-label" for="customRadio2">Radio Active</label>
</div>
</div>
<div class="col mb-1">
<div class="form-check">
<input type="radio" id="customRadio2" name="customRadio" class="form-check-input is-invalid">
<label class="form-check-label" for="customRadio2">Radio Active</label>
</div>
</div>
<div class="col mb-1">
<div class="form-check">
<input type="radio" id="customRadio3" name="customRadio" disabled class="form-check-input">
<label class="form-check-label" for="customRadio3">Radio Disabled</label>
</div>
</div>
</div>
<div class="title mt-3"><span>Sizing</span></div>
<div class="row">
<div class="col-sm-4 mb-1">
<div class="form-check form-check-sm">
<input type="checkbox" class="form-check-input" id="customChecks1" checked>
<label class="form-check-label" for="customChecks1">Checkbox Sm</label>
</div>
</div>
<div class="col-sm-4 mb-1">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="customChecks2" checked>
<label class="form-check-label" for="customChecks2">Default Checkbox</label>
</div>
</div>
<div class="col-sm-4 mb-1">
<div class="form-check form-check-lg">
<input type="checkbox" class="form-check-input" id="customChecks3" checked>
<label class="form-check-label" for="customChecks3">Checkbox lg</label>
</div>
</div>
<div class="col-sm-4 mb-1">
<div class="form-check form-check-sm">
<input type="radio" id="customRadioc1" name="customRadioc1" class="form-check-input" checked>
<label class="form-check-label" for="customRadioc1">Radio Sm</label>
</div>
</div>
<div class="col-sm-4 mb-1">
<div class="form-check">
<input type="radio" id="customRadioc2" name="customRadioc2" class="form-check-input" checked>
<label class="form-check-label" for="customRadioc2">Default Radio</label>
</div>
</div>
<div class="col-sm-4 mb-1">
<div class="form-check form-check-lg">
<input type="radio" id="customRadioc3" name="customRadioc3" class="form-check-input" checked>
<label class="form-check-label" for="customRadioc3">Radio Lg</label>
</div>
</div>
</div>
<div class="title mt-3">Without Labels</div>
<div class="row">
<div class="col mb-1">
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
<label class="form-check-label" for="inlineCheckbox1">1</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
<label class="form-check-label" for="inlineCheckbox2">2</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
<label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
</div>
</div>
</div>
<div class="title mt-3">Toggle buttons</div>
<div class="hstack flex-wrap align-items-center gap-3">
<div>
<input type="checkbox" class="btn-check" id="btn-check" >
<label class="btn btn-primary" for="btn-check">Single toggle</label>
</div>
<div>
<input type="checkbox" class="btn-check" id="btn-check-2" checked >
<label class="btn btn-primary" for="btn-check-2">Checked</label>
</div>
<div>
<input type="checkbox" class="btn-check" id="btn-check-3" disabled>
<label class="btn btn-primary" for="btn-check-3">Disabled</label>
</div>
</div>
Checkbox and radio sizes
Use .form-check-lg, .form-check-sm
<div class="row">
<div class="col-sm-4 mt-1">
<div class="form-check form-check-sm">
<input type="checkbox" class="form-check-input" id="customChecks1" checked>
<label class="form-check-label" for="customChecks1">Checkbox Sm</label>
</div>
</div>
<div class="col-sm-4 mb-1">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="customChecks2" checked>
<label class="form-check-label" for="customChecks2">Default Checkbox</label>
</div>
</div>
<div class="col-sm-4 mb-1">
<div class="form-check form-check-lg">
<input type="checkbox" class="form-check-input" id="customChecks3" checked>
<label class="form-check-label" for="customChecks3">Checkbox lg</label>
</div>
</div>
<div class="col-sm-4 mb-sm-0 mb-1">
<div class="form-check form-check-sm">
<input type="radio" id="customRadioc1" name="customRadioc1" class="form-check-input" checked>
<label class="form-check-label" for="customRadioc1">Radio Sm</label>
</div>
</div>
<div class="col-sm-4 mb-sm-0 mb-1">
<div class="form-check">
<input type="radio" id="customRadioc2" name="customRadioc2" class="form-check-input" checked>
<label class="form-check-label" for="customRadioc2">Default Radio</label>
</div>
</div>
<div class="col-sm-4">
<div class="form-check form-check-lg">
<input type="radio" id="customRadioc3" name="customRadioc3" class="form-check-input" checked>
<label class="form-check-label" for="customRadioc3">Radio Lg</label>
</div>
</div>
</div>
Multiple select Menu
The multiple attribute is also supported.
<select class="form-select" multiple>
<option selected>Multiple Select Menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
Switch
A switch has the markup of a custom checkbox but uses the .form-switch class to render a toggle switch. Switches also support the disabled attribute.
Sizes
<div class="form-check form-switch mb-1">
<input type="checkbox" class="form-check-input" id="customSwitch1">
<label class="form-check-label" for="customSwitch1">Default switch checkbox input</label>
</div>
<div class="form-check form-switch">
<input type="checkbox" class="form-check-input" disabled id="customSwitch2">
<label class="form-check-label" for="customSwitch2">Disabled switch checkbox input</label>
</div>
<div class="title mt-3">Sizes</div>
<div class="form-check form-switch mb-1">
<input type="checkbox" class="form-check-input" id="customSwitchDef">
<label class="form-check-label" for="customSwitchDef">Default switch</label>
</div>
<div class="form-check form-switch form-switch-lg mb-1">
<input type="checkbox" class="form-check-input" id="customSwitchLg">
<label class="form-check-label" for="customSwitchLg">Switch lg</label>
</div>
<div class="form-check form-switch form-switch-xl">
<input type="checkbox" class="form-check-input" id="customSwitchXl">
<label class="form-check-label" for="customSwitchXl">Switch xl</label>
</div>
Color
A switch has the markup of a custom checkbox but uses the .form-switch class to render a toggle switch. Switches also support the disabled attribute.
<label for="exampleColorInput" class="form-label">Color picker</label>
<input type="color" class="form-control form-control-color" id="exampleColorInput" value="#563d7c" title="Choose your color">
Datalists
Datalists allow you to create a group of option's that can be accessed (and autocompleted) from within an input. These are similar to select elements, but come with more menu styling limitations and differences.
<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>
Range
Create custom <input type="range"> controls with .form-range.
<div class="mb-3">
<label for="customRange1" class="form-label">Example range</label>
<input type="range" class="form-range" id="customRange1">
</div>
<div>
<label for="customRange2" class="form-label">Disabled range</label>
<input type="range" class="form-range" disabled id="customRange2">
</div>