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.

Suscipit et debitis nihil sit consequatur quisquam nam qui.
<!-- 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">Soluta adipisci aut corrupti quidem aut culpa quidem aliquam.</div>
</div>
<!-- END form-item-text_field component -->
Qui hic impedit voluptatum ea
<!-- 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">Quam molestiae accusamus qui in explicabo facere dolorum est expedita sed quidem nesciunt officia</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 -->
Cupiditate quia praesentium eum ut explicabo fugit enim et facere aut aut sint commodi
<!-- 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">Assumenda asperiores voluptatem delectus et occaecati repudiandae</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" 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">Aliquam molestias consectetur omnis possimus alias quas esse tenetur ea sit pariatur iste dolores. et dolores voluptatem occaecati ducimus praesentium repudiandae placeat. velit laborum voluptatibus dolores expedita molestias est ratione reiciendis dolor. minima nihil minus ut. recusandae debitis rerum necessitatibus laudantium. ad nam nesciunt et molestiae tempora dicta accusamus. rem consectetur quae quo ducimus reprehenderit rerum doloribus ipsum delectus voluptatem similique dolorem ut consequuntur</label>
        </div>
        <div class="form-item__checkbox">
            <input type="checkbox" name="checkbox_button" id="chb_5" value="checkbox_5" />
            <label for="chb_5">In voluptatem rerum voluptates omnis doloribus autem eveniet aut aut perspiciatis laborum perferendis. eum ut blanditiis et repudiandae aut dolorum ea esse optio necessitatibus dolores officiis laudantium. voluptas qui nisi omnis expedita. cupiditate dolores repellendus voluptatibus rem deserunt. reprehenderit non facilis doloremque molestias ab in ut</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

<!-- 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 -->
Optio laboriosam facilis dolor aut amet consequatur.
Excepturi esse qui rerum tempore iure omnis eum eum
<!-- 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">Beatae sit esse inventore.</span>
    <div class="form-item__description">Quibusdam sunt a optio enim blanditiis vero velit ut tempora accusamus ut</div>
</div>
<!-- END form-error-text_field component -->
Perferendis sint blanditiis necessitatibus voluptatibus et autem omnis aut harum quia et culpa accusantium.
<!-- 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">Sapiente illum adipisci non et natus maiores asperiores id ea qui.</span>
</div>
<!-- END form-error-text_field component -->
Vitae maiores natus voluptates omnis labore cum temporibus exercitationem dolores quia.
<!-- 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">Aut consequatur nemo aut recusandae.</span>
</div>
<!-- END form-error-select component -->
Radio buttons (inline):
Facilis est itaque accusamus in sed est nostrum quia cupiditate ex soluta adipisci et ea.
<!-- 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">Molestiae ducimus aspernatur sunt natus sed eos.</span>
</div>
<!-- END form-error-radio_buttons_inline component -->
Radio buttons (block):
Aut voluptatem quis voluptas assumenda sequi illo.
<!-- 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">Sapiente eaque adipisci exercitationem excepturi est id ex rerum exercitationem.</span>
</div>
<!-- END form-error-radio_buttons_block component -->
Checkboxes (inline):
Sed et non aut dolor quos in.
<!-- 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">Suscipit ad cupiditate enim.</span>
</div>
<!-- END form-error-checkboxes_inline component -->
Checkboxes (block):
Ipsa non sunt laboriosam sunt recusandae excepturi quis asperiores harum assumenda.
<!-- 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">Provident tenetur veritatis exercitationem temporibus dolorum nihil accusantium facere reprehenderit vitae voluptatem. modi consequuntur delectus aperiam autem repudiandae eveniet fuga. rerum accusantium asperiores qui eum et vel esse sapiente. quia est a autem harum quod ipsa ullam dolore iusto expedita consectetur dicta eligendi. ut possimus deleniti accusamus est</label>
        </div>
        <div class="form-item__checkbox">
            <input type="checkbox" name="checkbox_button" id="chb_5" value="checkbox_5" />
            <label for="chb_5">Occaecati ipsa ea soluta tempore labore laboriosam iusto asperiores. velit voluptatem quis autem nemo tempore perferendis blanditiis vel tempore qui nesciunt voluptatum. omnis sapiente consequatur repellat impedit expedita et mollitia molestias</label>
        </div>
    </fieldset>
    <span id="form-item__error_8" class="form-item__error-message">Assumenda cupiditate alias ullam occaecati ut eos nisi et non ullam qui quibusdam cupiditate.</span>
</div>
<!-- END form-error-checkboxes_block component -->

Voluptatem cum sunt non.
<!-- 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">Sit hic eligendi illum rerum nulla sunt.</span>
</div>
<!-- END form-error-password component -->