Get support Purchase Now Preview Demo

Basic Forms

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

Bootstrap Forms documentation share-external-link-1

Form controls

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.

Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji. 
<div class="mb-3">
    <label class="form-label" for="exampleFormControlInput1">Text</label>
    <input type="text" id="exampleFormControlInput1" class="form-control">
</div>

<div class="mb-3">
    <label class="form-label" for="exampleFormControlPlaceholderInput2">Text</label>
    <input type="text" id="exampleFormControlPlaceholderInput2" class="form-control" placeholder="Placeholder text">
</div>

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

<div class="mb-3">
    <label class="form-label">Helper text</label>
    <input type="password" class="form-control" value="**********">
    <span class="form-text">Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.</span>
</div>

<div class="mb-3">
    <label class="form-label" for="exampleFormControlInput4">Email</label>
    <input type="email" id="exampleFormControlInput4" class="form-control" placeholder="name@domain.com">
</div>

<div class="mb-3">
    <label class="form-label" for="exampleFormControlSelect1">Select <span class="form-label-secondary">(Optional)</span></label>
    <select id="exampleFormControlSelect1" class="form-control">
        <option>Choose an option</option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
    </select>
</div>

<div class="mb-3">
    <label class="form-label" for="exampleFormControlSelect2">Multiple select</label>
    <select id="exampleFormControlSelect2" class="form-control" size="3" multiple>
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
    </select>
</div>

<div>
    <label class="form-label" for="exampleFormControlTextarea1">Textarea</label>
    <textarea id="exampleFormControlTextarea1" class="form-control" placeholder="Textarea field" rows="4"></textarea>
</div>

Sizing

Set heights using classes like .form-control-lg and .form-control-sm. On select use .form-select-lg and .form-select-sm classes.

<input class="form-control form-control-lg mb-3" 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">

<select class="form-select form-select-lg mb-3" aria-label=".form-select-lg example">
    <option selected>Open this select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>
<select class="form-select mb-3" 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>
<select class="form-select form-select-sm" aria-label=".form-select-sm example">
    <option selected>Open this select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>

Disabled

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

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.

<input class="form-control" type="text" value="Readonly input here..." aria-label="readonly input example" readonly>

File input

<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 radios

<div class="form-check mb-3">
    <input type="checkbox" id="formCheck1" class="form-check-input">
    <label class="form-check-label" for="formCheck1">Unchecked</label>
</div>

<div class="form-check mb-3">
    <input type="checkbox" id="formCheck2" class="form-check-input" checked>
    <label class="form-check-label" for="formCheck2">Checked</label>
</div>

<div class="form-check mb-3">
    <input type="checkbox" id="formCheck3" class="form-check-input" disabled>
    <label class="form-check-label" for="formCheck3">Unchecked and disabled</label>
</div>

<div class="form-check mb-3">
    <input type="checkbox" id="formCheck4" class="form-check-input" checked disabled>
    <label class="form-check-label" for="formCheck4">Checked and disabled</label>
</div>

<div class="form-check mb-3">
    <input type="radio" id="formRadio1" class="form-check-input">
    <label class="form-check-label" for="formRadio1">Unchecked</label>
</div>

<div class="form-check mb-3">
    <input type="radio" id="formRadio2" class="form-check-input" checked>
    <label class="form-check-label" for="formRadio2">Checked</label>
</div>

<div class="form-check mb-3">
    <input type="radio" id="formRadio3" class="form-check-input" disabled>
    <label class="form-check-label" for="formRadio3">Unchecked and disabled</label>
</div>

<div class="form-check">
    <input type="radio" id="formRadio4" class="form-check-input" checked disabled>
    <label class="form-check-label" for="formRadio4">Checked and disabled</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.

<div class="form-check form-switch">
    <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">
    <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">
    <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>

State switcherExclusive

Very similar to normal switches, but you can use different text or add icons within the states. Use .form-state-switch class along with .form-check and define the states within the tag using .form-state-default and .form-state-active.



<div class="form-check form-state-switch">
    <input class="form-state-input" type="checkbox" id="connection1">
    <label class="form-state-label" for="connection1">
        <span class="form-state-default">
            <span class="d-flex align-items-center justify-content-center text-bg-light link-secondary rounded-circle w-30px h-30px">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="14" width="14"><g><path d="M11.23,12.24a.49.49,0,0,0-.13-.76,7.37,7.37,0,0,0-3.64-1A7.55,7.55,0,0,0,.27,15.86a.5.5,0,0,0,.08.44.48.48,0,0,0,.4.2H8.89a.49.49,0,0,0,.49-.41A7.92,7.92,0,0,1,11.23,12.24Z" style="fill: currentColor"/><circle cx="7.25" cy="4.75" r="4.75" style="fill: currentColor"/><path d="M17.25,11a6.5,6.5,0,1,0,6.5,6.5A6.51,6.51,0,0,0,17.25,11Zm3.5,7.5h-2a.5.5,0,0,0-.5.5v2a1,1,0,0,1-2,0V19a.5.5,0,0,0-.5-.5h-2a1,1,0,0,1,0-2h2a.5.5,0,0,0,.5-.5V14a1,1,0,0,1,2,0v2a.5.5,0,0,0,.5.5h2a1,1,0,0,1,0,2Z" style="fill: currentColor"/></g></svg>
            </span>
        </span>

        <span class="form-state-active">
            <span class="d-flex align-items-center justify-content-center text-bg-primary ms-auto rounded-circle w-30px h-30px">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="14" width="14"><path d="M23.37.29a1.49,1.49,0,0,0-2.09.34L7.25,20.2,2.56,15.51A1.5,1.5,0,0,0,.44,17.63l5.93,5.94a1.53,1.53,0,0,0,2.28-.19l15.07-21A1.49,1.49,0,0,0,23.37.29Z" style="fill: currentColor"/></svg>
            </span>
        </span>
    </label>
</div>

<div class="form-check form-state-switch">
    <input class="form-state-input" type="checkbox" id="connection2">
    <label class="form-state-label" for="connection2">
        <span class="form-state-default">

            <!-- Button -->
            <span class="btn btn-outline-primary d-flex align-items-center justify-content-center">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="14" width="14" class="me-2"><g><path d="M11.23,12.24a.49.49,0,0,0-.13-.76,7.37,7.37,0,0,0-3.64-1A7.55,7.55,0,0,0,.27,15.86a.5.5,0,0,0,.08.44.48.48,0,0,0,.4.2H8.89a.49.49,0,0,0,.49-.41A7.92,7.92,0,0,1,11.23,12.24Z" style="fill: currentColor"/><circle cx="7.25" cy="4.75" r="4.75" style="fill: currentColor"/><path d="M17.25,11a6.5,6.5,0,1,0,6.5,6.5A6.51,6.51,0,0,0,17.25,11Zm3.5,7.5h-2a.5.5,0,0,0-.5.5v2a1,1,0,0,1-2,0V19a.5.5,0,0,0-.5-.5h-2a1,1,0,0,1,0-2h2a.5.5,0,0,0,.5-.5V14a1,1,0,0,1,2,0v2a.5.5,0,0,0,.5.5h2a1,1,0,0,1,0,2Z" style="fill: currentColor"/></g></svg>
                Connect
            </span>
        </span>

        <span class="form-state-active">

            <!-- Button -->
            <span class="btn btn-primary d-flex align-items-center justify-content-center">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="14" width="14" class="me-2"><path d="M23.37.29a1.49,1.49,0,0,0-2.09.34L7.25,20.2,2.56,15.51A1.5,1.5,0,0,0,.44,17.63l5.93,5.94a1.53,1.53,0,0,0,2.28-.19l15.07-21A1.49,1.49,0,0,0,23.37.29Z" style="fill: currentColor"/></svg>
                Connected
            </span>
        </span>
    </label>
</div>

Range

Create custom <input type="range"> controls with .form-range. The track (the background) and thumb (the value) are both styled to appear the same across browsers. As only Firefox supports "filling" their track from the left or right of the thumb as a means to visually indicate progress, we do not currently support it.

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

Input group

Place one add-on or button on either side of an input. You may also place one on both sides of an input. Remember to place <label>s outside the input group.

@
@example.com
https://example.com/users/
$ .00
@
With textarea 
<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>
  
<label for="basic-url" class="form-label">Your vanity URL</label>
<div class="input-group mb-3">
    <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">
</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>

Merged input groupExclusive

You can easily get rid of the border separator between the addon and the form element by using .input-group-merge class.

@
@example.com
https://example.com/users/
$ .00
With textarea 
<div class="input-group input-group-merge mb-3">
    <span class="input-group-text" id="basic-addon1-merged">@</span>
    <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1-merged">
</div>
  
<div class="input-group input-group-merge mb-3">
    <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2-merged">
    <span class="input-group-text" id="basic-addon2-merged">@example.com</span>
</div>
  
<label for="basic-url" class="form-label">Your vanity URL</label>
<div class="input-group input-group-merge mb-3">
    <span class="input-group-text" id="basic-addon3-merged">https://example.com/users/</span>
    <input type="text" class="form-control" id="basic-url-merged" aria-describedby="basic-addon3-merged">
</div>
  
<div class="input-group input-group-merge 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 input-group-merge">
    <span class="input-group-text">With textarea</span>
    <textarea class="form-control" aria-label="With textarea"></textarea>
</div>

Validation

For custom Bootstrap form validation messages, you'll need to add the novalidate boolean attribute to your <form>. This disables the browser default feedback tooltips, but still provides access to the form validation APIs in JavaScript. Try to submit the form below; our JavaScript will intercept the submit button and relay feedback to you. When attempting to submit, you'll see the :invalid and :valid styles applied to your form controls.

Custom feedback styles apply custom colors, borders, focus styles, and background icons to better communicate feedback. Background icons for <select>s are only available with .form-select, and not .form-control.

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. 
<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>

Validation states

Provide valuable, actionable feedback to your users with HTML5 form validation.

Valid feedback 
<form>
    <div class="mb-3">
        <label for="validationValidInput1">Valid input</label>
        <input type="text" class="form-control is-valid" id="validationValidInput1" placeholder="Placeholder">
    </div>
  
    <div class="mb-3">
        <label for="validationValidSelect1">Valid select</label>
        <select class="form-select is-valid" id="validationValidSelect1">
            <option>Choose an option</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
        </select>
        <span class="valid-feedback">Valid feedback</span>
    </div>
  
    <div class="mb-3">
        <label for="validationValidTextarea1">Valid textarea</label>
        <textarea class="form-control is-valid" placeholder="Textarea field" id="validationValidTextarea1" rows="4"></textarea>
    </div>
  
    <div>
        <label for="validationValidFileInput1">Valid file input</label>
        <input type="file" id="validationValidFileInput1" class="form-control is-valid">
    </div>
</form>
Valid feedback 
<form>
    <div class="mb-3">
        <label for="validationInvalidInput1">Valid input</label>
        <input type="text" class="form-control is-invalid" id="validationInvalidInput1" placeholder="Placeholder">
    </div>
  
    <div class="mb-3">
        <label for="validationInvalidSelect1">Valid select</label>
        <select class="form-select is-invalid" id="validationInvalidSelect1">
            <option>Choose an option</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
        </select>
        <span class="invalid-feedback">Valid feedback</span>
    </div>
  
    <div class="mb-3">
        <label for="validationInvalidTextarea1">Valid textarea</label>
        <textarea class="form-control is-invalid" placeholder="Textarea field" id="validationInvalidTextarea1" rows="4"></textarea>
    </div>
  
    <div>
        <label for="validationInvalidFileInput1">Valid file input</label>
        <input type="file" id="validationInvalidFileInput1" class="form-control is-invalid">
    </div>
</form>

Floating labels

@ 
<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 mb-3">
    <input type="password" class="form-control" id="floatingPassword" placeholder="Password">
    <label for="floatingPassword">Password</label>
</div>
<div class="form-floating mb-3">
    <input type="email" class="form-control" id="floatingInputValue" placeholder="name@example.com" value="test@example.com">
    <label for="floatingInputValue">Input with pre-defined value</label>
</div>
<div class="form-floating mb-3">
    <select class="form-select" id="floatingSelect" aria-label="Floating label 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>
    <label for="floatingSelect">Works with selects</label>
</div>
<div class="form-floating mb-3">
    <textarea class="form-control h-100px" placeholder="Leave a comment here" id="floatingTextarea"></textarea>
    <label for="floatingTextarea">Texarea</label>
</div>
<div class="input-group mb-3">
    <span class="input-group-text">@</span>
    <div class="form-floating">
        <input type="text" class="form-control" id="floatingInputGroup1" placeholder="Username">
        <label for="floatingInputGroup1">Username</label>
    </div>
</div>
<div class="form-floating">
    <input type="email" class="form-control is-invalid" id="floatingInputInvalid" placeholder="name@example.com" value="test@example.com">
    <label for="floatingInputInvalid">Invalid input</label>
</div>