Froms



Basic Form

We'll never share your email with anyone else.
Number only input.
<form>
  <div class="row">
    <div class="col-12 mb-1">
      <label class="form-label" for="exampleInputEmail1">Email address</label>
      <input type="email" value="user@planetpayment.com" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
      <small id="emailHelp" class="form-text">We'll never share your email with anyone else.</small>
    </div>
    <div class="col-12 mb-1">
      <label class="form-label" for="exampleInputPassword1">Password</label>
      <input type="password" value="Secret" class="form-control" id="exampleInputPassword1">
    </div>
    <div class="col-12 mb-1">
      <label class="form-label" for="exampleFormControlSelect1">Example select</label>
      <select class="form-control form-select" id="exampleFormControlSelect1">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
      </select>
    </div>
    <div class="col-12 mb-1">
      <label class="form-label" for="exampleInputGroup">Example input group</label>
      <div class="input-group">
        <input type="text" class="form-control" id="exampleInputGroup" autocomplete="off" />
        <span class="input-group-text bg-white">
            <span class="fa fa-lg fa-fw text-primary planet-ds-icon-calendar"></span>
        </span>
      </div>
    </div>
    <div class="col-12 mb-1">
      <label class="form-label" for="numberInput1">Numeric input</label>
      <input type="number" value="1234" class="form-control" id="numberInput1" aria-describedby="numberInputHelp">
      <small id="numberInputHelp" class="form-text">Number only input.</small>
    </div>
    <div class="col-12 mb-2 mt-1">
      <div class="form-check form-switch mt-1">
        <input class="form-check-input" type="checkbox" id="switch-example">
        <label class="form-label" class="form-check-label" for="switch-example">Toggle switch</label>
      </div>
    </div>
    <div class="col-12 mb-2 mt-1">
      <div class="form-check form-check-inline">
        <input type="checkbox" class="form-check-input" id="check-example-1" checked>
        <label class="form-label" class="form-check-label" for="check-example-1">Check me out</label>
      </div>
      <div class="form-check form-check-inline">
        <input type="checkbox" class="form-check-input" id="check-example-2">
        <label class="form-label" class="form-check-label" for="check-example-2">Check me out</label>
      </div>
    </div>
    <div class="col-12 mb-2 mt-1">
      <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" name="flexRadioDefault" id="radio-example-1">
        <label class="form-check-label" for="radio-example-1">
          Default radio
        </label>
      </div>
      <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" name="flexRadioDefault" id="radio-example-2" checked>
        <label class="form-check-label" for="radio-example-2">
          Default checked radio
        </label>
      </div>
    </div>
    <div class="col-12 mb-1">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</form>

Disabled Form

We'll never share your email with anyone else.
Number only input.
<form>
  <div class="row">
    <div class="col-12 mb-1">
      <label class="form-label" for="exampleInputEmail1">Email address</label>
      <input type="email" value="user@planetpayment.com" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" disabled>
      <small id="emailHelp" class="form-text">We'll never share your email with anyone else.</small>
    </div>
    <div class="col-12 mb-1">
      <label class="form-label" for="exampleInputPassword1">Password</label>
      <input type="password" value="Secret" class="form-control" id="exampleInputPassword1" disabled>
    </div>
    <div class="col-12 mb-1">
      <label class="form-label" for="exampleFormControlSelect1">Example select</label>
      <select class="form-control form-select" id="exampleFormControlSelect1" disabled>
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
      </select>
    </div>
    <div class="col-12 mb-1">
      <label class="form-label" for="exampleInputGroup_disabled">Example input group</label>
      <div class="input-group">
        <input type="text" class="form-control" id="exampleInputGroup_disabled" autocomplete="off" disabled />
        <span class="input-group-text bg-white">
            <span class="fa fa-lg fa-fw text-primary planet-ds-icon-calendar"></span>
        </span>
      </div>
    </div>
    <div class="col-12 mb-2">
      <label class="form-label" for="numberInput1">Numeric input</label>
      <input type="number"value="1234" class="form-control" id="numberInput1" aria-describedby="numberInputHelp" disabled>
      <small id="numberInputHelp" class="form-text">Number only input.</small>
    </div>
    <div class="col-12 mb-2">
      <div class="form-check form-switch mt-1">
        <input class="form-check-input" type="checkbox" id="switch-example-1-disabled" disabled checked>
        <label class="form-label" class="form-check-label" for="switch-example-1-disabled">Toggle switch</label>
      </div>
    </div>
    <div class="col-12 mb-1">
    <div class="form-check form-check-inline">
        <input type="checkbox" class="form-check-input" id="check-example-1-disabled" disabled checked>
        <label class="form-label" class="form-check-label" for="check-example-1-disabled">Check me out</label>
      </div>
      <div class="form-check form-check-inline">
        <input type="checkbox" class="form-check-input" id="check-example-2-disabled" disabled>
        <label class="form-label" class="form-check-label" for="check-example-2-disabled">Check me out</label>
      </div>
    </div>
    <div class="col-12 mb-2">
      <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" name="flexRadioDefault" id="radio-example-1-disabled" disabled>
        <label class="form-check-label" for="radio-example-1-disabled">
          Default radio
        </label>
      </div>
      <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" name="flexRadioDefault" id="radio-example-2-disabled" checked disabled>
        <label class="form-check-label" for="radio-example-2-disabled">
          Default checked radio
        </label>
      </div>
    </div>
    <div class="col-12 mb-1">
      <button type="submit" class="btn btn-primary" disabled>Submit</button>
    </div>
  </div>
</form>

Invalid Form

We'll never share your email with anyone else.
Number only input.
<form>
  <div class="row">
    <div class="col-12 mb-1">
      <label class="form-label" for="exampleInputEmail1">Email address</label>
      <input type="email" value="user@planetpayment.com" class="form-control ng-invalid ng-touched" id="exampleInputEmail1" aria-describedby="emailHelp">
      <small id="emailHelp" class="form-text">We'll never share your email with anyone else.</small>
    </div>
    <div class="col-12 mb-1">
      <label class="form-label" for="exampleInputPassword1">Password</label>
      <input type="password" value="Secret" class="form-control ng-invalid ng-touched" id="exampleInputPassword1">
    </div>
    <div class="col-12 mb-1">
      <label class="form-label" for="exampleFormControlSelect1">Example select</label>
      <select class="form-control form-select ng-invalid ng-touched" id="exampleFormControlSelect1">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
      </select>
    </div>
    <div class="col-12 mb-1">
      <label class="form-label" for="exampleInputGroup_invalid">Example input group</label>
      <div class="input-group">
        <input type="text" class="form-control ng-invalid ng-touched" id="exampleInputGroup_invalid" autocomplete="off" />
        <span class="input-group-text bg-white">
            <span class="fa fa-lg fa-fw text-primary planet-ds-icon-calendar"></span>
        </span>
      </div>
    </div>
    <div class="col-12 mb-2">
      <label class="form-label" for="numberInput1">Numeric input</label>
      <input type="number"value="1234" class="form-control ng-invalid ng-touched" id="numberInput1" aria-describedby="numberInputHelp">
      <small id="numberInputHelp" class="form-text">Number only input.</small>
    </div>
    <div class="col-12 mb-2">
      <div class="form-check form-switch mt-1">
        <input class="form-check-input ng-invalid ng-touched" type="checkbox" id="switch-example-1-invalid" checked>
        <label class="form-label" class="form-check-label" for="switch-example-1-invalid">Toggle switch</label>
      </div>
    </div>
    <div class="col-12 mb-1">
    <div class="form-check form-check-inline">
        <input type="checkbox" class="form-check-input  ng-invalid ng-touched" id="check-example-1-invalid" checked>
        <label class="form-label" class="form-check-label" for="check-example-1-invalid">Check me out</label>
      </div>
      <div class="form-check form-check-inline">
        <input type="checkbox" class="form-check-input ng-invalid ng-touched" id="check-example-2-invalid">
        <label class="form-label" class="form-check-label" for="check-example-2-invalid">Check me out</label>
      </div>
    </div>
    <div class="col-12 mb-2">
      <div class="form-check form-check-inline">
        <input class="form-check-input ng-invalid ng-touched" type="radio" name="flexRadioDefault" id="radio-example-1-invalid">
        <label class="form-check-label" for="radio-example-1-invalid">
          Default radio
        </label>
      </div>
      <div class="form-check form-check-inline">
        <input class="form-check-input ng-invalid ng-touched" type="radio" name="flexRadioDefault" id="radio-example-2-invalid" checked>
        <label class="form-check-label" for="radio-example-2-invalid">
          Default checked radio
        </label>
      </div>
    </div>
    <div class="col-12 mb-1">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</form>

Switches

<div class="form-check form-switch mt-1">
  <input class="form-check-input" type="checkbox" id="switch-enabled-off">
  <label class="form-label" class="form-check-label" for="switch-enabled-off"> Off/Enabled</label>
</div>
<div class="form-check form-switch mt-1">
  <input class="form-check-input" type="checkbox" id="switch-enabled-on" checked>
  <label class="form-label" class="form-check-label" for="switch-enabled-on"> On/Enabled</label>
</div>
<div class="form-check form-switch mt-1">
  <input class="form-check-input" type="checkbox" id="switch-enabled-off" disabled>
  <label class="form-label" class="form-check-label" for="switch-enabled-off"> Off/Disabled</label>
</div>
<div class="form-check form-switch mt-1">
  <input class="form-check-input" type="checkbox" id="switch-enabled-on" checked disabled>
  <label class="form-label" class="form-check-label" for="switch-enabled-on"> On/Disabled</label>
</div>

Select menu

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

Readonly labels

value 1
12.123412
<form>
  <div class="row">
    <div class="col-12 mb-1">
      <label class="form-label" for="exampleInputEmail1">Email address</label>
      <input type="email" value="user@planetpayment.com" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    </div>
    <div class="col-12 mb-1">
      <label class="form-label" for="readonlyExample">Readonly form label</label>
      <span value="value 1" class="input-readonly form-control-plaintext" id="readonlyExample" aria-describedby="readonlyExample">value 1</span>
    </div>
    <div class="col-12 mb-1">
      <label class="form-label" for="readonlyExample">Readonly value numeric</label>
      <span value="value 1" class="input-readonly form-control-plaintext text-end">12.123412</span>
    </div>
    <div class="col-12 mb-1">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</form>