Inputs & Select

Mix and match inputs to create your own Forms.


Block inputs

<div class="Form__group">
<label for="input1" class="Form__label">Text label</label>
<input id="input1" type="text" class="Input" placeholder="Example placeholder content">
</div>

Inline-block inputs

<div class="Form__inline">
<div class="Form__inline-grid">
<div class="Form__inline-row">
<div class="Form__group">
<label for="input2" class="Form__label">Half label</label>
<input id="input2" type="text" class="Input" placeholder="Example placeholder content">
</div>
<div class="Form__group">
<label for="input3" class="Form__label">Half label</label>
<input id="input3" type="text" class="Input" placeholder="Example placeholder content">
</div>
</div>
</div>
</div>

Textareas

This caption supports a non-ludicrous amount of text. Learn more.

<div class="Form__group">
<label for="textarea1" class="Form__label">Text label</label>
<p class="Form__description">This caption supports a <strong>non-ludicrous</strong> amount of text. <a href="#">Learn more.</a></p>
<textarea id="textarea1" class="Input" placeholder="Example placeholder content"></textarea>
</div>

Select menus

<div class="Form__group Form__group--select">
<label for="select1" class="Form__label">Select label</label>
<select id="select1" class="Select">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
<option>Option 5</option>
</select>
</div>