Skip navigation
Search
Search

Not sure what to do?

Browse subjects, locations and universities

Popular topics

Popular subjects

-

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.

Voluptatem nulla necessitatibus quia sed dolores voluptatibus ea porro sed iusto velit ut.
<!-- 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">Aut nam sit odio ab quod enim culpa doloribus dolor quam mollitia.</div>
</div>
<!-- END form-item-text_field component -->
Nostrum consequatur ullam fuga autem reprehenderit suscipit officiis porro esse voluptatem laboriosam voluptate pariatur temporibus
<!-- 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" required aria-required="true">
    <div class="form-item__description">Reprehenderit quos accusamus quo velit</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 -->
Esse debitis ab libero voluptate officiis ut perferendis quia molestiae pariatur qui vitae nam aliquam
<!-- 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">Placeat ut inventore fugiat</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 -->

Radio button with hidden label

<!-- START form-item-radio-button_no_label component -->
<p>
    <div class="form-item--radio-no-label">
        <input type="radio" name="checkbox_no_label" id="rdnl_1" value="rdnl_1" />
        <label for="rdnl_1">This label is hidden</label>
    </div>
</p>
<p>
    <div class="form-item--radio-no-label">
        <input type="radio" name="checkbox_no_label" id="rdnl_2" value="rdnl_2" />
        <label for="rdnl_2">This label is hidden</label>
    </div>
</p>
<!-- END form-item-radio-button_no_label component -->

<!-- START form-item-radio-button_no_label_disabled component -->
    <div class="form-item--radio-no-label">
        <input type="radio" name="checkbox_no_label_disabled" id="rdnl_3" value="rdnl_3" disabled="disabled" />
        <label for="rdnl_3">This label is hidden</label>
    </div>
<!-- END form-item-radio-button_no_label_disabled 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">Libero eveniet quasi eos incidunt delectus consequuntur. iste magnam ab dicta facere quia reprehenderit excepturi quasi molestiae consectetur omnis doloribus ut aut. sed unde sit nisi reprehenderit. aliquid omnis alias nobis veniam enim odit similique. quo esse quis aut illo eum debitis ratione dolorum sed vel</label>
        </div>
        <div class="form-item__checkbox">
            <input type="checkbox" name="checkbox_button" id="chb_5" value="checkbox_5" />
            <label for="chb_5">Cumque sit nisi officia vel itaque vero. temporibus in quas accusantium necessitatibus perspiciatis quasi quia dolor. assumenda quaerat ut qui iure voluptas eum. ab quia quo ea omnis nulla architecto. nisi soluta dolorem dolore enim eos voluptatem et est officia consequatur provident in</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 -->

Checkbox with hidden label

<!-- START form-item-checkboxes_no_label component -->
<div class="form-item--checkbox-no-label">
<input type="checkbox" name="checkbox_no_label" id="chnl_1" value="chnl_1" />
<label for="chnl_1">This label is hidden</label>
</div>
<!-- END form-item-checkboxes_no_label component -->

<!-- START form-item-checkboxes_no_label_disabled component -->
<div class="form-item--checkbox-no-label">
<input type="checkbox" name="checkbox_no_label_disabled" id="chnl_2" value="chnl_2" disabled="disabled" />
<label for="chnl_2">This label is hidden</label>
</div>
<!-- END form-item-checkboxes_no_label_disabled 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 -->

Password with show/hide toggle

<!-- START form-item--password-toggle component -->
<div class="form-item">
    <label for="password">Password:</label>
    <input type="password" class="form-item__password" name="password-toggle" id="password-toggle" data-password-toggle="true" value="You can see me" />
</div>
<div class="form-item">
    <label for="password">Password confirm:</label>
    <input type="password" class="form-item__password" name="password-confirm-toggle" id="password-confirm-toggle" data-password-toggle-show-text="Show password" data-password-toggle-hide-text="Hide password" data-password-toggle="true" value="You can see me" />
</div>
<!-- END form-item--password-toggle 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 -->

Fields with plus/minus buttons

<!-- START form-item--plus_minus component -->
<div class="content-columns content-columns--three-columns content-columns--padding">
  <div class="content-columns__column">
    <div class="form-item">
      <label for="select_element">Select element</label>
      <select id="select_element">
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
      </select>
    </div>
  </div>
  <div class="content-columns__column">
    <div class="form-item">
      <label for="select_element">Select element</label>
      <select id="select_element">
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
      </select>
    </div>
  </div>
  <div class="content-columns__column">
    <div class="form-item">
      <label for="select_element">Select element</label>
      <div class="input-with-actions">
        <select id="select_element">
          <option value="1">Option 1</option>
          <option value="2">Option 2</option>
          <option value="3">Option 3</option>
        </select>
        <div class="input-with-actions__actions">
          <div class="buttons">
            <div class="buttons__group">
              <button class="button button--plus" type="button">Add item</button>
              <button class="button button--minus" type="button">Remove item</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- END form-item--plus_minus component -->
Quidem nesciunt quibusdam quidem quos.
Neque nisi optio ipsum occaecati nihil quidem ut id illum autem
<!-- 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">Nihil non velit soluta rerum eos perferendis et quia ut molestiae consequatur unde.</span>
    <div class="form-item__description">Blanditiis asperiores nulla vero sit doloremque est a commodi impedit odit</div>
</div>
<!-- END form-error-text_field component -->
Ut quo nobis voluptate ad sed odio aut quae. 
<!-- 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">Aut aut ducimus aut quam facere explicabo delectus sed suscipit repudiandae provident.</span>
</div>
<!-- END form-error-text_field component -->
Dolorem nostrum quasi ex fuga eum ab dignissimos temporibus aliquam unde quam 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">Qui sunt dignissimos rerum.</span>
</div>
<!-- END form-error-select component -->
Radio buttons (inline):
Ducimus illum quidem error nam ut labore quia facere veritatis consequatur sed. 
<!-- 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">Dolores veritatis provident qui.</span>
</div>
<!-- END form-error-radio_buttons_inline component -->
Radio buttons (block):
Impedit quas quas quam accusantium. 
<!-- 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 necessitatibus iure laudantium necessitatibus ullam ratione possimus beatae sit asperiores deleniti ut.</span>
</div>
<!-- END form-error-radio_buttons_block component -->
Checkboxes (inline):
Ut tenetur harum eaque eius fugit laudantium dolore neque enim. 
<!-- 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">Est assumenda facilis qui maiores sunt molestiae possimus dolorem.</span>
</div>
<!-- END form-error-checkboxes_inline component -->
Checkboxes (block):
Ad repudiandae provident illo aut. 
<!-- 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">Aliquid ut totam eos saepe ea reiciendis culpa omnis voluptas sint. minima est iusto ut est fugit distinctio et laudantium eos sed adipisci occaecati tenetur vero. eius at optio et soluta nihil repellat voluptas quis rerum dolorem quis quis. culpa maiores voluptatem officia eum quibusdam nisi facere explicabo ut minima</label>
        </div>
        <div class="form-item__checkbox">
            <input type="checkbox" name="checkbox_button" id="chb_5" value="checkbox_5" />
            <label for="chb_5">Ut facilis sed optio ut culpa ad molestiae rem et esse recusandae sit et. quam sint enim amet commodi fuga optio vel. tenetur numquam eligendi dolor atque explicabo sunt. maxime enim molestiae et sint est numquam ut voluptas enim eum ea sunt minus delectus. voluptatum libero quia consequatur fugiat harum sint sunt eum sunt ipsa nobis. non inventore eligendi provident delectus error dolores rerum id architecto quos recusandae voluptas eaque. beatae consequatur maiores magnam deleniti aut et provident temporibus et unde</label>
        </div>
    </fieldset>
    <span id="form-item__error_8" class="form-item__error-message">Quidem molestias eligendi consectetur nesciunt excepturi eveniet dolore culpa.</span>
</div>
<!-- END form-error-checkboxes_block component -->

Voluptatem porro voluptates modi quia quos quis officiis. 
<!-- 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">Quis assumenda est enim in commodi consequuntur enim quia.</span>
</div>
<!-- END form-error-password component -->