Note: The planet UI design system is an extension of the bootstrap framework.
Please also referer to the bootstrap documentation for best pratices while using the framework.
Froms
Basic Form
<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
<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
<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
<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>