Inputs & Select Mix and match inputs to create your own Forms. Block inputs Text label <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 Half label Half label <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 Text label 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 Select label Option 1 Option 2 Option 3 Option 4 Option 5 <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>