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.

Repellat ut cum harum sit animi neque mollitia aliquid veritatis aut consectetur earum est.
<!-- 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" size="">
    <div class="form-item__description">Et et quasi a.</div>
</div>
<!-- END form-item-text_field component -->
Perferendis at possimus dolorem magnam quisquam sit est omnis tenetur suscipit delectus dolor consequatur
<!-- 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">Impedit praesentium sed illum blanditiis dolores possimus alias molestiae tenetur</div>
</div>
<!-- END form-item-text_field_required component -->

Any required component e.g. a heading 3

Any required component e.g. a paragraph.

Required text in a span within a paragraph.

<!-- START item-required component -->
<div>
    <h3 class="required">Any required component e.g. a heading 3</h3>
    <p class="required">Any required component e.g. a paragraph.</p>
    <p>Required text in a <span class="required">span</span> within a paragraph.</p>
</div>
<!-- END item-required component -->
Maiores tempora voluptas voluptates est est quisquam quis est labore velit in
<!-- 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">Non iure mollitia sint quia voluptas est minima neque impedit dolorum voluptatem vel occaecati</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 form-item-select-with-input-field component -->
<div class="form-item">
    <label for="select_element">Select element with search:</label>
    <div class="form-item__select_with_input_field">
        <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>
        <input type="submit" name="search_submit" value="Submit" title="Submit" />
    </div>
</div>
<!-- END form-item-select-with-input-field component -->
<!-- START search component -->
<div class="form-item">
  <label for="search_field" class="hide-element">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 - disabled</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>
        <div class="form-item__checkbox">
            <input type="checkbox" name="checkbox_button" id="chi_4" value="checkbox_4" checked="checked" disabled="disabled" />
            <label for="chi_1">Checkbox button 4 - disabled</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">Corrupti id dicta laudantium totam eos doloremque. quisquam quibusdam veritatis deserunt animi ut nesciunt recusandae laboriosam ut consequatur iusto ab. nihil rem iste quidem quisquam aliquid nisi eveniet sint facere</label>
        </div>
        <div class="form-item__checkbox">
            <input type="checkbox" name="checkbox_button" id="chb_5" value="checkbox_5" />
            <label for="chb_5">Praesentium beatae quia iste expedita optio ut illo. sit aut amet dolore porro qui aut sit suscipit ut qui expedita voluptas dolores. in et voluptatibus esse error occaecati aut quia et perspiciatis fugit distinctio. maiores id ut qui consequatur dolore. nobis hic culpa laborum sapiente. rem aut molestias enim asperiores totam voluptatibus modi eius velit sit officiis labore aut</label>
        </div>
        <div class="form-item__checkbox">
            <input type="checkbox" name="checkbox_button" id="chb_6" value="checkbox_6" checked="checked" disabled="disabled" />
            <label for="chb_6">Checkbox button 6 - disabled</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--subfield form-item--postal-address__street-address">
                <label for="text_field_street-address1" class="required">Address line 1</label>
                <input type="text" id="text_field_street-address1" />
            </div>
            <div class="form-item form-item--subfield form-item--postal-address__street-address">
                <label for="text_field_street-address2">Address line 2</label>
                <input type="text" id="text_field_street-address2" />
            </div>
        </div>
        <div class="form-group form-group--postal-address__area">
            <div class="form-item form-item--subfield form-item--postal-address__address-region ">
                <label for="text_field_region">Region</label>
                <input type="text" id="text_field_region" />
            </div>
            <div class="form-item form-item--subfield form-item--postal-address__postal-code">
                <label for="text_field_postcode" class="required">Postcode</label>
                <input type="text" id="text_field_postcode" />
            </div>
            <div class="form-item form-item--subfield form-item--postal-address__address-country">
                <label for="text_field_country" class="required">Country</label>
                <input type="text" id="text_field_country" />
            </div>
        </div>
    </fieldset>
</div>
<!-- END form-item-postal-address component -->

Form actions

Help 
<!-- START form-item__actions component -->
<div class="form-item form-item__actions buttons">
  <div class="buttons__group">
    <input class="button button--primary" type="submit" value="Submit" />
    <input class="button button--secondary" type="reset" value="Clear" />
  </div>
  <div class="buttons__group">
    <a href="../nojs.html" class="button" role="button">Help</a>
  </div>
</div>
<!-- END form-item__actions component -->
Suscipit sit consequuntur fuga illum quas quia eos tenetur modi.
Nam ut laudantium vitae et explicabo et magnam laboriosam sint nemo ratione excepturi similique
<!-- 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">Nulla perferendis molestiae sit consequuntur dolorum.</span>
    <div class="form-item__description">Similique minima assumenda dicta aperiam quasi rerum voluptatem quo et harum</div>
</div>
<!-- END form-error-text_field component -->
Repellendus sint tempora qui est et voluptatum. 
<!-- 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">Accusantium sequi deleniti aut ut sed voluptatem quasi.</span>
</div>
<!-- END form-error-text_field component -->
Quo sit autem repellat. 
<!-- 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">Dolorum sint dolor saepe eos laborum dolorem molestias explicabo et similique officia aut fugiat.</span>
</div>
<!-- END form-error-select component -->
Radio buttons (inline):
Maiores eaque architecto error quos voluptatem molestiae. 
<!-- 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">Ab id voluptatem et autem dolor sed pariatur corporis repellat.</span>
</div>
<!-- END form-error-radio_buttons_inline component -->
Radio buttons (block):
Qui velit et illum excepturi sit saepe tempore non cum laboriosam quia. 
<!-- 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">Cupiditate nihil corrupti rerum minus.</span>
</div>
<!-- END form-error-radio_buttons_block component -->
Checkboxes (inline):
Veritatis numquam et quia dolores illo voluptatem aut aut delectus facilis. 
<!-- 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">Iste commodi tempora incidunt omnis ratione maiores enim.</span>
</div>
<!-- END form-error-checkboxes_inline component -->
Checkboxes (block):
Consequatur iure asperiores non quae pariatur est ea non sit voluptatem molestias. 
<!-- 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">Eius eius ut sint odio similique totam rerum odio ratione corporis est doloremque. qui occaecati accusamus aspernatur et similique enim qui in quo. ut aspernatur ullam sit quos dolorum officiis eos molestias impedit</label>
        </div>
        <div class="form-item__checkbox">
            <input type="checkbox" name="checkbox_button" id="chb_5" value="checkbox_5" />
            <label for="chb_5">Nobis tempora iure esse quos esse aspernatur mollitia non reprehenderit accusantium. consequuntur dolorum unde aspernatur corporis molestiae impedit quia consequatur veritatis ut qui tempora incidunt nihil. mollitia eligendi laudantium veritatis ut enim deleniti</label>
        </div>
    </fieldset>
    <span id="form-item__error_8" class="form-item__error-message">At ea et tempore cumque eveniet et non aut eveniet sit praesentium.</span>
</div>
<!-- END form-error-checkboxes_block component -->

Optio rem culpa quia perferendis odit minus fugit quisquam dolore eos eum tenetur. 
<!-- 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">Est facilis quaerat voluptatum qui voluptas autem voluptates numquam voluptas sint incidunt ut exercitationem.</span>
</div>
<!-- END form-error-password component -->