#### Forms

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

Table of Content

- Overview
- Form Controls
- Examples
  1. States
  2. Input with Icon
  3. Form Control Styles
  4. Form Group Styles
- Input Group
- Image Check
- Color Input
- Select Group

#### Overview

Be sure to use an appropriate `type` attribute on all inputs (e.g., `email` for email address or `number` for numerical information) to take advantage of newer input controls like email verification, number selection, and more.

Here’s a quick example to demonstrate Bootstrap’s form styles. Keep reading for documentation on required classes, form layout, and more.

Email address We'll never share your email with anyone else.
Password
Check me out

                          <form>
                            <div class="form-group">
                              <label for="exampleInputEmail1">Email address</label>
                              <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
                              <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
                            </div>
                            <div class="form-group">
                              <label for="exampleInputPassword1">Password</label>
                              <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
                            </div>
                            <div class="form-check">
                              <input type="checkbox" class="form-check-input" id="exampleCheck1">
                              <label class="form-check-label" for="exampleCheck1">Check me out</label>
                            </div>
                            <button type="submit" class="btn btn-primary">Submit</button>
                          </form>

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

Be sure to explore our custom forms to further style `<select>`s.

Email address
Example select
Example multiple select
Example textarea

    									<form>
    										<div class="form-group">
    											<label for="exampleFormControlInput1">Email address</label>
    											<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
    										</div>
    										<div class="form-group">
    											<label for="exampleFormControlSelect1">Example select</label>
    											<select class="form-control" id="exampleFormControlSelect1">
    												<option>1</option>
    												<option>2</option>
    												<option>3</option>
    												<option>4</option>
    												<option>5</option>
    											</select>
    										</div>
    										<div class="form-group">
    											<label for="exampleFormControlSelect2">Example multiple select</label>
    											<select multiple="" class="form-control" id="exampleFormControlSelect2">
    												<option>1</option>
    												<option>2</option>
    												<option>3</option>
    												<option>4</option>
    												<option>5</option>
    											</select>
    										</div>
    										<div class="form-group">
    											<label for="exampleFormControlTextarea1">Example textarea</label>
    											<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
    										</div>
    									</form>

#### Examples

##### States

Success Input
Error Input Please provide a valid informations.

    									<div class="form-group has-success">
    										<label for="successInput">Success Input</label>
    										<input type="text" id="successInput" value="Success" class="form-control">
    									</div>

    									<div class="form-group has-error has-feedback">
    										<label for="errorInput">Error Input</label>
    										<input type="text" id="errorInput" value="Error" class="form-control">
    										<small id="emailHelp" class="form-text text-muted">Please provide a valid informations.</small>
    									</div>

##### Input with Icon

    									<div class="input-group">
    										<div class="input-group-prepend">
    											<span class="input-group-text">
    											<i class="icon-user"></i>
    											</span>
    										</div>
    										<input type="text" class="form-control" placeholder="Input With Icon">
    									</div>

##### Form Control Styles

Square Input
Square Select
Pill Input
Pill Select
Solid Input
Solid Select

    									<div class="form-group">
    										<label for="squareInput">Square Input</label>
    										<input type="text" class="form-control input-square" id="squareInput" placeholder="Square Input">
    									</div>

    									<div class="form-group">
    										<label for="squareSelect">Square Select</label>
    										<select class="form-control input-square" id="squareSelect">
    											<option>1</option>
    											<option>2</option>
    											<option>3</option>
    											<option>4</option>
    											<option>5</option>
    										</select>
    									</div>

    									<div class="form-group">
    										<label for="pillInput">Pill Input</label>
    										<input type="text" class="form-control input-pill" id="pillInput" placeholder="Pill Input">
    									</div>

    									<div class="form-group">
    										<label for="pillSelect">Pill Select</label>
    										<select class="form-control input-pill" id="pillSelect">
    											<option>1</option>
    											<option>2</option>
    											<option>3</option>
    											<option>4</option>
    											<option>5</option>
    										</select>
    									</div>

    									<div class="form-group">
    										<label for="solidInput">Solid Input</label>
    										<input type="text" class="form-control input-solid" id="solidInput" placeholder="Solid Input">
    									</div>

    									<div class="form-group">
    										<label for="solidSelect">Solid Select</label>
    										<select class="form-control input-solid" id="solidSelect">
    											<option>1</option>
    											<option>2</option>
    											<option>3</option>
    											<option>4</option>
    											<option>5</option>
    										</select>
    									</div>

##### Form Group Styles

Form Group Default
Input
Select
Form Floating Label
Name
Select

                      <label class="mb-3"><b>Form Group Default</b></label>
                        <div class="form-group form-group-default">
                          <label>Input</label>
                          <input id="Name" type="text" class="form-control" placeholder="Fill Name" />
                        </div>
                        <div class="form-group form-group-default">
                          <label>Select</label>
                          <select class="form-control" id="formGroupDefaultSelect">
                            <option>1</option>
                            <option>2</option>
                            <option>3</option>
                            <option>4</option>
                            <option>5</option>
                          </select>
                        </div>
                        <label class="mt-3 mb-3"><b>Form Floating Label</b></label>
                        <div class="form-floating form-floating-custom mb-3">
                          <input
                            type="text"
                            class="form-control"
                            id="floatingInput"
                            placeholder="Fill your name..."
                          />
                          <label for="floatingInput">Name</label>
                        </div>
                        <div class="form-floating form-floating-custom mb-3">
                          <select class="form-select" id="selectFloatingLabel" required="">
                            <option>1</option>
                            <option>2</option>
                            <option>3</option>
                            <option>4</option>
                            <option>5</option>
                          </select>
                          <label for="selectFloatingLabel">Select</label>
                        </div>

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

@
@example.com
Your vanity URL
https://example.com/users/
$ .00
With textarea

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

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

                        <div class="form-group">
                          <label for="basic-url">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>

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

                        <div class="form-group">
                          <div class="input-group">
                            <span class="input-group-text">With textarea</span>
                            <textarea class="form-control" aria-label="With textarea"></textarea>
                          </div>
                        </div>

                        <div class="form-group">
                          <div class="input-group">
                            <button class="btn btn-black btn-border" type="button">Button</button>
                            <input
                              type="text"
                              class="form-control"
                              placeholder=""
                              aria-label=""
                              aria-describedby="basic-addon1"
                            />
                          </div>
                        </div>

                        <div class="form-group">
                          <div class="input-group">
                            <input
                              type="text"
                              class="form-control"
                              aria-label="Text input with dropdown button"
                            />
                            <button
                              class="btn btn-primary btn-border dropdown-toggle"
                              type="button"
                              data-bs-toggle="dropdown"
                              aria-haspopup="true"
                              aria-expanded="false"
                            >
                              Dropdown
                            </button>
                            <div class="dropdown-menu">
                              <a class="dropdown-item" href="#">Action</a>
                              <a class="dropdown-item" href="#">Another action</a>
                              <a class="dropdown-item" href="#">Something else here</a>
                              <div role="separator" class="dropdown-divider"></div>
                              <a class="dropdown-item" href="#">Separated link</a>
                            </div>
                          </div>
                        </div>

                        <div class="form-group">
                          <div class="input-icon">
                            <input type="text" class="form-control" placeholder="Search for..." />
                            <span class="input-icon-addon">
                              <i class="fa fa-search"></i>
                            </span>
                          </div>
                        </div>

                        <div class="form-group">
                          <div class="input-icon">
                            <span class="input-icon-addon">
                              <i class="fa fa-user"></i>
                            </span>
                            <input type="text" class="form-control" placeholder="Username" />
                          </div>
                        </div>

#### Image Check

    									<div class="row">
    										<div class="col-6 col-sm-4">
    											<label class="imagecheck mb-4">
    												<input name="imagecheck" type="checkbox" value="1" class="imagecheck-input">
    												<figure class="imagecheck-figure">
    													<img src="../../assets/img/examples/product1.jpg" alt="title" class="imagecheck-image">
    												</figure>
    											</label>
    										</div>
    										<div class="col-6 col-sm-4">
    											<label class="imagecheck mb-4">
    												<input name="imagecheck" type="checkbox" value="2" class="imagecheck-input" checked="">
    												<figure class="imagecheck-figure">
    													<img src="../../assets/img/examples/product4.jpg" alt="title" class="imagecheck-image">
    												</figure>
    											</label>
    										</div>
    										<div class="col-6 col-sm-4">
    											<label class="imagecheck mb-4">
    												<input name="imagecheck" type="checkbox" value="3" class="imagecheck-input">
    												<figure class="imagecheck-figure">
    													<img src="../../assets/img/examples/product3.jpg" alt="title" class="imagecheck-image">
    												</figure>
    											</label>
    										</div>
    									</div>

#### Color Input

Color Input

    									<div class="form-group">
    										<label class="form-label">Color Input</label>
    										<div class="row gutters-xs">
    											<div class="col-auto">
    												<label class="colorinput">
    													<input name="color" type="checkbox" value="dark" class="colorinput-input">
    													<span class="colorinput-color bg-black"></span>
    												</label>
    											</div>
    											<div class="col-auto">
    												<label class="colorinput">
    													<input name="color" type="checkbox" value="primary" class="colorinput-input">
    													<span class="colorinput-color bg-primary"></span>
    												</label>
    											</div>
    											<div class="col-auto">
    												<label class="colorinput">
    													<input name="color" type="checkbox" value="secondary" class="colorinput-input">
    													<span class="colorinput-color bg-secondary"></span>
    												</label>
    											</div>
    											<div class="col-auto">
    												<label class="colorinput">
    													<input name="color" type="checkbox" value="info" class="colorinput-input">
    													<span class="colorinput-color bg-info"></span>
    												</label>
    											</div>
    											<div class="col-auto">
    												<label class="colorinput">
    													<input name="color" type="checkbox" value="success" class="colorinput-input">
    													<span class="colorinput-color bg-success"></span>
    												</label>
    											</div>
    											<div class="col-auto">
    												<label class="colorinput">
    													<input name="color" type="checkbox" value="danger" class="colorinput-input">
    													<span class="colorinput-color bg-danger"></span>
    												</label>
    											</div>
    											<div class="col-auto">
    												<label class="colorinput">
    													<input name="color" type="checkbox" value="warning" class="colorinput-input">
    													<span class="colorinput-color bg-warning"></span>
    												</label>
    											</div>
    										</div>
    									</div>

#### Select Group

Size
S M L XL
Icons input
Icon input
Your skills
HTML CSS PHP JavaScript Ruby Ruby C++

    								<div class="form-group">
    									<label class="form-label">Size</label>
    									<div class="selectgroup w-100">
    										<label class="selectgroup-item">
    											<input type="radio" name="value" value="50" class="selectgroup-input" checked="">
    											<span class="selectgroup-button">S</span>
    										</label>
    										<label class="selectgroup-item">
    											<input type="radio" name="value" value="100" class="selectgroup-input">
    											<span class="selectgroup-button">M</span>
    										</label>
    										<label class="selectgroup-item">
    											<input type="radio" name="value" value="150" class="selectgroup-input">
    											<span class="selectgroup-button">L</span>
    										</label>
    										<label class="selectgroup-item">
    											<input type="radio" name="value" value="200" class="selectgroup-input">
    											<span class="selectgroup-button">XL</span>
    										</label>
    									</div>
    								</div>

    								<div class="form-group">
    									<label class="form-label">Icons input</label>
    									<div class="selectgroup w-100">
    										<label class="selectgroup-item">
    											<input type="radio" name="transportation" value="2" class="selectgroup-input">
    											<span class="selectgroup-button selectgroup-button-icon"><i class="icon-screen-smartphone"></i></span>
    										</label>
    										<label class="selectgroup-item">
    											<input type="radio" name="transportation" value="1" class="selectgroup-input" checked="">
    											<span class="selectgroup-button selectgroup-button-icon"><i class="icon-screen-tablet"></i></span>
    										</label>
    										<label class="selectgroup-item">
    											<input type="radio" name="transportation" value="6" class="selectgroup-input">
    											<span class="selectgroup-button selectgroup-button-icon"><i class="icon-screen-desktop"></i></span>
    										</label>
    										<label class="selectgroup-item">
    											<input type="radio" name="transportation" value="6" class="selectgroup-input">
    											<span class="selectgroup-button selectgroup-button-icon"><i class="fa fa-times"></i></span>
    										</label>
    									</div>
    								</div>

    								<div class="form-group">
    									<label class="form-label d-block">Icon input</label>
    									<div class="selectgroup selectgroup-secondary selectgroup-pills">
    										<label class="selectgroup-item">
    											<input type="radio" name="icon-input" value="1" class="selectgroup-input" checked="">
    											<span class="selectgroup-button selectgroup-button-icon"><i class="fa fa-sun"></i></span>
    										</label>
    										<label class="selectgroup-item">
    											<input type="radio" name="icon-input" value="2" class="selectgroup-input">
    											<span class="selectgroup-button selectgroup-button-icon"><i class="fa fa-moon"></i></span>
    										</label>
    										<label class="selectgroup-item">
    											<input type="radio" name="icon-input" value="3" class="selectgroup-input">
    											<span class="selectgroup-button selectgroup-button-icon"><i class="fa fa-tint"></i></span>
    										</label>
    										<label class="selectgroup-item">
    											<input type="radio" name="icon-input" value="4" class="selectgroup-input">
    											<span class="selectgroup-button selectgroup-button-icon"><i class="fa fa-cloud"></i></span>
    										</label>
    									</div>
    								</div>

    								<div class="form-group">
    									<label class="form-label">Your skills</label>
    									<div class="selectgroup selectgroup-pills">
    										<label class="selectgroup-item">
    											<input type="checkbox" name="value" value="HTML" class="selectgroup-input" checked="">
    											<span class="selectgroup-button">HTML</span>
    										</label>
    										<label class="selectgroup-item">
    											<input type="checkbox" name="value" value="CSS" class="selectgroup-input">
    											<span class="selectgroup-button">CSS</span>
    										</label>
    										<label class="selectgroup-item">
    											<input type="checkbox" name="value" value="PHP" class="selectgroup-input">
    											<span class="selectgroup-button">PHP</span>
    										</label>
    										<label class="selectgroup-item">
    											<input type="checkbox" name="value" value="JavaScript" class="selectgroup-input">
    											<span class="selectgroup-button">JavaScript</span>
    										</label>
    										<label class="selectgroup-item">
    											<input type="checkbox" name="value" value="Ruby" class="selectgroup-input">
    											<span class="selectgroup-button">Ruby</span>
    										</label>
    										<label class="selectgroup-item">
    											<input type="checkbox" name="value" value="Ruby" class="selectgroup-input">
    											<span class="selectgroup-button">Ruby</span>
    										</label>
    										<label class="selectgroup-item">
    											<input type="checkbox" name="value" value="C++" class="selectgroup-input">
    											<span class="selectgroup-button">C++</span>
    										</label>
    									</div>
    								</div>