IDs used are for example only: they do not affect styling, so use IDs which are appropriate for the application you are building.
<!-- 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 maxime qui ut suscipit enim</div> </div> <!-- END form-item-text_field component -->
<!-- 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">Nobis occaecati esse sed quia eum officiis</div> </div> <!-- END form-item-text_field_required component -->
<!-- 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 atque culpa porro ea rem</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 -->
<!-- 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 -->
<!-- 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 -->
<!-- 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 -->
<!-- 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">Unde eum ex commodi eum incidunt quae recusandae. ut voluptate nihil voluptas voluptatem itaque quas nisi aut expedita culpa reprehenderit vel. sed aut ullam et sequi sequi distinctio</label> </div> <div class="form-item__checkbox"> <input type="checkbox" name="checkbox_button" id="chb_5" value="checkbox_5" /> <label for="chb_5">In incidunt praesentium recusandae autem et repellat. animi dignissimos nihil excepturi atque natus reprehenderit et libero aut architecto. quis repellat est aut eius natus laboriosam dicta repellat. nam voluptas voluptatem eum architecto. non beatae hic dolor. quidem cupiditate neque assumenda porro</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 -->
<!-- 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"> <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"> <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"> <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"> <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"> <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 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 -->
<!-- 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">Non et maxime laboriosam harum est.</span> <div class="form-item__description">Itaque et sunt vero vel autem exercitationem aut aut culpa corporis ut id</div> </div> <!-- END form-error-text_field component -->
<!-- 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">Et nam consequatur et autem magni sed voluptas nihil in veritatis.</span> </div> <!-- END form-error-text_field component -->
<!-- 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 veritatis et voluptatibus id sunt animi repudiandae molestiae omnis sed nesciunt.</span> </div> <!-- END form-error-select component -->
<!-- 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">Omnis qui qui odit itaque totam repellendus officia ut doloribus sint quidem ea qui.</span> </div> <!-- END form-error-radio_buttons_inline component -->
<!-- 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">Occaecati sapiente odit aut officiis aut ut laboriosam odit provident tempora.</span> </div> <!-- END form-error-radio_buttons_block component -->
<!-- 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">Et doloribus quis facilis accusamus recusandae eum sit eligendi.</span> </div> <!-- END form-error-checkboxes_inline component -->
<!-- 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">Voluptas sed sunt porro voluptates rerum mollitia perspiciatis vero eligendi ipsum pariatur unde perferendis. minus quidem quia quos cumque veritatis iure quia nihil omnis tenetur delectus consequatur veritatis. nostrum nesciunt est praesentium sint explicabo quae enim voluptatum ut consequatur</label> </div> <div class="form-item__checkbox"> <input type="checkbox" name="checkbox_button" id="chb_5" value="checkbox_5" /> <label for="chb_5">Voluptatem placeat laborum voluptate tempore ducimus illum quibusdam molestiae id qui debitis minus. esse reprehenderit porro molestias impedit. voluptatem et officiis quis quos commodi sint odio dolore. voluptas tempora laudantium et enim officiis tempore consequuntur quaerat natus eius</label> </div> </fieldset> <span id="form-item__error_8" class="form-item__error-message">Qui debitis veritatis exercitationem facere et dolores.</span> </div> <!-- END form-error-checkboxes_block component -->
<!-- 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">Et recusandae quia eos voluptas aut et ab.</span> </div> <!-- END form-error-password component -->