# 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

Label

    <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

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

    <!--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 Hello World!

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

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

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

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

Default checkbox
Checked checkbox

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

Default checkbox
Checked checkbox

     <!--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 radio
Disabled checked radio

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

Default switch checkbox input
Checked switch checkbox input
Disabled switch checkbox input
Disabled checked switch checkbox input

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

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

### Disabled

Disabled range

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

### Min and max

Example range

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

Example range

    <!--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
Your vanity URL
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

Email address
Password

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

Comments

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

First name
Looks good!
Last name
Looks good!
Username
@
Please choose a username.
City
Please provide a valid city.
State
Please select a valid state.
Zip
Please provide a valid zip.
Agree to terms and conditions
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>