Forms

Last updated 6 months ago

Overview

The form controls consist of <input>s, <select>s and <textarea>s. They all need the .form-control class to get their styling. You can see examples below:

<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>
</select>
</div>
<div class="form-group">
<label for="exampleFormControlTextarea1">Example textarea</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
</form>

Size

You can vary the height from large to small.

<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">

Checkboxes and Radio

We have restyled the checkbox and radio buttons. You will need to use the custom classes .poly-check and .poly-radio to use them instead of the default controls.

<div class="row">
<div class="col-5">
<input type="checkbox" id="checkbox-1" checked>
‚Äč
<label for="checkbox-1" class="checkbox">
<span class="poly-checkbox"></span>
<span class="input-label">Active</span>
</label>
</div>
<div class="col-6">
<input type="checkbox" id="checkbox-2">
<label for="checkbox-2" class="checkbox">
<span class="poly-checkbox"></span>
<span class="input-label">Normal</span>
</label>
</div>
</div>
<div class="row">
<div class="col-5">
<input type="radio" id="radio-1" checked="checked" name="radio">
<label for="radio-1" class="radio">
<span class="poly-radio"></span> <span class="input-label">Active</span>
</label>
</div>
<div class="col-6">
<input type="radio" id="radio-2" name="radio">
<label for="radio-2" class="radio" >
<span class="poly-radio"></span> <span class="input-label">Normal</span>
</label>
</div>
</div>

Disabled Inputs

You can add the disabled boolean attribute on an input to prevent user interactions.

<label>Disabled Input</label>
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

If you want to see more examples and properties please check the official Bootstrap Documentation.