This section contains all the elements that we can use to build a form.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<form action="#" method="post">
<fieldset>
<legend>Lorem ipsum</legend>
<ul>
<li class="FormGroup">
<label for="name">Basic field <span>(opcional)</span></label>
<input type="text" id="name" placeholder="placeholder...">
<p class="FormGroup-info">Lorem ipsum dolor sit amet.</p>
</li>
<li class="FormGroup is-success">
<label for="name">Basic field with success</label>
<input type="text" id="name">
</li>
<li class="FormGroup is-error">
<label for="name">Basic field with error</label>
<input type="text" id="name">
<p class="FormGroup-info is-error">Lorem ipsum dolor sit amet.</p>
</li>
<li class="FormGroup is-disabled">
<label for="name">Basic field disabled</label>
<input type="text" id="name" disabled>
</li>
</fieldset>
</form>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<form action="#" method="post">
<fieldset>
<legend>Lorem ipsum</legend>
<ul>
<li class="FormGroup">
<label for="name">Basic textarea <span>(opcional)</span></label>
<div class="FormGroup-textarea">
<textarea name="comment" value="">Lorem ipsum</textarea>
<p class="FormGroup-textareaCounter"><span>114</span>/<span>250</span></p>
</div>
</li>
<li class="FormGroup is-error">
<label for="name">Basic textarea<span>(opcional)</span></label>
<div class="FormGroup-textarea">
<textarea name="comment" value="">Lorem ipsum</textarea>
<p class="FormGroup-textareaCounter"><span>114</span>/<span>250</span></p>
</div>
</li>
<li class="FormGroup is-disabled">
<label for="name">Basic textarea disabled<span>(opcional)</span></label>
<div class="FormGroup-textarea">
<textarea name="comment" value="" disabled>Lorem ipsum</textarea>
<p class="FormGroup-textareaCounter"><span>114</span>/<span>250</span></p>
</div>
</li>
</fieldset>
</form>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<form action="#" method="post">
<fieldset>
<legend>Lorem ipsum</legend>
<ul>
<li class="FormGroup">
<label for="name">Basic Pulldown</label>
<select>
<option value="01">Option01</option>
<option value="02">Option02</option>
<option value="03">Option03</option>
<option value="04">Option04</option>
<option value="05">Option05</option>
</select>
<p class="FormGroup-info">Lorem ipsum dolor sit amet.</p>
</li>
<li class="FormGroup is-error">
<label for="name">Basic Pulldown</label>
<select>
<option value="01">Option01</option>
<option value="02">Option02</option>
<option value="03">Option03</option>
<option value="04">Option04</option>
<option value="05">Option05</option>
</select>
<p class="FormGroup-info">Lorem ipsum dolor sit amet.</p>
</li>
<li class="FormGroup is-disabled">
<label for="name">Basic Pulldown disabled</label>
<select>
<option value="01">Option01</option>
<option value="02">Option02</option>
<option value="03">Option03</option>
<option value="04">Option04</option>
<option value="05">Option05</option>
</select>
<p class="FormGroup-info">Lorem ipsum dolor sit amet.</p>
</li>
</fieldset>
</form>
Use class .InputGroup--date
<form action="#" method="post">
<fieldset>
<legend>Lorem ipsum</legend>
<ul>
<li class="FormGroup">
<label for="day">Input group date</label>
<div class="InputGroup InputGroup--date">
<div>
<input type="number" maxlength="2" name="day" id="day" placeholder="DD">
</div>
<div>
<input type="number" maxlength="2" name="month" id="month" placeholder="MM">
</div>
<div>
<input type="number" maxlength="4" name="year" id="year" placeholder="AAAA">
</div>
</div>
</li>
<li class="FormGroup is-error">
<label for="day">Input group date</label>
<div class="InputGroup InputGroup--date">
<div>
<input type="number" maxlength="2" name="day" id="day" placeholder="DD">
</div>
<div>
<input type="number" maxlength="2" name="month" id="month" placeholder="MM">
</div>
<div>
<input type="number" maxlength="4" name="year" id="year" placeholder="AAAA">
</div>
</div>
</li>
<li class="FormGroup is-disabled">
<label for="day">Input group date disabled</label>
<div class="InputGroup InputGroup--date">
<div>
<input type="number" maxlength="2" name="day" id="day" placeholder="DD" disabled>
</div>
<div>
<input type="number" maxlength="2" name="month" id="month" placeholder="MM" disabled>
</div>
<div>
<input type="number" maxlength="4" name="year" id="year" placeholder="AAAA" disabled>
</div>
</div>
</li>
</ul>
</fieldset>
</form>
<form action="#" method="post">
<fieldset>
<legend>Legend</legend>
<ul>
<li class="FormGroup">
<p class="FormGroup-label">Checkbox List</p>
<ul>
<li class="FormGroup-check">
<input type="checkbox" id="checkbox1">
<label for="checkbox1">Checkbox 1</label>
</li>
<li class="FormGroup-check is-error">
<input type="checkbox" id="checkbox2">
<label for="checkbox2">Checkbox 2</label>
</li>
<li class="FormGroup-check is-disabled">
<input type="checkbox" id="checkbox3" disabled>
<label for="checkbox3">Checkbox 2</label>
</li>
</ul>
</li>
<li class="FormGroup">
<p class="FormGroup-label">Radio button List</p>
<ul>
<li class="FormGroup-radio">
<input type="radio" id="radio1" name="radio">
<label for="radio1">Radio button field 1</label>
</li>
<li class="FormGroup-radio is-error">
<input type="radio" id="radio2" name="radio">
<label for="radio2">Radio button field 2</label>
</li>
<li class="FormGroup-radio is-disabled">
<input type="radio" id="radio3" name="radio" disabled>
<label for="radio3">Radio button field 2</label>
</li>
</ul>
<p class="FormGroup-info">Lorem ipsum dolor sit amet.</p>
</li>
</ul>
</fieldset>
</form>
<form action="#" method="post">
<fieldset>
<ul>
<li class="FormGroup-radio--inline">
<input type="radio" checked="checked" id="option1" name="options"><label for="option1">Option 1</label>
</li>
<li class="FormGroup-radio--inline">
<input type="radio" id="option2" name="options"><label for="option2">Option 2</label>
</li>
</ul>
</fieldset>
</form>
Use class .StrengthBar to create a strength bar.
<dl class="StrengthBar">
<dt>Lorem ipsum</dt>
<dd>
<meter max="3" min="0" value="2" high="2" low="2" optimum="3"></meter>
</dd>
</dl>