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">Officia et dolore quibusdam sed nisi.</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">Quas neque sed ullam aliquid esse corporis fuga autem dolor</div> </div> <!-- END form-item-text_field_required component -->
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 -->
<!-- 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">Sapiente illo omnis autem neque repellendus quam ipsa sapiente adipisci aut neque sed molestiae maiores</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 -->
<!-- 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">Fuga quibusdam ut exercitationem quidem. quo consequatur commodi atque. nostrum aspernatur cupiditate fugit eum quos. ad quia quae magnam molestiae consectetur quibusdam voluptatem dolorem. blanditiis consequatur impedit nemo suscipit quo odit consectetur quia harum ut. mollitia sint numquam omnis aspernatur beatae doloribus. repellat ratione velit repellat</label> </div> <div class="form-item__checkbox"> <input type="checkbox" name="checkbox_button" id="chb_5" value="checkbox_5" /> <label for="chb_5">Dicta est odio voluptatem aspernatur occaecati corporis repellendus amet voluptates id ut voluptatem enim. cum quibusdam culpa esse. enim rerum dolor tenetur quod esse sunt autem error dolorum. aut exercitationem pariatur ut non. asperiores quaerat minima voluptate. temporibus aut assumenda laboriosam sint modi laudantium alias</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--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 -->
<!-- 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">Repellendus ratione accusantium voluptatem voluptas incidunt similique nostrum et laudantium et harum.</span> <div class="form-item__description">Quia et ratione qui corrupti suscipit voluptas sit non nostrum atque dolores velit dolore</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">Rerum aut molestias doloremque odio temporibus officia.</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">Consequatur pariatur aspernatur sed magnam ut enim voluptas debitis veniam.</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">Cupiditate corporis impedit fugit tempore pariatur rem suscipit quo.</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">Iure voluptas earum aut laborum et harum earum tempora corrupti.</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">Reprehenderit ipsam ipsum est optio qui nemo optio ut voluptas totam ut perspiciatis et tempora.</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">Enim accusantium dolor doloribus. ea dignissimos suscipit sit sapiente rerum est et vel. harum dolor occaecati qui. vitae sit deleniti laboriosam et adipisci dicta ratione quod minus</label> </div> <div class="form-item__checkbox"> <input type="checkbox" name="checkbox_button" id="chb_5" value="checkbox_5" /> <label for="chb_5">Eum aliquid blanditiis sequi suscipit maxime vel in perferendis sit. et accusantium cumque et aliquam ea incidunt. quod doloremque suscipit adipisci vero sit consequatur repellendus ea earum sed. reprehenderit quia molestiae eaque assumenda totam commodi voluptas sapiente. qui enim vero quam. ut rerum deleniti iure hic tempore reiciendis quidem</label> </div> </fieldset> <span id="form-item__error_8" class="form-item__error-message">Sunt voluptatum in culpa qui quasi magnam dolor facere non voluptatem illum.</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">Cum nihil est unde aut facilis fuga deleniti error alias eos nisi.</span> </div> <!-- END form-error-password component -->