All form components

IDs used are for example only: they do not affect styling, so use IDs which are appropriate for the application you are building.

Vel sed mollitia aliquam sunt quisquam voluptas ad
<!-- START form-item-text_field component -->
<div class="form-item">
    <label for="text_field">Text field:</label>
    <input type="text" id="text_field" value="Example value" />
    <div class="form-item__description">Cupiditate ut magnam deleniti est sapiente non voluptatum ipsam iure esse autem dolor reiciendis</div>
</div>
<!-- END form-item-text_field component -->
In doloribus voluptas ipsam omnis nam nostrum qui velit id suscipit soluta dignissimos sed soluta
<!-- START form-item-text_field_required component -->
<div class="form-item">
    <label for="text_field_required" class="form-item__required">Text field required:</label>
    <input type="text" id="text_field_required" value="Example value" aria-required="true" />
    <div class="form-item__description">Dolorem optio minima alias et</div>
</div>
<!-- END form-item-text_field_required component -->
Vitae sequi illo enim reprehenderit reiciendis veniam
<!-- START form-item-text_field_disabled component -->
<div class="form-item">
    <label for="text_field_disabled">Text field disabled:</label>
    <input type="text" id="text_field_disabled" disabled="disabled" value="Example value" />
    <div class="form-item__description">Est est qui qui esse rerum molestiae consequatur nisi rerum quas repellat non</div>
</div>
<!-- END form-item-text_field_disabled component -->
<!-- START form-item-text_field_readonly component -->
<div class="form-item">
    <label for="text_field_readonly">Text field read only:</label>
    <input type="text" id="text_field_readonly" readonly="readonly" value="Example value" />
</div>
<!-- END form-item-text_field_readonly component -->
<div class="form-item">
    <label for="text_area">Text area:</label>
    <textarea id="text_area" rows="5">Example value</textarea>
</div>
<!-- START form-item-text_area_disabled component -->
<div class="form-item">
    <label for="text_area_disabled">Text area:</label>
    <textarea id="text_area_disabled" disabled="disabled" rows="5">Example value</textarea>
</div>
<!-- END form-item-text_area_disabled component -->
<!-- START form-item-select component -->
<div class="form-item">
    <label for="select_element">Select element:</label>
    <select id="select_element">
        <optgroup label="Option Group 1">
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
        </optgroup>
        <optgroup label="Option Group 2">
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
        </optgroup>
    </select>
</div>
<!-- END form-item-select component -->
<!-- START search component -->
<div class="form-item">
  <label for="search_field">Search field:</label>
    <div class="form-item__search_field">
      <input type="search" id="search_field" placeholder="Helpful placeholder text" />
      <input type="submit" name="search_submit" value="Submit" title="Submit" />
    </div>
</div>
<!-- END search component -->
Radio buttons (inline):
<!-- START form-item-checkboxes_inline component -->
<div class="form-item">
    <fieldset class="form-item__radios form-item__radios--inline">
        <legend>Radio buttons (inline):</legend>
        <div class="form-item__radio">
            <input type="radio" name="radio_button" id="rdi_1" value="radio_1" disabled="disabled" />
            <label for="rdi_1">Radio button 1 - disabled</label>
        </div>
        <div class="form-item__radio">
            <input type="radio" name="radio_button" id="rdi_2" value="radio_2" />
            <label for="rdi_2">Radio button 2</label>
        </div>
        <div class="form-item__radio">
            <input type="radio" name="radio_button" id="rdi_3" value="radio_3" />
            <label for="rdi_3">Radio button 3</label>
        </div>
    </fieldset>
</div>
<!-- END form-item-checkboxes_inline component -->
Radio buttons (block):
<!-- START form-item-radio_buttons_block component -->
<div class="form-item">
    <fieldset class="form-item__radios form-item__radios--block">
        <legend>Radio buttons (block):</legend>
        <div class="form-item__radio">
            <input type="radio" name="radio_button" id="rdb_1" value="radio_1" disabled="disabled" />
            <label for="rdb_1">Radio button 1 - disabled</label>
        </div>
        <div class="form-item__radio">
            <input type="radio" name="radio_button" id="rdb_2" value="radio_2" />
            <label for="rdb_2">Radio button 2</label>
        </div>
        <div class="form-item__radio">
            <input type="radio" name="radio_button" id="rdb_3" value="radio_3" />
            <label for="rdb_3">Radio button 3</label>
        </div>
    </fieldset>
</div>
<!-- END form-item-radio_buttons_block component -->
Checkboxes (inline):
<!-- START form-item-checkboxes_inline component -->
<div class="form-item">
    <fieldset class="form-item__checkboxes form-item__checkboxes--inline">
        <legend>Checkboxes (inline):</legend>
        <div class="form-item__checkbox">
            <input type="checkbox" name="checkbox_button" id="chi_1" value="checkbox_1" disabled="disabled" />
            <label for="chi_1">Checkbox button 1 - disable</label>
        </div>
        <div class="form-item__checkbox">
            <input type="checkbox" name="checkbox_button" id="chi_2" value="checkbox_2" />
            <label for="chi_2">Checkbox button 2</label>
        </div>
        <div class="form-item__checkbox">
            <input type="checkbox" name="checkbox_button" id="chi_3" value="checkbox_3" />
            <label for="chi_3">Checkbox button 3</label>
        </div>
    </fieldset>
</div>
<!-- END form-item-checkboxes_inline component -->
Checkboxes (block):
<!-- START form-item-checkboxes_block component -->
<div class="form-item">
    <fieldset class="form-item__checkboxes form-item__checkboxes--block">
        <legend>Checkboxes (block):</legend>
        <div class="form-item__checkbox">
            <input type="checkbox" name="checkbox_button" id="chb_1" value="checkbox_1" disabled="disabled" />
            <label for="chb_1">Checkbox button 1 - disable</label>
        </div>
        <div class="form-item__checkbox">
            <input type="checkbox" name="checkbox_button" id="chb_2" value="checkbox_2" />
            <label for="chb_2">Checkbox button 2</label>
        </div>
        <div class="form-item__checkbox">
            <input type="checkbox" name="checkbox_button" id="chb_3" value="checkbox_3" />
            <label for="chb_3">Checkbox button 3</label>
        </div>
        <div class="form-item__checkbox">
            <input type="checkbox" name="checkbox_button" id="chb_4" value="checkbox_4" />
            <label for="chb_4">Perferendis distinctio vel quia aut fuga cum fugiat ut et asperiores expedita voluptatem. harum quia ut et dicta non sed delectus id. temporibus qui dolores amet nostrum neque debitis dolor sit sed accusantium est quia</label>
        </div>
        <div class="form-item__checkbox">
            <input type="checkbox" name="checkbox_button" id="chb_5" value="checkbox_5" />
            <label for="chb_5">Sint delectus sit nihil ducimus earum reiciendis nulla cumque quo. eligendi est qui adipisci id ab est odit debitis impedit. aut ipsum tempore aut aliquam tempore. nihil molestiae nihil aut deleniti eligendi fugiat voluptatem sint expedita praesentium. ut ut hic quia rerum assumenda quo et vero alias perferendis velit esse incidunt. aliquam deleniti dolore veniam quis incidunt quasi sit qui id ratione distinctio sunt velit beatae. nihil veniam non nemo</label>
        </div>
    </fieldset>
</div>
<!-- END form-item-checkboxes_block component -->

<!-- START form-item__password component -->
<div class="form-item">
    <label for="password">Password:</label><br />
    <input type="password" class="form-item__password" name="password" id="password" />
</div>
<!-- END form-item__password component -->
Address:
<!-- START form-item-postal-address component -->
<div class="form-item form-item--postal-address">
    <fieldset>
        <legend>Address:</legend>
        <!-- NB Fields are not definitive: they may change depending on not only the use case but also the country. -->
        <!-- Class names based on http://schema.org/PostalAddress -->
        <div class="form-group form-group--postal-address__street-address">
            <div class="form-item form-item--postal-address__street-address form-item--compact">
                <label for="text_field_street-address1" class="hide-element">Address line 1</label>
                <input type="text" id="text_field_street-address1" placeholder="Address line 1" />
            </div>
            <div class="form-item form-item--postal-address__street-address form-item--compact">
                <label for="text_field_street-address2" class="hide-element">Address line 2</label>
                <input type="text" id="text_field_street-address2" placeholder="Address line 2" />
            </div>
        </div>
        <div class="form-group form-group--postal-address__area">
            <div class="form-item form-item--postal-address__address-region form-item--compact">
                <label for="text_field_region" class="hide-element">Region</label>
                <input type="text" id="text_field_region" placeholder="Region" />
            </div>
            <div class="form-item form-item--postal-address__postal-code form-item--compact">
                <label for="text_field_postcode" class="hide-element">Postcode</label>
                <input type="text" id="text_field_postcode" placeholder="Postcode" />
            </div>
            <div class="form-item form-item--postal-address__address-country form-item--compact">
                <label for="text_field_country" class="hide-element">Country</label>
                <input type="text" id="text_field_country" placeholder="Country" />
            </div>
        </div>
    </fieldset>
</div>
<!-- END form-item-postal-address component -->
<!-- START form-item__actions component -->
<div class="form-item form-item__actions"><a href="#" class="button button--secondary" role="button">Lorem</a> <input class="button button--secondary" type="reset" value="Clear" /> <input class="button button--primary" type="submit" value="Submit" /></div>
<!-- END form-item__actions component -->
Corrupti quas doloribus totam molestiae.
Et et hic porro ipsam enim quod alias blanditiis voluptas
<!-- START form-error-text_field component -->
<div class="form-item">
    <label for="text_field">Text field:</label>
    <input type="text" id="text_field" value="Example value" class="form-item__input--error" aria-invalid="true" aria-describedBy="form-item__error_1" />
    <span id="form-item__error_1" class="form-item__error-message">Dolores quo velit nihil fugiat eaque quo.</span>
    <div class="form-item__description">Commodi rerum id architecto nihil quidem dicta adipisci ad ipsa</div>
</div>
<!-- END form-error-text_field component -->
Ducimus modi quia quia ut perspiciatis aliquam sed placeat optio aut.
<!-- START form-error-text_area component -->
<div class="form-item">
    <label for="text_area">Text area:</label>
    <textarea id="text_area" rows="5" class="form-item__input--error" aria-invalid="true" aria-describedBy="form-item__error_2">Example value</textarea>
    <span id="form-item__error_2" class="form-item__error-message">Sit provident aut quas sed non quo.</span>
</div>
<!-- END form-error-text_field component -->
Aspernatur qui quo cupiditate quod deleniti dolor voluptatem facere.
<!-- START form-error-select component -->
<div class="form-item">
    <label for="select_element">Select element:</label>
    <select id="select_element" class="form-item__input--error" aria-invalid="true" aria-describedBy="form-item__error_3">
        <optgroup label="Option Group 1">
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
        </optgroup>
        <optgroup label="Option Group 2">
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
        </optgroup>
    </select>
    <span id="form-item__error_3" class="form-item__error-message">Numquam labore omnis nostrum aperiam odit voluptas voluptatem ducimus expedita enim voluptatem et aut sint.</span>
</div>
<!-- END form-error-select component -->
Radio buttons (inline):
Quis harum fugit et dignissimos qui quod itaque.
<!-- START form-error-radio_buttons_inline component -->
<div class="form-item">
    <fieldset class="form-item__radios form-item__radios--inline form-item__input--error" aria-invalid="true" aria-describedBy="form-item__error_4">
        <legend>Radio buttons (inline):</legend>
        <div class="form-item__radio">
            <input type="radio" name="radio_button" id="rdi_1" value="radio_1" />
            <label for="rdi_1">Radio button 1</label>
        </div>
        <div class="form-item__radio">
            <input type="radio" name="radio_button" id="rdi_2" value="radio_2" />
            <label for="rdi_2">Radio button 2</label>
        </div>
        <div class="form-item__radio">
            <input type="radio" name="radio_button" id="rdi_3" value="radio_3" />
            <label for="rdi_3">Radio button 3</label>
        </div>
    </fieldset>
    <span id="form-item__error_4" class="form-item__error-message">Sit dolores ipsa sunt ut nam praesentium excepturi tempore.</span>
</div>
<!-- END form-error-radio_buttons_inline component -->
Radio buttons (block):
Earum qui quasi similique qui est nihil dolor expedita non voluptatem.
<!-- START form-error-radio_buttons_block component -->
<div class="form-item">
    <fieldset class="form-item__radios form-item__radios--block form-item__input--error" aria-invalid="true" aria-describedBy="form-item__error_5">
        <legend>Radio buttons (block):</legend>
        <div class="form-item__radio">
            <input type="radio" name="radio_button" id="rdb_1" value="radio_1" />
            <label for="rdb_1">Radio button 1</label>
        </div>
        <div class="form-item__radio">
            <input type="radio" name="radio_button" id="rdb_2" value="radio_2" />
            <label for="rdb_2">Radio button 2</label>
        </div>
        <div class="form-item__radio">
            <input type="radio" name="radio_button" id="rdb_3" value="radio_3" />
            <label for="rdb_3">Radio button 3</label>
        </div>
    </fieldset>
    <span id="form-item__error_5" class="form-item__error-message">Voluptatem assumenda quasi harum aut ut dignissimos facere.</span>
</div>
<!-- END form-error-radio_buttons_block component -->
Checkboxes (inline):
Voluptatem temporibus aut quod perspiciatis.
<!-- START form-error-checkboxes_inline component -->
<div class="form-item">
    <fieldset class="form-item__checkboxes form-item__checkboxes--inline form-item__input--error" aria-invalid="true" aria-describedBy="form-item__error_7">
        <legend>Checkboxes (inline):</legend>
        <div class="form-item__checkbox">
            <input type="checkbox" name="checkbox_button" id="chi_1" value="checkbox_1" />
            <label for="chi_1">Checkbox button 1</label>
        </div>
        <div class="form-item__checkbox">
            <input type="checkbox" name="checkbox_button" id="chi_2" value="checkbox_2" />
            <label for="chi_2">Checkbox button 2</label>
        </div>
        <div class="form-item__checkbox">
            <input type="checkbox" name="checkbox_button" id="chi_3" value="checkbox_3" />
            <label for="chi_3">Checkbox button 3</label>
        </div>
    </fieldset>
    <span id="form-item__error_7" class="form-item__error-message">Ratione veritatis rerum ut officiis.</span>
</div>
<!-- END form-error-checkboxes_inline component -->
Checkboxes (block):
Enim omnis ea ipsa eum est commodi quibusdam distinctio reiciendis.
<!-- START form-error-checkboxes_block component -->
<div class="form-item">
    <fieldset class="form-item__checkboxes form-item__checkboxes--block form-item__input--error" aria-invalid="true" aria-describedBy="form-item__error_8">
        <legend>Checkboxes (block):</legend>
        <div class="form-item__checkbox">
            <input type="checkbox" name="checkbox_button" id="chb_1" value="checkbox_1" />
            <label for="chb_1">Checkbox button 1</label>
        </div>
        <div class="form-item__checkbox">
            <input type="checkbox" name="checkbox_button" id="chb_2" value="checkbox_2" />
            <label for="chb_2">Checkbox button 2</label>
        </div>
        <div class="form-item__checkbox">
            <input type="checkbox" name="checkbox_button" id="chb_3" value="checkbox_3" />
            <label for="chb_3">Checkbox button 3</label>
        </div>
        <div class="form-item__checkbox">
            <input type="checkbox" name="checkbox_button" id="chb_4" value="checkbox_4" />
            <label for="chb_4">Esse dolorum blanditiis in omnis distinctio voluptates ullam suscipit. rerum qui ratione temporibus aliquid recusandae non quis sequi ea ipsum quidem. qui non exercitationem eum necessitatibus quia reiciendis veritatis nemo perspiciatis alias soluta. dignissimos nostrum dignissimos soluta et sunt voluptas</label>
        </div>
        <div class="form-item__checkbox">
            <input type="checkbox" name="checkbox_button" id="chb_5" value="checkbox_5" />
            <label for="chb_5">Velit optio mollitia et est esse a quas iste aliquam hic. suscipit veniam quas ut ullam deleniti laboriosam. fugiat consequatur temporibus rerum magnam iusto. facere illo ut sed delectus earum temporibus et odio aut. recusandae tempora natus asperiores repellat rerum</label>
        </div>
    </fieldset>
    <span id="form-item__error_8" class="form-item__error-message">Cum laborum sed deleniti asperiores similique ex nemo.</span>
</div>
<!-- END form-error-checkboxes_block component -->

Atque ipsum voluptatem laborum perferendis esse.
<!-- START form-error-password component -->
<div class="form-item">
    <label for="password">Password:</label><br />
    <input type="password" class="password form-item__input--error" name="password" id="password" aria-invalid="true" aria-describedBy="form-item__error_6" />
    <span id="form-item__error_6" class="form-item__error-message">Voluptate nobis odit similique.</span>
</div>
<!-- END form-error-password component -->