Preface

The purpose of this pattern portfolio is to list all of the component available to the website. It is hoped that simply grouping several of these components together will create a production-ready form, from a HTML perspective.

Listed below is a set of guidelines and principles that may be useful when creating forms or new components.

  1. The canonical version of a component is the snippet – not whatever is in a full form used for user‑testing.
  2. Any space between form elements should come from a globally-used class, such as class="form-group"
  3. Use of repeated <br> tags to create space violates the previous rule
  4. Due to the nature of CSS, changing one property can have undesired drastic affects in unrelated elements. If you want to change a single elements styling in a single location, your best bet is adding a new class or using inline‑styles.
  5. Except in very rare (and documented) circumstances, input validation in this project is handled on the back‑end first and automatically fed through to the front end. However, the front‑end configuration file is held in this pattern portfolio.
  6. Components with various options, states, and interactivity have their own documentation. Components without it are inherently simple and need no configuration.
  7. The /public/ directory contains the .scss files, and source maps. The /dist/ directory contains production‑ready assets.
  8. Several components are built to work in conjunction with server-side code and processes. The postcode lookup and file uploads are good example of this. As such, the component in this library has several states, which the server will output depending on what's required.
  9. The bolding of form labels is not a global thing — is dependent on context

Let's begin…

address - lookup 

<!-- This form element isn't required -->
<form action="#" method="GET">

<fieldset class="postcode-search">
    <div class="form-group">
        <label for="postcode">
            <span class="form-label-bold">Postcode</span>
        </label>
        <input class="form-control half-width" id="postcode" type="text" data-postcode-search="search_term">

        <p class="postcode-term-change js-hidden" data-postcode-search="postcode_term_change">
            <b data-postcode-search="postcode_term"></b>
            <button class="text-button" data-postcode-search="change">Change</button>
        </p>

        <span class="field-validation-error" data-valmsg-for="postcode" data-valmsg-replace="true"></span>

        <div class="js-hidden" data-postcode-search="results">

            <div class="form-select">
                <select class="form-select" name="postcode" id="postcode" data-val="true" data-val-required="Select an address from the drop down menu"></select>
                <span class="arrow"></span>
            </div>

            <input type="hidden" name="result-saontext" data-result="saontext">
            <input type="hidden" name="result-paontext" data-result="paontext">
            <input type="hidden" name="result-paonrange" data-result="paonrange">
            <input type="hidden" name="result-streetname" data-result="streetname">
            <input type="hidden" name="result-locality" data-result="locality">
            <input type="hidden" name="result-town" data-result="town">
            <input type="hidden" name="result-county" data-result="county">
            <input type="hidden" name="result-postcode" data-result="postcode">
            <input type="hidden" name="result-uprn" data-result="uprn">
        </div>

        <div class="js-hidden" data-postcode-search="fallback">
            <p class="indent-error-message">Please type your address below.</p>

            <div class="form-group">
                <label for="building-and-street" class="form-label-bold">Building and street</label>
                <input type="text" class="form-control" id="building-and-street" name="building-and-street" data-address="building-and-street">
                <input class="form-control" data-address="address2" id="building-and-street2" name="building-and-street2" type="text" value="" />
            </div>

            <div class="form-group">
                <label for="town-or-city" class="form-label-bold">Town or city</label>
                <input type="text" class="form-control" id="town-or-city" name="town-or-city" data-address="town-or-city">
            </div>

            <div class="form-group">
                <label for="county" class="form-label-bold">County <span class="unbold">(optional)</span></label>
                <input type="text" class="form-control" id="county" name="county" data-address="county">
            </div>

            <div class="form-group">
                <label for="postcode" class="form-label-bold">Postcode</label>
                <input type="text" class="form-control" id="postcode" name="postcode" data-address="postcode">
            </div>
        </div>
    </div>

    <div class="form-group" data-postcode-search="button">
        <button class="button">Search for address</button>
    </div>
</fieldset>

<!-- Neither is this button, of </form> -->
<button class="button">Submit</button>
</form>

buttons - button 

Save and continue
<button class="button">Save and continue</button>

<input type="submit" class="button" value="Save and continue" />

<a href="button" class="button">Save and continue</a>

buttons - button continue 

<a href="#" class="button button-continue" role="button">Continue</a>

buttons - button disabled 

<button class="button" disabled="disabled">Save and continue</button>

buttons - button start now 

<a href="#" class="button button-get-started" role="button">Start now</a>

data - bottom right button 

Council Tax

Reference
012345678901

Amount (£)
£171.00

Council Tax

Reference
012345678901

Amount (£)
£171.00

Council Tax

Reference
012345678901

Amount (£)
£171.00

<div class="data-bottom-right-button">
    <div class="data-text">
        <p>Council Tax</p>
        <p>
            <span class="strong">Reference</span><br>
            012345678901
        </p>
        <p>
            <span class="strong">Amount</span> (£)<br>
            £171.00
        </p>
    </div>
    <div class="data-button">
        <button class="button">Remove</button>
    </div>
</div>

<div class="data-bottom-right-button">
    <div class="data-text">
        <p>Council Tax</p>
        <p>
            <span class="strong">Reference</span><br>
            012345678901
        </p>
        <p>
            <span class="strong">Amount</span> (£)<br>
            £171.00
        </p>
    </div>
    <div class="data-button">
        <button class="text-button">Change</button>
    </div>
</div>

<div class="data-bottom-buttons">
    <div class="data-text">
        <p>Council Tax</p>
        <p>
            <span class="strong">Reference</span><br>
            012345678901
        </p>
        <p>
            <span class="strong">Amount</span> (£)<br>
            £171.00
        </p>
    </div>
    <div class="data-button">
        <button class="text-button">Change</button>
        <span class="spacer"></span>
        <button class="button">Remove</button>
    </div>
</div>

data - table 

Dates and amounts
First 6 weeks £109.80 per week
Next 33 weeks £109.80 per week
Total estimated pay £4,282.20
Tell the mother’s employer 28 days before they want to start maternity pay
<table>
  <thead>
    <tr>
      <th colspan="2">Dates and amounts</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>First 6 weeks</td>
      <td>£109.80 per week</td>
    </tr>
    <tr>
      <td>Next 33 weeks</td>
      <td>£109.80 per week</td>
    </tr>
    <tr>
     <td>Total estimated pay</td>
      <td>£4,282.20</td>
    </tr>
    <tr>
      <td>Tell the mother’s employer</td>
      <td>28 days before they want to start maternity pay</td>
    </tr>
  </tbody>
</table>

data - table numeric 

Date Paper form Digital
25 November to 1 December 2013 2,763 1,792
2 to 8 December 2013 2,850 1,740
9 to 15 December 2013 2,388 1,683
<table>
  <thead>
    <tr>
      <th scope="col">Date</th>
      <th class="numeric" scope="col">Paper form</th>
      <th class="numeric" scope="col">Digital</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>25 November to 1 December 2013</td>
      <td class="numeric">2,763</td>
      <td class="numeric">1,792</td>
    </tr>
    <tr>
      <td>2 to 8 December 2013</td>
      <td class="numeric">2,850</td>
      <td class="numeric">1,740</td>
    </tr>
    <tr>
     <td>9 to 15 December 2013</td>
      <td class="numeric">2,388</td>
      <td class="numeric">1,683</td>
    </tr>
  </tbody>
</table>

file - uploads 

Browse and upload a file

Thank you, your file has been uploaded

File name: example_1.jpg
Delete file

Upload another file
  1. File name: example_2.jpg
    Delete file
  2. File name: who_onearthwoulduypload_such a huge--file.jpg
    Delete file

Thank you, your file has been uploaded

File name: who_onearthwoulduypload_such a huge--file.jpg
Delete file

Upload another file

Sorry something went wrong, please try again.

Upload another file

Image is too large

Images must be 10mb or less
Upload another file
<div class="file-upload">
    <div class="form-group" data-file-upload="button">
        <div class="form-upload-button">
            <span class="button">Browse and upload a file</span>
            <input type="file">
            <span class="file-name"></span>
        </div>
    </div>
</div>


<div class="file-upload">
    <div class="panel-indent-success">
        <p class="strong">Thank you, your file has been uploaded</p>
        <p>
            File name: <span class="file-name">example_1.jpg</span><br>
            <a href="#">Delete file</a>
        </p>
    </div>

    <div class="form-group" data-file-upload="button">
        <div class="form-upload-button">
            <span class="button">Upload another file</span>
            <input type="file">
            <span class="file-name"></span>
        </div>
    </div>
</div>


<div class="file-upload">
    <div class="form-group">
        <ol class="file-upload-list">
            <li>
                File name: <span class="file-name">example_2.jpg</span><br>
                <a href="#">Delete file</a>
            </li>
            <li>
                File name: <span class="file-name">who_onearthwoulduypload_such a huge--file.jpg</span><br>
                <a href="#">Delete file</a>
            </li>
        </ol>
    </div>

    <div class="panel-indent-success">
        <p class="strong">Thank you, your file has been uploaded</p>
        <p>
            File name: <span class="file-name">who_onearthwoulduypload_such a huge--file.jpg</span><br>
            <a href="#">Delete file</a>
        </p>
    </div>

    <div class="form-group" data-file-upload="button">
        <div class="form-upload-button">
            <span class="button">Upload another file</span>
            <input type="file">
            <span class="file-name"></span>
        </div>
    </div>
</div>


<div class="file-upload">
    <div class="panel-indent-error">
        <p class="strong">Sorry something went wrong, please try again.</p>
    </div>

    <div class="form-group" data-file-upload="button">
        <div class="form-upload-button">
            <span class="button">Upload another file</span>
            <input type="file">
            <span class="file-name"></span>
        </div>
    </div>
</div>


<div class="file-upload">
    <div class="panel-indent-error">
        <p class="strong">Image is too large</p>
        <span class="form-hint">Images must be 10mb or less</span>
    </div>

    <div class="form-group" data-file-upload="button">
        <div class="form-upload-button">
            <span class="button">Upload another file</span>
            <input type="file">
            <span class="file-name"></span>
        </div>
    </div>
</div>

form - avatar upload 

Upload your file
<div class="form-avatar-upload">
    <img class="form-avatar-image" src="/public/images/examples/headshot.jpg" alt="">
    <div class="form-upload-button">
        <span class="button">Upload your file</span>
        <input type="file">
        <span class="file-name"></span>
    </div>
</div>

form - checkboxes 

Which types of waste do you transport regularly?

Select all that apply

<fieldset>
  <legend class="form-label-bold">Which types of waste do you transport regularly?</legend>

  <p>Select all that apply</p>

  <label class="block-label disabled" for="checkbox-1">
    <input id="checkbox-1" type="checkbox" value="waste-animal" disabled>
    Waste from animal carcasses
  </label>

  <label class="block-label" for="checkbox-2">
    <input id="checkbox-2" type="checkbox" value="waste-mines">
    Waste from mines or quarries
  </label>

  <label class="block-label" for="checkbox-3">
    <input id="checkbox-3" type="checkbox" value="farm-agricultural">
    Farm or agricultural waste
  </label>
</fieldset>

form - checkbox native 

<label for="telephone-number">
	<span class="form-label">Enter your telephone number</span>
</label>
<input class="form-control" id="telephone-number" type="text">
<label class="form-checkbox" for="checkbox-telephone-number" >
  <input id="checkbox-telephone-number" type="checkbox" value="checkbox-telephone-number">
  I need to be contacted using a text phone
</label>

form - date 

Date of birth
For example, 31 03 1980
<form>
    <div class="form-group">
        <fieldset>
            <legend>
                <span class="form-label-bold">
                    Date of birth
                </span>
            </legend>

            <div class="form-date form-group form-date-group" data-grouped-inputs>

                <span class="field-validation-error" data-valmsg-for="Child.DateOfBirth.Day" data-valmsg-replace="true"></span>
                <span class="field-validation-error" data-valmsg-for="Child.DateOfBirth.Month" data-valmsg-replace="true"></span>
                <span class="field-validation-error" data-valmsg-for="Child.DateOfBirth.Year" data-valmsg-replace="true"></span>

                <span class="form-hint">For example, 31 03 1980</span>
                <div class="form-group-day" data-grouped-input>
                    <label for="Child.DateOfBirth.Day">Day</label>
                    <input maxlength="2" class="form-control" data-val="true" data-val-number="The field Day must be a number." data-val-range="Day must be between 1 and 31." data-val-range-max="31" data-val-range-min="1" data-val-required="Day field is required" id="Child_DateOfBirth_Day" name="Child.DateOfBirth.Day" type="text" pattern="[0-9]*" inputmode="numeric">
                </div>

                <div class="form-group-month" data-grouped-input>
                    <label for="Child.DateOfBirth.Month">Month</label>
                    <input maxlength="2" class="form-control" data-val="true" data-val-number="The field Month must be a number." data-val-range="Month must be between 1 and 12." data-val-range-max="12" data-val-range-min="1" data-val-required="Month field is required" id="Child_DateOfBirth_Month" name="Child.DateOfBirth.Month" type="text" pattern="[0-9]*" inputmode="numeric">
                </div>

                <div class="form-group-year" data-grouped-input>
                    <label for="Child.DateOfBirth.Year">Year</label>
                    <input maxlength="4" class="form-control" data-val="true" data-val-number="The field Year must be a number." data-val-range="Day must be between 1980 and 2014." data-val-range-max="2014" data-val-range-min="1980" data-val-required="Year field is required" id="Child_DateOfBirth_Year" name="Child.DateOfBirth.Year" type="text" pattern="[0-9]*" inputmode="numeric">
                </div>

            </div>
        </fieldset>

    </div>

    <button type="submit" class="button">Submit</button>

</form>

form - email 

<div class="form-group">
   <label for="email">
        <span class="form-label-bold">Email address <span class="unbold">(Optional)</span></span>
        <span class="form-hint">We’ll only use this to send you a receipt of your application</span>
    </label>
    <input class="form-control" type="text" id="email" name="email">
</div>

 <div class="form-group">
    <label for="email2">
        <span class="form-label-bold">Retype email address</span>
    </label>
    <input class="form-control" type="text" id="email2" name="email2">
</div>

form - error multiple 

Your personal details

<h1 class="heading-large">
  Your personal details
</h1>

<div class="form-group ">

  <label for="example-full-name" >

    <span class="form-label-bold">Full name</span>
    <span class="form-hint">As shown on your birth certificate or passport</span>

  </label>

  <input class="form-control" id="example-full-name" type="text" name="fullName" value="" >
</div>

<div class="form-group ">

  <label for="example-ni-number" >

    <span class="form-label-bold">National Insurance number</span>
    <span class="form-hint">
      It's on your National Insurance card, benefit letter, payslip or P60.
      <br>
      For example, 'VO 12 34 56 D'.
    </span>

  </label>

  <input class="form-control" id="example-ni-number" type="text" name="niNo" value="" >

</div>

<input class="button" type="submit" value="Continue">

form - error multiple show errors 

Message to alert the user to a problem goes here

Optional description of the error(s) and how to correct them

Your personal details

<div class="error-summary" role="group" aria-labelledby="error-summary-heading-example-2" tabindex="-1">

  <h1 class="heading-medium error-summary-heading" id="error-summary-heading-example-2">
    Message to alert the user to a problem goes here
  </h1>

  <p>
    Optional description of the error(s) and how to correct them
  </p>

  <ul class="error-summary-list">
    <li><a href="#example-full-name">Descriptive link to the question with an error</a></li>
    <li><a href="#example-ni-number">Descriptive link to the question with an error</a></li>
  </ul>

</div>

<h1 class="heading-large">
  Your personal details
</h1>

<div class="form-group error">

  <label for="example-full-name" id="error-full-name">

    <span class="form-label-bold">Full name</span>
    <span class="form-hint">As shown on your birth certificate or passport</span>
    <span class="error-message" id="error-message-full-name">Error message about full name goes here</span>

  </label>

  <input class="form-control" id="example-full-name" type="text" name="fullName" value="" aria-describedby="error-message-full-name">
</div>

<div class="form-group error">

  <label for="example-ni-number" id="error-ni-number">

    <span class="form-label-bold">National Insurance number</span>
    <span class="form-hint">
      It's on your National Insurance card, benefit letter, payslip or P60.
      <br>
      For example, 'VO 12 34 56 D'.
    </span>
    <span class="error-message" id="error-message-ni-number">
      Error message about National Insurance number goes here
    </span>

  </label>

  <input class="form-control" id="example-ni-number" type="text" name="niNo" value="" aria-describedby="error-message-ni-number">

</div>

<input class="button" type="submit" value="Continue">

form - error radio 

Check your personal details

Look at your name, signature and other details.

Are your personal details correct and up-to-date?
<h1 class="heading-large">
  Check your personal details
</h1>

<p class="lede">
  Look at your name, signature and other details.
</p>


<div class="form-group ">
  <fieldset>

    <legend >

      <span class="form-label-bold">
        Are your personal details correct and up-to-date?
      </span>

    </legend>

    <label class="block-label" for="personal_details_yes">
      <input id="personal_details_yes" type="radio" name="personal_details" value="Yes">
      <span></span> Yes, my personal details are correct
    </label>

    <label class="block-label" for="personal_details_no">
      <input id="personal_details_no" type="radio" name="personal_details" value="No">
      <span></span> No, some details are wrong or have changed
    </label>

  </fieldset>
</div>

<input class="button" type="submit" value="Continue">

form - error radio show errors 

Message to alert the user to a problem goes here

Optional description of the error(s) and how to correct them

Check your personal details

Look at your name, signature and other details.

Are your personal details correct and up-to-date? Error message about personal details goes here
<div class="error-summary" role="group" aria-labelledby="error-summary-heading-example-1" tabindex="-1">

  <h1 class="heading-medium error-summary-heading" id="error-summary-heading-example-1">
    Message to alert the user to a problem goes here
  </h1>

  <p>
    Optional description of the error(s) and how to correct them
  </p>

  <ul class="error-summary-list">
    <li><a href="#example-personal-details">Descriptive link to the question with an error</a></li>
  </ul>

</div>

<h1 class="heading-large">
  Check your personal details
</h1>

<p>
  Look at your name, signature and other details.
</p>

<form>
  <div class="form-group error">
    <fieldset>

      <legend id="example-personal-details">

        <span class="form-label-bold">
          Are your personal details correct and up-to-date?
        </span>
        <span class="error-message">
          Error message about personal details goes here
        </span>

      </legend>

      <label class="block-label" for="personal_details_yes">
        <input id="personal_details_yes" type="radio" name="personal_details" value="Yes">
        <span></span> Yes, my personal details are correct
      </label>

      <label class="block-label" for="personal_details_no">
        <input id="personal_details_no" type="radio" name="personal_details" value="No">
        <span></span> No, some details are wrong or have changed
      </label>

    </fieldset>
  </div>

  <input class="button" type="submit" value="Continue">

</form>

form - hint text 

<label for="ni-number">
    <span class="form-label">National Insurance number</span>
    <span class="form-hint">It'll be on your last payslip. For example, JH 21 90 0A.</span>
</label>
<input class="form-control" id="ni-number" type="text">

form - input nospace 

If it includes any dashes or hyphens, leave these out
Where to find this

Your account number can be found in the top right corner of your bill

<div class="form-group">
   	<label class="form-label-bold" for="council_tax">Council tax account number</label>
	<span class="form-hint">If it includes any dashes or hyphens, leave these out</span>
	<details>
	    <summary><span class="summary">Where to find this</span></summary>
	    <div class="panel-indent">
	        <p class="form-block">Your account number can be found in the top right corner of your bill</p>
	    </div>
	</details>
    <input class="form-control" type="text" id="council_tax" name="council_tax" data-nospace>
</div>

form - inset checkboxes 

What is your nationality?

Select all options that are relevant to you.

<fieldset class="form-group">
  <legend>
    <span class="form-label-bold">
      What is your nationality?
    </span>
  </legend>
  <p>
    Select all options that are relevant to you.
  </p>
  <div class="form-group-compound">
    <label class="block-label" for="nationality-british">
      <input id="nationality-british" type="checkbox" value="British">
      British (including English, Scottish, Welsh and Northern Irish)
    </label>
    <label class="block-label" for="nationality-irish">
      <input id="nationality-irish" type="checkbox" value="Irish">
      Irish
    </label>
    <label class="block-label" for="nationality-other" data-target="example-different-country">
      <input id="nationality-other" type="checkbox" value="Citizen of a different country">
      Citizen of a different country
    </label>
  </div>
  <div class="panel-indent js-hidden" id="example-different-country">
    <label class="form-label" for="nationality-other-country">Country name</label>
    <input class="form-control" type="text" id="nationality-other-country">
  </div>
</fieldset>

form - inset radios 

Do you know their National Insurance number?
<fieldset class="form-group">
  <legend>
    <span class="form-label">
      Do you know their National Insurance number?
    </span>
  </legend>
  <div class="form-group-compound inline">
    <label class="block-label" data-target="example-ni-no" for="radio-indent-1">
      <input id="radio-indent-1" type="radio" name="radio-indent-group" value="Yes">
      Yes
    </label>
    <label class="block-label" for="radio-indent-2">
      <input id="radio-indent-2" type="radio" name="radio-indent-group" value="No">
      No
    </label>
  </div>
  <div class="panel-indent js-hidden" id="example-ni-no">
    <label class="form-label" for="national-insurance">National Insurance number</label>
    <input class="form-control" type="text" id="national-insurance">
  </div>
</fieldset>

form - labels 

<label for="full-name-f1">
	<span class="form-label">Full name</span>
</label>
<input class="form-control" id="full-name-f1" type="text">

form - radio buttons 

or

<div class="form-group">
	<label class="block-label" for="radio-1">
	  <input id="radio-1" type="radio" name="radio-group" value="Northern Ireland">
	  Northern Ireland
	</label>
	<label class="block-label" for="radio-2">
	  <input id="radio-2" type="radio" name="radio-group" value="Isle of Man or the Channel Islands">
	  Isle of Man or the Channel Islands
	</label>
	<p class="form-block">or</p>
	<label class="block-label" for="radio-3">
	  <input id="radio-3" type="radio" name="radio-group" value="I am a British citizen living abroad">
	  I am a British citizen living abroad
	</label>
</div>

form - radio buttons inline 

<fieldset class="form-group inline">
  <label class="block-label" for="radio-inline-1">
    <input id="radio-inline-1" type="radio" name="radio-inline-group" value="Yes">
    Yes
  </label>
  <label class="block-label" for="radio-inline-2">
    <input id="radio-inline-2" type="radio" name="radio-inline-group" value="No">
    No
  </label>
</fieldset>

form - select 

<div class="form-group">
    <div class="form-select">
        <select name="address" id="address">
            <option value="13 Sample Street">13 Sample Street</option>
            <option value="14 Sample Street">14 Sample Street</option>
            <option value="15 Sample Street">15 Sample Street</option>
            <option value="16 Sample Street">16 Sample Street</option>
            <option value="17 Sample Street">17 Sample Street</option>
            <option value="18 Sample Street">18 Sample Street</option>
        </select>
        <span class="arrow"></span>
    </div>
</div>

<div class="form-group">
    <div class="form-select small">
        <select name="valid_from_year" id="valid_from_year">
            <option value="2005">2005</option>
            <option value="2006">2006</option>
            <option value="2007">2007</option>
            <option value="2008">2008</option>
            <option value="2009">2009</option>
            <option value="2010">2010</option>
            <option value="2011">2011</option>
            <option value="2012">2012</option>
            <option value="2013">2013</option>
            <option value="2014">2014</option>
            <option value="2015">2015</option>
        </select>
        <span class="arrow"></span>
    </div>
</div>


<div class="form-select-row">
    <div class="form-select small">
        <select>
            <option value="2005">2005</option>
            <option value="2005">2005</option>
        </select>
        <span class="arrow"></span>
    </div>
    <div class="form-select small">
        <select>
            <option value="2006">2006</option>
            <option value="2006">2006</option>
        </select>
        <span class="arrow"></span>
    </div>
</div>

form - spacing 

<!-- Use .form-group to create spacing when wrapping label and input pairs -->
<div class="form-group">
  <label for="first-name-2">
      <span class="form-label">First name</span>
  </label>
  <input class="form-control" id="first-name-2" type="text">
</div>
<div class="form-group">
  <label for="last-name-2">
      <span class="form-label">Last name</span>
  </label>
  <input class="form-control" id="last-name-2" type="text">
</div>

form - split inputs 

ABCD-EF GB
GB
<div class="form-group">
    <label>
        <span class="form-label-bold">Reference</span>
    </label>
    <div class="form-split-inputs">
        <span class="digit">ABCD-EF</span>
        <input type="text" class="form-control" maxlength="8" size="16">
        <span class="digit">GB</span>
        <input type="text" class="form-control" maxlength="2" size="4">
    </div>
</div>

<div class="form-group">
    <label>
        <span class="form-label-bold">Reference</span>
    </label>
    <div class="form-split-inputs">
        <input type="text" class="form-control" maxlength="8" size="16">
        <span class="digit">GB</span>
        <input type="text" class="form-control" maxlength="2" size="4">
    </div>
</div>

form - step buttons 

Previous
<div class="form-step-buttons">
    <a class="button" href="#">Previous</a>
    <button class="button" type="submit">Continue</button>
</div>

<div class="form-step-buttons">
    <button class="text-button">Previous</button>
    <span class="spacer"></span>
    <button class="button" type="submit">Continue</button>
</div>

<div class="form-step-buttons">
    <button class="button">Previous</button>
    <span class="spacer"></span>
    <button class="text-button">Continue</button>
</div>

<div class="form-step-buttons">
    <button class="text-button">Previous</button>
    <span class="spacer"></span>
    <button class="text-button">Continue</button>
</div>

form - textarea 

<textarea data-auto-size class="form-control form-control-1-1" name="important-details" id="important-details" rows="3"></textarea>

<textarea data-auto-size data-char-count="500" maxlength="500" class="form-control form-control-1-1" name="important-details" id="important-details" rows="3"></textarea>

form - text button 

<button class="text-button">Start again</button>

form - validation 

Which types of waste do you transport regularly?

Select all that apply

Date of birth

For example, 31 3 1980

Are your personal details correct and up-to-date?
Do you know their National Insurance number?
<form action="" method="post">
    <div class="form-group">
        <label for="Child.LastName">
            <span class="form-label-bold">First Name</span>
        </label>
        <input class="form-control"
            id="Child_FirstName"
            name="Child.FirstName"
            type="text"
            value=""
            data-val="true"
            data-val-length="First name must be minimum 3 characters and maximum 30"
            data-val-length-max="30"
            data-val-length-min="3"
            data-val-required="The First name field is required.">
    </div>

    <div class="form-group">
        <label for="Child.LastName">
            <span class="form-label-bold">Last Name</span>
        </label>
        <input class="form-control"
            id="Child_LastName"
            name="Child.LastName"
            type="text"
            value=""
            data-val="true"
            data-val-length="Last name must be minimum 3 characters and maximum 30"
            data-val-length-max="30"
            data-val-length-min="3"
            data-val-required="The Last name field is required.">
    </div>

    <div class="form-group">
        <label for="Child.LastName">
            <span class="form-label-bold">Date of birth</span>
        </label>
        <input class="form-control"
            name="Child.DateOfBirth.Day"
            type="number"
            id="Child_DateOfBirth_Day"
            value=""
            max="31"
            min="0"
            pattern="[0-9]*"
            data-val="true"
            data-val-number="The field Day must be a number."
            data-val-range="Day must be between 1 and 31."
            data-val-range-max="31"
            data-val-range-min="1"
            data-val-regex="Please enter a valid day."
            data-val-regex-pattern="\d{1,31}"
            data-val-required="The Day field is required.">
    </div>

    <div class="form-group">
        <fieldset>
            <legend class="form-label-bold">Which types of waste do you transport regularly?</legend>
            <p>Select all that apply</p>
            <label class="block-label" for="checkbox-1">
                <input id="checkbox-1" type="checkbox" value="waste-animal"> Waste from animal carcasses
            </label>
            <label class="block-label" for="checkbox-2">
                <input id="checkbox-2" type="checkbox" value="waste-mines"> Waste from mines or quarries
            </label>
        </fieldset>
    </div>

    <div class="form-group">
        <div class="form-select">
            <select name="" id="">
                <option value="Lorem ipsum dolor">Lorem ipsum dolor</option>
                <option value="Dolor sit amet">Dolor sit amet</option>
            </select>
            <span class="arrow"></span>
        </div>
    </div>

    <div class="form-group">
        <fieldset>
            <legend>
                <span class="form-label-bold">
            Date of birth
          </span>
            </legend>
            <div class="form-date">
                <p class="form-hint">For example, 31 3 1980</p>
                <div class="form-group form-group-day">
                    <label for="dob-day">Day</label>
                    <input class="form-control" id="dob-day" type="number" pattern="[0-9]*" min="0" max="31">
                </div>
                <div class="form-group form-group-month">
                    <label for="dob-month">Month</label>
                    <input class="form-control" id="dob-month" type="number" pattern="[0-9]*" min="0" max="12">
                </div>
                <div class="form-group form-group-year">
                    <label for="dob-year">Year</label>
                    <input class="form-control" id="dob-year" type="number" pattern="[0-9]*" min="0" max="2014">
                </div>
            </div>
        </fieldset>
    </div>
    <div class="form-group ">
        <fieldset>
            <legend>
                <span class="form-label-bold">
            Are your personal details correct and up-to-date?
          </span>
            </legend>
            <label class="block-label" for="personal_details_yes">
                <input id="personal_details_yes" type="radio" name="personal_details" value="Yes">
                <span></span> Yes, my personal details are correct
            </label>
            <label class="block-label" for="personal_details_no">
                <input id="personal_details_no" type="radio" name="personal_details" value="No">
                <span></span> No, some details are wrong or have changed
            </label>
        </fieldset>
    </div>

    <div class="form-group">
        <fieldset class="inline">
            <legend>
                <span class="form-label">
              Do you know their National Insurance number?
            </span>
            </legend>
            <div class="form-group form-group-compound">
                <label class="block-label" data-target="example-ni-no" for="radio-indent-1">
                    <input id="radio-indent-1" type="radio" name="radio-indent-group" value="Yes"> Yes
                </label>
                <label class="block-label" for="radio-indent-2">
                    <input id="radio-indent-2" type="radio" name="radio-indent-group" value="No"> No
                </label>
            </div>
            <div class="panel-indent js-hidden" id="example-ni-no">
                <label class="form-label" for="national-insurance">National Insurance number</label>
                <input class="form-control" type="text" id="national-insurance">
            </div>
        </fieldset>
    </div>

    <div class="form-group">
        <button class="button">Continue</button>
    </div>
</form>

grouped - inputs 

Date of birth
For example, 31 03 1980

16

16
<form class="form-group">
    <fieldset>
        <legend>
            <span class="form-label-bold">
                Date of birth
            </span>
        </legend>

        <div class="form-date form-group form-date-group" data-grouped-inputs>

            <span class="field-validation-error" data-valmsg-for="Child.DateOfBirth.Day" data-valmsg-replace="true"></span>
            <span class="field-validation-error" data-valmsg-for="Child.DateOfBirth.Month" data-valmsg-replace="true"></span>
            <span class="field-validation-error" data-valmsg-for="Child.DateOfBirth.Year" data-valmsg-replace="true"></span>

            <span class="form-hint">For example, 31 03 1980</span>
            <div class="form-group-day" data-grouped-input>
                <label for="Child.DateOfBirth.Day">Day</label>
                <input maxlength="2" class="form-control" data-val="true" data-val-number="The field Day must be a number." data-val-range="Day must be between 1 and 31." data-val-range-max="31" data-val-range-min="1" data-val-required="Day field is required" id="Child_DateOfBirth_Day" name="Child.DateOfBirth.Day" type="text" pattern="[0-9]*" inputmode="numeric">
            </div>

            <div class="form-group-month" data-grouped-input>
                <label for="Child.DateOfBirth.Month">Month</label>
                <input maxlength="2" class="form-control" data-val="true" data-val-number="The field Month must be a number." data-val-range="Month must be between 1 and 12." data-val-range-max="12" data-val-range-min="1" data-val-required="Month field is required" id="Child_DateOfBirth_Month" name="Child.DateOfBirth.Month" type="text" pattern="[0-9]*" inputmode="numeric">
            </div>

            <div class="form-group-year" data-grouped-input>
                <label for="Child.DateOfBirth.Year">Year</label>
                <input maxlength="4" class="form-control" data-val="true" data-val-number="The field Year must be a number." data-val-range="Day must be between 1980 and 2014." data-val-range-max="2014" data-val-range-min="1980" data-val-required="Year field is required" id="Child_DateOfBirth_Year" name="Child.DateOfBirth.Year" type="text" pattern="[0-9]*" inputmode="numeric">
            </div>

        </div>
    </fieldset>

</form>

<hr>

<div class="form-group">
    <label>
        <span class="form-label-bold">Invoice number</span>
    </label>
    <div class="form-split-inputs" data-grouped-inputs>
        <span class="digit">16</span>
        <span data-grouped-input>
            <input type="text" class="form-control" maxlength="6" size="8" id="invoices_inv_no" name="invoices_inv_no" name="invoices_inv_no[1]">
        </span>
        <span data-grouped-input>
            <input type="text" class="form-control" maxlength="10" size="14" id="invoices_inv_no" name="invoices_inv_no[2]">
        </span>
    </div>
</div>

<hr>

<div class="form-group">
    <label>
        <span class="form-label-bold">Invoice number</span>
    </label>
    <div class="form-split-inputs" data-grouped-inputs>
        <span class="digit">16</span>
        <input data-grouped-input type="text" class="form-control" maxlength="6" size="8" id="invoices_inv_no" name="invoices_inv_no" name="invoices_inv_no[1]">
        <input data-grouped-input type="text" class="form-control" maxlength="10" size="14" id="invoices_inv_no" name="invoices_inv_no[2]">
    </div>
</div>

header - basket 

<header role="banner" id="global-header">
  <div class="header-wrapper">
    <div class="header-global">
      <div class="header-logo">
        <a href="/" title="Go to the Medway.GOV.UK homepage" id="logo" class="content">
          <img src="/public/images/medway-logo.gif?0.13.0" alt="http://www.medway.gov.uk/">
        </a>
      </div>
    </div>

    <div class="header-basket-container">
      <a href="/example/online_payments/form_2" class="header-basket">
        Basket
        <span class="items">1</span>
      </a>
    </div>
  </div>
</header>

layout - grid halves 

Content

Content

<div class="grid-row">
  <div class="column-half">
    <p>Content</p>
  </div>
  <div class="column-half">
    <p>Content</p>
  </div>
</div>

layout - grid quarters 

Content

Content

Content

Content

<div class="grid-row">
  <div class="column-quarter">
    <p>Content</p>
  </div>
  <div class="column-quarter">
    <p>Content</p>
  </div>
  <div class="column-quarter">
    <p>Content</p>
  </div>
  <div class="column-quarter">
    <p>Content</p>
  </div>
</div>

layout - grid thirds 

Content

Content

Content

<div class="grid-row">
  <div class="column-third">
    <p>Content</p>
  </div>
  <div class="column-third">
    <p>Content</p>
  </div>
  <div class="column-third">
    <p>Content</p>
  </div>
</div>

layout - grid thirds reversed 

Content

Content

<div class="grid-row">
  <div class="column-two-thirds">
    <p>Content</p>
  </div>
  <div class="column-third">
    <p>Content</p>
  </div>
</div>

layout - spacing 

15px gutter example
30px gutter example
<div class="grid-row">
  <div class="column-half">
    <img src="/public/images/examples/15px-gutter-example.png" alt="15px gutter example">
  </div>
  <div class="column-half">
    <img src="/public/images/examples/30px-gutter-example.png" alt="30px gutter example">
  </div>
</div>

phase - banner alpha 

ALPHA This is a new service – your feedback will help us to improve it.

<div class="phase-banner-alpha">
  <p>
    <strong class="phase-tag">ALPHA</strong>
    <span>This is a new service – your <a href="#">feedback</a> will help us to improve it.</span>
  </p>
</div>

phase - banner beta 

BETA This is a new service – your feedback will help us to improve it.

<div class="phase-banner-beta">
  <p>
    <strong class="phase-tag">BETA</strong>
    <span>This is a new service – your <a href="#">feedback</a> will help us to improve it.</span>
  </p>
</div>

print - print 

<div class="print-link">
    <a href="#" rel="nofollow" target="_blank">Print</a>
</div>

school - lookup 

<fieldset class="school-search">

	<div>
		<div class="form-group">
			<label for="school_name">
				<span class="form-label-bold">Name of school</span>
			</label>
			<input type="text" class="form-control" name="school_name" id="school_name" data-school-search="search_name">
		</div>

		<div class="form-group" data-school-search="postcode_input">
			<label for="school_postcode">
				<span class="form-label-bold">Postcode</span>
			</label>
			<input type="text" class="form-control half-width" name="school_postcode" id="school_postcode" data-school-search="search_postcode">
		</div>

		<div class="form-group" data-school-search="button">
			<button class="button">Search for address</button>
		</div>
	</div>

    <div class="js-hidden" data-school-search="results">
        <p>
            <span class="strong">Name of school</span><br>
            <span data-school-search="school_name"></span>
        </p>

        <p>
            <span class="strong">Postcode</span><br>
            <span data-school-search="school_postcode"></span>
        </p>

        <input type="hidden" name="school_name" data-school-search="school_name_field">
        <input type="hidden" name="school_postcode" data-school-search="school_postcode_field">

        <div class="js-hidden" data-school-search="choose_result">
            <label for="school_select">
                <span class="form-label">School</span>
            </label>
            <div class="form-select">
                <select name="school_select" id="school_select"></select>
                <span class="arrow"></span>
            </div>
        </div>

        <p class="form-block">
            <button class="text-button" data-school-search="change">Change</button>
        </p>
    </div>

    <div class="js-hidden" data-school-search="fallback">
        <p class="indent-error-message">This postcode is outside of Medway. Type your address  below.</p>

        <div class="form-group">
            <label for="headteacher_name">
                <span class="form-label-bold">Headteacher name</span>
            </label>
            <input type="text" class="form-control" id="headteacher_name" name="headteacher_name">
        </div>

        <div class="form-group">
            <label for="main_phone">
                <span class="form-label-bold">Main phone</span>
            </label>
            <input type="text" class="form-control" id="main_phone" name="main_phone">
        </div>

        <div class="form-group">
            <label for="building_and_street">
                <span class="form-label-bold">Building and street</span>
            </label>
            <input type="text" class="form-control" id="building" name="building">
            <input type="text" class="form-control" id="street" name="street">
        </div>

        <div class="form-group">
            <label for="town_or_city">
                <span class="form-label-bold">Town or city</span>
            </label>
            <input type="text" class="form-control" id="town_or_city" name="town_or_city">
        </div>

        <div class="form-group">
            <label for="country">
                <span class="form-label-bold">Country <span class="unbold">(optional)</span></span>
            </label>
            <input type="text" class="form-control" id="country" name="country">
        </div>

        <div class="form-group">
            <label for="postcode">
                <span class="form-label-bold">Postcode</span>
            </label>
            <input type="text" class="form-control" id="postcode" name="postcode">
        </div>
    </div>

</fieldset>

table - table 

Item Description
Child’s name: Mike Smith
Address: Gun Wharf
Dock Road
Chatham
ME4 4TR




Child’s name: Mike Smith
Address: Gun Wharf
Dock Road
Chatham
ME4 4TR




Child’s name: Mike Smith
Address: Gun Wharf
Dock Road
Chatham
ME4 4TR
<table>
	<tr>
		<th>Item</th>
		<th>Description</th>
	</tr>
  <tr>
    <td>Child’s name:</td>
    <td>Mike Smith</td>
  </tr>
  <tr>
    <td>Address:</td>
    <td>Gun Wharf <br>Dock Road <br>Chatham <br>ME4 4TR</td>
  </tr>
</table>

<br><br><br><br>

<table>
  <tr>
    <td>Child’s name:</td>
    <td>Mike Smith</td>
  </tr>
  <tr>
    <td>Address:</td>
    <td>Gun Wharf <br>Dock Road <br>Chatham <br>ME4 4TR</td>
  </tr>
</table>

<br><br><br><br>

<table class="raw-table">
  <tr>
    <td>Child’s name:</td>
    <td>Mike Smith</td>
  </tr>
  <tr>
    <td>Address:</td>
    <td>Gun Wharf <br>Dock Road <br>Chatham <br>ME4 4TR</td>
  </tr>
</table>

table - rwd 

1.

Name: Jane Smith

Date of birth: 01 03 2008

Gender: Female

Name of School: Gordon Infant School

2.

Name: Mary Smith

Date of birth: 25 12 2009

Gender: Female

Name of School: Gordon Infant Change

<div class="rwd-table">

    <div class="rwd-table-row">
        <div class="rwd-table-col-num">1.</div>
        <div class="rwd-table-content">
            <p>
                <span>Name:</span>
                <span>Jane Smith</span>
            </p>
            <p>
                <span>Date of birth:</span>
                <span>01 03 2008</span>
            </p>
            <p>
                <span>Gender:</span>
                <span>Female</span>
            </p>
            <p>
                <span>Name of School:</span>
                <span>Gordon Infant School</span>
            </p>
        </div>
        <div class="rwd-table-actions">
            <a href="#">Change</a>
        </div>
    </div>

    <div class="rwd-table-row">
        <div class="rwd-table-col-num">2.</div>
        <div class="rwd-table-content">
            <p>
                <span>Name:</span>
                <span>Mary Smith</span>
            </p>
            <p>
                <span>Date of birth:</span>
                <span>25 12 2009</span>
            </p>
            <p>
                <span>Gender:</span>
                <span>Female</span>
            </p>
            <p>
                <span>Name of School:</span>
                <span>Gordon Infant Change</span>
            </p>
        </div>
        <div class="rwd-table-actions">
            <a href="#">Change</a>
        </div>
    </div>
</div>

typography - body copy 

A 24px lead paragraph.

A 19px body copy paragraph.

A 16px supporting text paragraph.

<p class="lede">A <em class="highlight">24px</em> lead paragraph.</p>

<p class="font-small">A <em class="highlight">19px</em> body copy paragraph.</p>

<p class="font-xsmall">A <em class="highlight">16px</em> supporting text paragraph.</p>

typography - headings 

A 48px Bold heading

A 36px Bold heading

A 24px Bold heading

A 19px Bold heading

<h1 class="heading-xlarge">A <em class="highlight">48px Bold</em> heading</h1>

<h2 class="heading-large">A <em class="highlight">36px Bold</em> heading</h2>

<h3 class="heading-medium">A <em class="highlight">24px Bold</em> heading</h3>

<h4 class="heading-small">A <em class="highlight">19px Bold</em> heading</h4>

typography - inset text 

It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application.

It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application.

<div class="panel-indent">
  <p>
    It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application.
  </p>
</div>

<div class="panel-indent-error">
  <p>
    It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application.
  </p>
</div>

typography - lead paragraph 

A 24px lead paragraph. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla.

A 19px body copy paragraph. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla.

<p class="lede">
  A <em class="highlight">24px</em> lead paragraph. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla.
</p>

<p>
  A <em class="highlight">19px</em> body copy paragraph. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla.
</p>

typography - lists 

  • here is a bulleted list
  • vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor
  • vestibulum id ligula porta felis euismod semper
  • integer posuere erat a ante venenatis dapibus posuere velit aliquet
  1. here is a numbered list
  2. vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor
  3. vestibulum id ligula porta felis euismod semper
  4. integer posuere erat a ante venenatis dapibus posuere velit aliquet
  5. and here is a numbered sub-list
    1. vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor
    2. vestibulum id ligula porta felis euismod semper
  • here is a numbered list
  • vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor
  • vestibulum id ligula porta felis euismod semper
  • integer posuere erat a ante venenatis dapibus posuere velit aliquet
  • and here is a numbered sub-list
    1. vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor
    2. vestibulum id ligula porta felis euismod semper
<ul class="list-bullet">
	<li>here is a bulleted list</li>
	<li>vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor</li>
	<li>vestibulum id ligula porta felis euismod semper</li>
	<li>integer posuere erat a ante venenatis dapibus posuere velit aliquet</li>
</ul>


<ol class="list-number">
	<li>here is a numbered list</li>
	<li>vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor</li>
	<li>vestibulum id ligula porta felis euismod semper</li>
	<li>integer posuere erat a ante venenatis dapibus posuere velit aliquet</li>
	<li>
		and here is a numbered sub-list
		<ol class="list-number">
			<li>vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor</li>
			<li>vestibulum id ligula porta felis euismod semper</li>
		</ol>
	</li>
</ol>


<div class="content-block">
	<ul>
		<li>here is a numbered list</li>
		<li>vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor</li>
		<li>vestibulum id ligula porta felis euismod semper</li>
		<li>integer posuere erat a ante venenatis dapibus posuere velit aliquet</li>
		<li>
		  	and here is a numbered sub-list
		  	<ol>
		  		<li>vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor</li>
		  		<li>vestibulum id ligula porta felis euismod semper</li>
		  	</ol>
		</li>
	</ul>
</div>

typography - paragraphs 

A 19px body copy paragraph. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla.

A 16px supporting text paragraph. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla.

<p>
  A <em class="highlight">19px</em> body copy paragraph. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla.
</p>

<p class="font-xsmall">
  A <em class="highlight">16px</em> supporting text paragraph. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla.
</p>

typography - progressive disclosure 

Help with nationality

If you’re not sure about your nationality, try to find out from an official document like a passport or national ID card.

We need to know your nationality so we can work out which elections you’re entitled to vote in. If you can’t provide your nationality, you’ll have to send copies of identity documents through the post.

<details>
  <summary><span class="summary">Help with nationality</span></summary>
  <div class="panel-indent">
    <p>
      If you’re not sure about your nationality, try to find out from an official document like a passport or national ID card.
    </p>
    <p>
      We need to know your nationality so we can work out which elections you’re entitled to vote in. If you can’t provide your nationality, you’ll have to send copies of identity documents through the post.
    </p>
  </div>
</details>