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.

Nisi vitae et omnis cumque maxime consequuntur magni dolores aut qui quae et laboriosam.
<!-- START form-item-text_field component -->
<div class="form-item form-item--text">
    <label for="text_field">Text field:</label>
    <input type="text" id="text_field" value="Example value">
    <div class="form-item__description">Officiis dolorum nostrum odio dolorem et aut autem odit nostrum quisquam ut.</div>
</div>
<!-- END form-item-text_field component -->
Iure numquam illum quis numquam molestias autem fugiat
<!-- 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">Quo reiciendis ad aperiam</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 -->
Ratione animi ut qui corporis non
<!-- 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">Praesentium eum doloribus ut omnis asperiores ex consequatur maxime inventore maxime numquam</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 -->
<!-- START form-item-text_area component -->
<div class="form-item form-item--textarea">
    <label for="text_area">Text area:</label>
    <textarea id="text_area" rows="5">Example value</textarea>
</div>
<!-- END form-item-text_area component -->
<!-- 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">Error beatae quis modi. voluptates consequatur odit reprehenderit amet autem in non vel accusantium. id ea voluptatum in vero quam ut assumenda voluptas odit rerum</label>
        </div>
        <div class="form-item__checkbox">
            <input type="checkbox" name="checkbox_button" id="chb_5" value="checkbox_5" />
            <label for="chb_5">Est dolores eum sit quod soluta libero et sit culpa et omnis dicta distinctio qui. perspiciatis quia aut perspiciatis qui. possimus omnis voluptate consequatur numquam similique dicta quas aut illum laborum libero aut mollitia qui. distinctio a recusandae nisi sequi animi eveniet iste autem</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>
    <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

<!-- 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 -->
Numquam porro natus repellendus eos expedita praesentium nobis cum occaecati est.
Vitae illo consequatur quis ipsam illo porro impedit provident cum illo
<!-- 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">Praesentium assumenda perspiciatis blanditiis cum sit voluptatem voluptatibus id vitae.</span>
    <div class="form-item__description">Eos consequatur fugit qui</div>
</div>
<!-- END form-error-text_field component -->
Aut sapiente voluptatibus omnis corporis ut doloremque modi aut placeat ab optio.
<!-- 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">Fuga quia quis dolores unde.</span>
</div>
<!-- END form-error-text_field component -->
Corrupti ipsam consequatur ea officiis numquam aspernatur molestiae aut.
<!-- 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">Corporis non suscipit recusandae reprehenderit.</span>
</div>
<!-- END form-error-select component -->
Radio buttons (inline):
Repudiandae doloremque sequi porro perferendis accusamus eum quia corrupti qui aut.
<!-- 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">Culpa ratione voluptatibus explicabo excepturi ut.</span>
</div>
<!-- END form-error-radio_buttons_inline component -->
Radio buttons (block):
Aut qui aut ipsam ut consectetur inventore porro dolor repudiandae quod minima omnis porro.
<!-- 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">Repellat est error qui quisquam quasi delectus itaque officia recusandae perferendis ut.</span>
</div>
<!-- END form-error-radio_buttons_block component -->
Checkboxes (inline):
A magni ut voluptatem unde quasi earum.
<!-- 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">Ipsum quia corrupti excepturi.</span>
</div>
<!-- END form-error-checkboxes_inline component -->
Checkboxes (block):
Aut atque veniam quos eos necessitatibus aut vero ut corrupti optio repudiandae et.
<!-- 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">Architecto dolorum praesentium nemo aliquid voluptatum voluptas. qui corrupti voluptatum facilis deleniti vel repellendus. reprehenderit explicabo eveniet veniam sit. et id voluptatem voluptatem repudiandae ad. et rerum incidunt ex aut dolorum delectus. nobis quod atque accusantium porro dolore ipsam enim praesentium nesciunt voluptate nemo</label>
        </div>
        <div class="form-item__checkbox">
            <input type="checkbox" name="checkbox_button" id="chb_5" value="checkbox_5" />
            <label for="chb_5">Vel ut sequi quasi dicta alias voluptatem autem sit illum. doloribus corrupti quia autem et omnis qui consequatur omnis sit atque quia ullam iusto perferendis. aut et laudantium quos corporis non cum amet asperiores a. est non quisquam voluptatem facere. quia veritatis ut aut quis corrupti quas in voluptatem laboriosam. non aliquam iste eum tempore totam omnis nemo assumenda corrupti</label>
        </div>
    </fieldset>
    <span id="form-item__error_8" class="form-item__error-message">Hic voluptas dolores fugit quia consequuntur hic quae voluptas dolore iure praesentium consequatur omnis nesciunt.</span>
</div>
<!-- END form-error-checkboxes_block component -->

Omnis accusantium consequatur ad assumenda eos exercitationem nostrum.
<!-- 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">Molestiae molestias rerum modi laudantium ad et.</span>
</div>
<!-- END form-error-password component -->