## Go Pro & unlock 100+ more UI components & pages.

Show Me

## Forms

## General Forms

    <form>
      <div class="form-group level-up">
        <label for="exampleInputEmail18">Email address</label>
        <input type="email" class="form-control" id="exampleInputEmail18" aria-describedby="emailHelp">
        <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
      </div>
      <div class="form-group level-up">
        <label for="exampleInputPassword1">Password</label>
        <input type="password" class="form-control" id="exampleInputPassword1">
      </div>
      <button type="submit" class="btn btn-primary">Submit</button>
    </form>

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

## Form controls

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

Email address
Example select
Example multiple select
Example textarea

## File Type

    <form>
      <div class="form-group form-group-file">
        <label for="exampleFormControlFile1">Chose File</label>
        <input type="file" class="form-control-file" id="exampleFormControlFile1">
      </div>
    </form>

Chose File

## Sizing

    <form>
      <div class="form-group level-up">
        <label for="exampleInputEmail22">Large Size</label>
        <input type="email" class="form-control" id="exampleInputEmail22" aria-describedby="emailHelp">
      </div>
      <div class="form-group level-up form-group-md">
        <label for="exampleInputEmail22">Medium Size</label>
        <input type="email" class="form-control" id="exampleInputEmail22" aria-describedby="emailHelp">
      </div>
      <div class="form-group level-up form-group-sm">
        <label for="exampleInputEmail11">Small Size</label>
        <input type="email" class="form-control" id="exampleInputEmail11" aria-describedby="emailHelp">
      </div>
    </form>

Large Size
Medium Size
Small Size

## Readonly

    <input class="form-control" type="text" placeholder="Readonly input here…" readonly>

## Form grid

    <form>
      <div class="row">
        <div class="col">
          <input type="text" class="form-control" placeholder="First name">
        </div>
        <div class="col">
          <input type="text" class="form-control" placeholder="Last name">
        </div>
      </div>
    </form>

First name
Last name

## Form row

    <form>
      <div class="form-row">
        <div class="col">
          <input type="text" class="form-control" placeholder="First name">
        </div>
        <div class="col">
          <input type="text" class="form-control" placeholder="Last name">
        </div>
      </div>
    </form>

First name
Last name

## Comples form row

    <form>
      <div class="form-row">
        <div class="form-group level-up col-md-6">
          <label for="inputEmail4">Email</label>
          <input type="email" class="form-control" id="inputEmail4">
        </div>
        <div class="form-group level-up col-md-6">
          <label for="inputPassword4">Password</label>
          <input type="password">
        </div>
      </div>
      <div class="form-group level-up">
        <label for="inputAddress">Address</label>
        <input type="text" class="form-control" id="inputAddress">
      </div>
      <div class="form-group level-up">
        <label for="inputAddress2">Address 2</label>
        <input type="text" class="form-control" id="inputAddress2">
      </div>
      <div class="form-row">
        <div class="form-group level-up col-md-6">
          <label for="inputCity">City</label>
          <input type="text" class="form-control" id="inputCity">
        </div>
        <div class="form-group level-up col-md-4">
          <label for="inputState">State</label>
          <select id="inputState" class="form-control">
            <option selected>Choose...</option>
            <option>...</option>
          </select>
        </div>
        <div class="form-group level-up col-md-2">
          <label for="inputZip">Zip</label>
          <input type="text" class="form-control" id="inputZip">
        </div>
      </div>
      <div class="form-group level-up">
        <div class="custom-control custom-checkbox">
          <input class="custom-control-input" type="checkbox" id="gridCheck">
          <label class="custom-control-label" for="gridCheck">
            Check me out
          </label>
        </div>
      </div>
      <button type="submit" class="btn btn-primary">Sign in</button>
    </form>

Email
Password
Address
Address 2
City
Zip
Check me out

## Horizontal form

    <form>
      <div class="form-group row">
        <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
        <div class="col-sm-10">
          <input type="email" class="form-control" id="inputEmail3">
        </div>
      </div>
      <div class="form-group row">
        <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
        <div class="col-sm-10">
          <input type="password" class="form-control" id="inputPassword3">
        </div>
      </div>
      <fieldset class="form-group">
        <div class="row">
          <legend class="col-form-label col-sm-2 pt-0">Radios</legend>
          <div class="col-sm-10">
            <div class="custom-control custom-radio mb-3">
              <input class="custom-control-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
              <label class="custom-control-label" for="gridRadios1">
                First radio
              </label>
            </div>
            <div class="custom-control custom-radio mb-3">
              <input class="custom-control-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
              <label class="custom-control-label" for="gridRadios2">
                Second radio
              </label>
            </div>
            <div class="custom-control custom-radio disabled">
              <input class="custom-control-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
              <label class="custom-control-label" for="gridRadios3">
                Third disabled radio
              </label>
            </div>
          </div>
        </div>
      </fieldset>
      <div class="form-group row">
        <div class="col-sm-2">Checkbox</div>
        <div class="col-sm-10">
          <div class="custom-control custom-checkbox">
            <input class="custom-control-input" type="checkbox" id="gridCheck1">
            <label class="custom-control-label" for="gridCheck1">
              Example checkbox
            </label>
          </div>
        </div>
      </div>
      <div class="form-group row">
        <div class="col-sm-10">
          <button type="submit" class="btn btn-primary">Sign in</button>
        </div>
      </div>
    </form>

Email
Email
Password
Password
Radios
First radio
Second radio
Third disabled radio
Checkbox
Remember my preference

## Inline

    <div class="custom-control custom-checkbox form-check-inline">
      <input class="custom-control-input" type="checkbox" id="inlineCheckbox1" value="option1">
      <label class="custom-control-label" for="inlineCheckbox1">1</label>
    </div>
    <div class="custom-control custom-checkbox form-check-inline">
      <input class="custom-control-input" type="checkbox" id="inlineCheckbox2" value="option2">
      <label class="custom-control-label" for="inlineCheckbox2">2</label>
    </div>
    <div class="custom-control custom-checkbox form-check-inline">
      <input class="custom-control-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
      <label class="custom-control-label" for="inlineCheckbox3">3 (disabled)</label>
    </div>

    <div class="custom-control custom-checkbox form-check-inline">
      <input class="custom-control-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
      <label class="custom-control-label" for="inlineRadio1">1</label>
    </div>
    <div class="custom-control custom-checkbox form-check-inline">
      <input class="custom-control-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
      <label class="custom-control-label" for="inlineRadio2">2</label>
    </div>
    <div class="custom-control custom-checkbox form-check-inline">
      <input class="custom-control-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
      <label class="custom-control-label" for="inlineRadio3">3 (disabled)</label>
    </div>

1
2
3 (disabled)
1
2
3 (disabled)

## Without labels

    <div class="custom-control custom-checkbox no-labels mb-3">
      <input class="custom-control-input" type="checkbox" id="inlineCheckbox122" value="option1">
      <label class="custom-control-label" for="inlineCheckbox122"></label>
    </div>

    <div class="custom-control custom-radio no-labels">
      <input class="custom-control-input" type="radio" name="inlineRadioOptions" id="inlineRadio265" value="option2">
      <label class="custom-control-label" for="inlineRadio265"></label>
    </div>

## Range Inputs

    <form>
      <div class="form-group">
        <label for="formControlRange">Example Range input</label>
        <input type="range" class="form-control-range" id="formControlRange">
      </div>
    </form>

Example Range input