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

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>

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>

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>

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>

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>

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>

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>

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>

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>

Column 1

Column 2

Column 3

Column 4

Thom Yorke

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

Forms

General Forms

Form controls

File Type

Sizing

Readonly

Form grid

Form row

Comples form row

Horizontal form

Inline

Without labels

Range Inputs

Bob Dylan

David Gilmour

Jeff Beck

Guthrie Govan

Eric Johnson

Invite your friends to dashboard.

3 Tasks pending this month.

7 People loved your activity.

John commented on activity.

Click your picture or add an account.

Gmail

Hangout

Google+

Mail

Message

More

Thom Yorke

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

Forms

General Forms

General Forms

Form controls

Form controls

File Type

File Type

Sizing

Sizing

Readonly

Readonly

Form grid

Form grid

Form row

Form row

Comples form row

Comples form row

Horizontal form

Horizontal form

Inline

Inline

Without labels

Without labels

Range Inputs

Range Inputs