Forms

The examples on this page show how we manage forms and their fields. Recommendations are based on Adam Silver's article Form design: from zero to hero all in one blog post and the GOV.UK design system.

Top tips

  • Every <input> needs a <label>. Do not wrap inputs in labels, put labels above the input.
  • Do not use the placeholder attribute on <input> fields.
  • Use fixed width inputs for content that has a specific, known length. Postcode inputs should be postcode-sized, telephone number inputs should be telephone number-sized.
  • Make form fields look like form fields: apply a border and make sure they are empty to begin with. A height of 44px or more makes them easy to tap on touch screen devices.
  • Make sure any <button> looks like a button. Align them to the left edge of the last input (the right edge for right-to-left languages) where users naturally look for them. Use a verb for button text because the user is doing something, and relate it to what they are doing - avoid generic ‘Submit’ buttons.
  • The <select> element should be a last resort as they’re really hard to use. Try radio buttons instead. If there’s a long list of options, use JavaScript to enhance the <select> into an auto-complete field (not to be confused with the autocomplete attribute).
  • If you have to use a <select>, don't submit a form when its value changes. Select boxes that submit the form automatically when the user selects an option cause problems for keyboard and screen reader users.

Required fields

It is best practice to only ask questions that are strictly necessary.

In the event that a form contains both optional and required fields, to clearly identify the required fields to all users add <span class="required">(Required)</span> within the <label>.

How to add hint text

To provide hint text advising how to complete a field, add a <div class="field-hint">. Check the examples that follow to see where this should be added. The pattern differs slightly for checkbox and radio inputs compared to other input types.

Each instance of <div class="field-hint"> must have a unique ID that is used as the value of the aria-describedby attribute that must be added to the associated <input>.

Use the pattern id="hint-..., replacing the ... with your unique wording.

Provide hint text when users are more likely to make a mistake, such as when having to satisfy a complex set of password rules. Error messages should be a last resort. Keep hint text brief and to the point. Do not use long paragraphs and lists.

Dealing with text

Open this Form inputs for text in a new tab

HTML:

<form novalidate>
	<div class="field">
		<label for="name">
			<span class="field-label">Name <span class="required">(Required)</span></span>
		</label>
		<div class="field-hint" id="hint-name">E.g. Robin Smith</div>
		<input type="text" id="name" name="name" autocomplete="name" aria-describedby="hint-name">
	</div>

	<div class="field">
		<label for="email">
			<span class="field-label">Email</span>
		</label>
		<div class="field-hint" id="hint-email">E.g. robin.smith@example.co.uk</div>
		<input type="email" id="email" name="email" autocomplete="email" autocapitalize="none" autocorrect="off" spellcheck="false" inputmode="email" aria-describedby="hint-email">
	</div>

	<div class="field">
		<label for="website">
			<span class="field-label">Website address</span>
		</label>
		<input type="url" id="website" name="website" autocomplete="url" autocapitalize="none" autocorrect="off" spellcheck="false" inputmode="url">
	</div>

	<div class="field">
		<label for="password">
			<span class="field-label">Password</span>
		</label>
		<div class="field-hint" id="hint-password">Must contain 8+ characters with at least 1 number</div>
		<input type="password" id="password" name="password" autocapitalize="none" autocorrect="off" spellcheck="false" aria-describedby="hint-password">
	</div>

	<div class="field">
		<label for="message">
			<span class="field-label">Your message</span>
		</label>
		<textarea id="message" name="message"></textarea>
	</div>
</form>

How to make filling in text fields easier

Use the specific input type when asking for email addresses, URLs and passwords.

Adding the autocomplete attribute to common fields such as name, address, email etc. can help to speed up the form filling process for users. Here is a list of valid autocomplete values.

Use autocapitalize="none", autocorrect="off" and spellcheck="false" to stop browsers automatically changing user input on fields that expect grammatically incorrect data, such as email addresses and passwords.

Dealing with numbers

Open this Form inputs for numbers in a new tab

HTML:

<form novalidate>
	<div class="field">
		<label for="account-number">
			<span class="field-label">Account number</span>
		</label>
		<div class="field-hint" id="hint-account-number">Must be between 6 and 8 numbers long</div>
		<input type="text" class="input-width-10" id="account-number" name="account-number" pattern="[0-9]*" maxlength="8" inputmode="numeric" aria-describedby="hint-account-number">
	</div>

	<div class="field">
		<label for="telephone-number">
			<span class="field-label">Phone number</span>
		</label>
		<div class="field-hint" id="hint-telephone-number">Please include your country code</div>
		<input type="tel" class="input-width-20" id="telephone-number" name="telephone-number" autocomplete="tel" inputmode="tel" aria-describedby="hint-telephone-number">
	</div>

	<div class="field">
		<label for="guests">
			<span class="field-label">Number of guest tickets required</span>
		</label>
		<input type="number" class="input-width-3" id="guests" name="guests" value="0" pattern="[0-9]*">
	</div>
</form>

How to make filling in number fields easier

In many cases, it's better to use <input type="text" pattern="[0-9]*" inputmode="numeric"> rather than <input type="number"> when dealing with numbers. Adam Silver has written about when to use the number input.

For telephone numbers, use the type="tel" and inputmode="tel" attributes on the <input>.

When asking for payment details, including the autocomplete attribute can help users complete their responses more quickly. Older browsers make use of the name attribute to achieve the same thing. Here is a list of payment autofill attributes.

Dealing with dates and times

Open this Form inputs for dates and times in a new tab

HTML:

<form novalidate>
	<div class="field">
		<label for="arrival-date">
			<span class="field-label">Date of arrival</span>
		</label>
		<div class="field-hint" id="hint-arrival-date">For example 30/05/2021</div>
		<input type="text" class="input-width-10" id="arrival-date" name="arrival-date" aria-describedby="hint-arrival-date">
	</div>

	<div class="field">
		<fieldset role="group" aria-describedby="hint-date-of-birth">
			<legend>
				<span class="field-label">Date of birth (an example of a memorable date)</span>
			</legend>
			<div class="field-hint u-no-margin-top" id="hint-date-of-birth">For example 20 07 1972</div>
			<div class="memorable-date">
				<label for="bday-day" class="faux-label">Day</label>
				<input type="text" class="input-width-2" id="bday-day" name="bday-day" autocomplete="bday-day" pattern="[0-9]*" inputmode="numeric" min="0" max="31">
			</div>
			<div class="memorable-date">
				<label for="bday-month" class="faux-label">Month</label>
				<input type="text" class="input-width-2" id="bday-month" name="bday-month" autocomplete="bday-month" pattern="[0-9]*" inputmode="numeric" min="1" max="12">
			</div>
			<div class="memorable-date">
				<label for="bday-year" class="faux-label">Year</label>
				<input type="text" class="input-width-4" id="bday-year" name="bday-year" autocomplete="bday-year" pattern="[0-9]*" inputmode="numeric" min="1900" max="2050">
			</div>
		</fieldset>
	</div>

	<div class="field">
		<fieldset role="group" aria-describedby="hint-meeting-time">
			<legend>
				<span class="field-label">Specify a start time for your meeting</span>
			</legend>
			<div class="field-hint u-no-margin-top" id="hint-meeting-time">Use <dfn id="utc"><abbr title="Coordinated Universal Time">UTC</abbr></dfn> and your local time zone</div>
			<div class="input-group">
				<div>
					<label for="meeting-time" class="faux-label">Start time</label>
					<input type="text" class="input-width-5" id="meeting-time" name="meeting-time">
				</div>
				<div>
					<label for="meeting-time" class="faux-label">Time zone</label>
					<select id="timezone" name="timezone">
						<option value="UTC−12:00">UTC−12:00</option>
						<option value="UTC−11:00">UTC−11:00</option>
						<option value="UTC−10:00">UTC−10:00</option>
						<option value="UTC−09:30">UTC−09:30</option>
						<option value="UTC−09:00">UTC−09:00</option>
						<option value="UTC−08:00">UTC−08:00</option>
						<option value="UTC−07:00">UTC−07:00</option>
						<option value="UTC−06:00">UTC−06:00</option>
						<option value="UTC−05:00">UTC−05:00</option>
						<option value="UTC−04:00">UTC−04:00</option>
						<option value="UTC−03:30">UTC−03:30</option>
						<option value="UTC−03:00">UTC−03:00</option>
						<option value="UTC−02:00">UTC−02:00</option>
						<option value="UTC−01:00">UTC−01:00</option>
						<option value="UTC±00:00" selected>UTC±00:00</option>
						<option value="UTC+01:00">UTC+01:00</option>
						<option value="UTC+02:00">UTC+02:00</option>
						<option value="UTC+03:00">UTC+03:00</option>
						<option value="UTC+03:30">UTC+03:30</option>
						<option value="UTC+04:00">UTC+04:00</option>
						<option value="UTC+04:30">UTC+04:30</option>
						<option value="UTC+05:00">UTC+05:00</option>
						<option value="UTC+05:30">UTC+05:30</option>
						<option value="UTC+05:45">UTC+05:45</option>
						<option value="UTC+06:00">UTC+06:00</option>
						<option value="UTC+06:30">UTC+06:30</option>
						<option value="UTC+07:00">UTC+07:00</option>
						<option value="UTC+08:00">UTC+08:00</option>
						<option value="UTC+08:45">UTC+08:45</option>
						<option value="UTC+09:00">UTC+09:00</option>
						<option value="UTC+09:30">UTC+09:30</option>
						<option value="UTC+10:00">UTC+10:00</option>
						<option value="UTC+10:30">UTC+10:30</option>
						<option value="UTC+11:00">UTC+11:00</option>
						<option value="UTC+12:00">UTC+12:00</option>
						<option value="UTC+12:45">UTC+12:45</option>
						<option value="UTC+13:00">UTC+13:00</option>
						<option value="UTC+14:00">UTC+14:00</option>
					</select>
				</div>
			</div>
		</fieldset>
	</div>
</form>

How to make providing dates and times easier

For dates that the user will already know, such as birth dates, and dates that are easy to look up, use a series of simple text inputs. Note the use of <fieldset> and <legend> to group the separate text inputs together.

For other dates, due to inconsistencies with how different browsers and Assistive Technologies interpret <input type="date">, it is strongly recommended to use a simple text input. Provide hint text to let users know what format to use.

Again, due to inconsistencies with how different browsers and Assistive Technologies interpret <input type="time">, it is strongly recommended to use a simple text input. The preceding example includes a <select> to help users specify a local timezone.

File input

Open this File input in a new tab

HTML:

<form novalidate>
	<div class="field">
		<label for="file">
			<span class="field-label">Choose a file</span>
		</label>
		<input type="file" id="file" name="file">
	</div>
</form>

Checkboxes

Open this Checkbox inputs in a new tab

HTML:

<form novalidate>
	<div class="field">
		<fieldset role="group" aria-describedby="hint-things-you-like">
			<legend class="group-legend">Things you like</legend>
			<div class="field-hint" id="hint-things-you-like">Select all that apply.</div>
			<div class="checkbox-item">
				<input type="checkbox" name="chocolate" id="chocolate" appearance="base">
				<label for="chocolate">
					<span class="faux-label">Chocolate</span>
				</label>
			</div>

			<div class="checkbox-item">
				<input type="checkbox" name="coffee" id="coffee" appearance="base">
				<label for="coffee">
					<span class="faux-label">Coffee</span>
				</label>
			</div>

			<div class="checkbox-item">
				<input type="checkbox" name="cake" id="cake" appearance="base">
				<label for="cake">
					<span class="faux-label">Cake</span>
				</label>
			</div>

			<div class="checkbox-item">
				<input type="checkbox" name="chips" id="chips" appearance="base" aria-describedby="hint-chips">
				<label for="chips">
					<span class="faux-label">Chips</span>
				</label>
				<div class="field-hint" id="hint-chips">Fries or frites, not crisps.</div>
			</div>
		</fieldset>
	</div>
</form>

How to make checkboxes easier to use

Always position checkboxes to the left of their labels (to the right for right-to-left languages). This makes them easier to find, especially for users of screen magnifiers.

If required, hint text can be added for the entire checkbox group and/or for individual checkbox items. The preceding example shows how to do this.

Radios

Open this Checkbox inputs in a new tab

HTML:

<form novalidate>
	<div class="field">
		<fieldset role="group" aria-describedby="hint-name-change">
			<legend class="group-legend">Have you changed your name?</legend>
			<div class="field-hint" id="hint-name-change">This includes changing your family name or spelling your name differently.</div>
			<div class="radio-item">
				<input type="radio" id="name-change_yes" name="name-change" value="yes">
				<label for="name-change_yes">
					<span class="faux-label">Yes</span>
				</label>
			</div>

			<div class="radio-item">
				<input type="radio" id="name-change_no" name="name-change" value="no" aria-describedby="hint-name-change-no">
				<label for="name-change_no">
					<span class="faux-label">No</span>
				</label>
				<div class="field-hint" id="hint-name-change-no">Hint text for this radio item would go here.</div>
			</div>
		</fieldset>
	</div>
</form>

How to make radios easier to use

Always position radios to the left of their labels (to the right for right-to-left languages). This makes them easier to find, especially for users of screen magnifiers.

Radio buttons cannot be unchecked once they are selected. So if the question is not mandatory, you'll need to include a ‘None’ or ‘Prefer not to say’ option.

If required, hint text can be added for the entire radio group and/or for individual radio items. The preceding example shows how to do this.

Segmented options

The purpose is to show all available options outright, rather than hiding them behind a <select>. It can be used with either checkboxes, or with radio buttons as in the following example:

Open this Segmented options in a new tab

HTML:

<form novalidate>
	<div class="field segmented-group-wrapper">
		<fieldset role="group" aria-describedby="hint-segmented-options">
			<legend class="group-legend">Segmented options (Radio)</legend>
			<div class="field-hint" id="hint-segmented-options">We understand that different people enjoy books in different ways, which is why we’re giving you lots of options.</div>
			<div class="l-switcher segmented-group">
				<div>
					<div>
						<input type="radio" class="input--radio" id="segmented-option-1" name="segmented-options">
						<label for="segmented-option-1">
                            <span class="segmented-label">
                                <span>Budget option</span>
                                <span>Copy to explain this option in more detail.</span>
                            </span>
						</label>
					</div>
					<div>
						<input type="radio" class="input--radio" id="segmented-option-2" name="segmented-options" checked>
						<label for="segmented-option-2">
                            <span class="segmented-label">
                                <span>Value option</span>
                                <span>Copy to explain this option in more detail.</span>
                            </span>
						</label>
					</div>
					<div>
						<input type="radio" class="input--radio" id="segmented-option-3" name="segmented-options">
						<label for="segmented-option-3">
                            <span class="segmented-label">
                                <span>Expensive option</span>
                                <span>Copy to explain this option in more detail.</span>
                            </span>
						</label>
					</div>
				</div>
			</div>
		</fieldset>
	</div>
</form>

Considerations

The basis of this pattern is the switcher layout. The default styles assume that there are three choices and are optimised for this. In the event of fewer or more choices, you can override the default min-width percentage by applying an additional class.

Select

Open this Select field in a new tab

HTML:

<form novalidate>
	<div class="field">
		<label for="sort">
			<span class="field-label">Sort by</span>
		</label>
		<select id="sort" name="sort">
			<option value="published">Recently published</option>
			<option value="updated" selected>Recently updated</option>
			<option value="views">Most views</option>
			<option value="comments">Most comments</option>
		</select>
	</div>
</form>

Considerations

The <select> element should be a last resort as they’re really hard to use. Before using the <select> element, try asking users questions which will allow you to present them with fewer options. This should lessen the need for the <select> element, which could be replaced with e.g. radios.

Auto-complete

The design system provides a custom script to enhance a <select> into and accessible auto-complete via JavaScript.

Simple autocomplete

Open this Simple autocomplete in a new tab

HTML:

<label for="country">
	<span class="field-label">Country</span>
</label>
<select id="country" class="multiselect">
	<option value="">Select a country</option>
	<option value="1">Afghanistan</option>
	<option value="2">Åland Islands</option>
	<option value="3">Albania</option>
	<option value="4">Algeria</option>
	<option value="5">American Samoa</option>
	<option value="6">Andorra</option>
	<option value="7">Angola</option>
	<option value="8">Anguilla</option>
	<option value="8">Antarctica</option>
	<option value="10">Antigua And Barbuda</option>
	<option value="11">Argentina</option>
	<option value="12">Armenia</option>
	<option value="13">Aruba</option>
	<option value="14">Australia</option>
	<option value="15">Austria</option>
	<option value="16">Azerbaijan</option>
	<option value="17">Bahamas</option>
	<option value="18">Bahrain</option>
	<option value="19">Bangladesh</option>
	<option value="20">Barbados</option>
	<option value="21">Belarus</option>
	<option value="22">Belgium</option>
	<option value="23">Belize</option>
	<option value="24">Benin</option>
	<option value="25">Bermuda</option>
	<option value="26">Bhutan</option>
	<option value="27">Bolivia</option>
	<option value="28">Bonaire, Sint Eustatius and Saba</option>
	<option value="29">Bosnia and Herzegovina</option>
	<option value="30">Botswana</option>
	<option value="31">Bouvet Island</option>
	<option value="32">Brazil</option>
	<option value="33">British Indian Ocean Territory</option>
	<option value="34">Brunei Darussalam</option>
	<option value="35">Bulgaria</option>
	<option value="36">Burkina Faso</option>
	<option value="37">Burundi</option>
	<option value="38">Cambodia</option>
	<option value="39">Cameroon</option>
	<option value="40">Canada</option>
	<option value="41">Cape Verde</option>
	<option value="42">Cayman Islands</option>
	<option value="43">Central African Republic</option>
	<option value="44">Chad</option>
	<option value="45">Chile</option>
	<option value="46">China</option>
	<option value="47">Christmas Island</option>
	<option value="48">Cocos (Keeling) Islands</option>
	<option value="49">Colombia</option>
	<option value="50">Comoros</option>
	<option value="51">Congo</option>
	<option value="52">Congo, the Democratic Republic of the</option>
	<option value="53">Cook Islands</option>
	<option value="54">Costa Rica</option>
	<option value="55">Côte d'Ivoire</option>
	<option value="x1Croatia">Croatia</option>
	<option value="x1Cuba">Cuba</option>
	<option value="x1Curaçao">Curaçao</option>
	<option value="x1Cyprus">Cyprus</option>
	<option value="x1Czech Republic">Czech Republic</option>
	<option value="x1Denmark">Denmark</option>
	<option value="x1Djibouti">Djibouti</option>
	<option value="x1Dominica">Dominica</option>
	<option value="x1Dominican Republic">Dominican Republic</option>
	<option value="x1Ecuador">Ecuador</option>
	<option value="x1Egypt">Egypt</option>
	<option value="x1El Salvador">El Salvador</option>
	<option value="x1Equatorial Guinea">Equatorial Guinea</option>
	<option value="x1Eritrea">Eritrea</option>
	<option value="x1Estonia">Estonia</option>
	<option value="x1Ethiopia">Ethiopia</option>
	<option value="x1Falkland Islands (Malvinas)">Falkland Islands (Malvinas)</option>
	<option value="x1Faroe Islands">Faroe Islands</option>
	<option value="x1Fiji">Fiji</option>
	<option value="x1Finland">Finland</option>
	<option value="x1France">France</option>
	<option value="x1French Guiana">French Guiana</option>
	<option value="x1French Polynesia">French Polynesia</option>
	<option value="x1French Southern Territories">French Southern Territories</option>
	<option value="x1Gabon">Gabon</option>
	<option value="x1Gambia">Gambia</option>
	<option value="x1Georgia">Georgia</option>
	<option value="x1Germany">Germany</option>
	<option value="x1Ghana">Ghana</option>
	<option value="x1Gibraltar">Gibraltar</option>
	<option value="x1Greece">Greece</option>
	<option value="x1Greenland">Greenland</option>
	<option value="x1Grenada">Grenada</option>
	<option value="x1Guadeloupe">Guadeloupe</option>
	<option value="x1Guam">Guam</option>
	<option value="x1Guatemala">Guatemala</option>
	<option value="x1Guernsey">Guernsey</option>
	<option value="x1Guinea">Guinea</option>
	<option value="x1Guinea-Bissau">Guinea-Bissau</option>
	<option value="x1Guyana">Guyana</option>
	<option value="x1Haiti">Haiti</option>
	<option value="x1Heard Island and McDonald Islands">Heard Island and McDonald Islands</option>
	<option value="x1Holy See (Vatican City State)">Holy See (Vatican City State)</option>
	<option value="x1Honduras">Honduras</option>
	<option value="x1Hong Kong">Hong Kong</option>
	<option value="x1Hungary">Hungary</option>
	<option value="x1Iceland">Iceland</option>
	<option value="x1India">India</option>
	<option value="x1Indonesia">Indonesia</option>
	<option value="x1Iran, Islamic Republic of">Iran, Islamic Republic of</option>
	<option value="x1Iraq">Iraq</option>
	<option value="x1Ireland">Ireland</option>
	<option value="x1Isle of Man">Isle of Man</option>
	<option value="x1Israel">Israel</option>
	<option value="x1Italy">Italy</option>
	<option value="x1Jamaica">Jamaica</option>
	<option value="x1Japan">Japan</option>
	<option value="x1Jersey">Jersey</option>
	<option value="x1Jordan">Jordan</option>
	<option value="x1Kazakhstan">Kazakhstan</option>
	<option value="x1Kenya">Kenya</option>
	<option value="x1Kiribati">Kiribati</option>
	<option value="x1Korea, Democratic People's Republic of">Korea, Democratic People's Republic of</option>
	<option value="x1Korea, Republic of">Korea, Republic of</option>
	<option value="x1Kuwait">Kuwait</option>
	<option value="x1Kyrgyzstan">Kyrgyzstan</option>
	<option value="x1Lao People's Democratic Republic">Lao People's Democratic Republic</option>
	<option value="x1Latvia">Latvia</option>
	<option value="x1Lebanon">Lebanon</option>
	<option value="x1Lesotho">Lesotho</option>
	<option value="x1Liberia">Liberia</option>
	<option value="x1Libyan Arab Jamahiriya">Libyan Arab Jamahiriya</option>
	<option value="x1Liechtenstein">Liechtenstein</option>
	<option value="x1Lithuania">Lithuania</option>
	<option value="x1Luxembourg">Luxembourg</option>
	<option value="x1Macao">Macao</option>
	<option value="x1Madagascar">Madagascar</option>
	<option value="x1Malawi">Malawi</option>
	<option value="x1Malaysia">Malaysia</option>
	<option value="x1Maldives">Maldives</option>
	<option value="x1Mali">Mali</option>
	<option value="x1Malta">Malta</option>
	<option value="x1Marshall Islands">Marshall Islands</option>
	<option value="x1Martinique">Martinique</option>
	<option value="x1Mauritania">Mauritania</option>
	<option value="x1Mauritius">Mauritius</option>
	<option value="x1Mayotte">Mayotte</option>
	<option value="x1Mexico">Mexico</option>
	<option value="x1Micronesia, Federated States of">Micronesia, Federated States of</option>
	<option value="x1Moldova, Republic of">Moldova, Republic of</option>
	<option value="x1Monaco">Monaco</option>
	<option value="x1Mongolia">Mongolia</option>
	<option value="x1Montenegro">Montenegro</option>
	<option value="x1Montserrat">Montserrat</option>
	<option value="x1Morocco">Morocco</option>
	<option value="x1Mozambique">Mozambique</option>
	<option value="x1Myanmar">Myanmar</option>
	<option value="x1Namibia">Namibia</option>
	<option value="x1Nauru">Nauru</option>
	<option value="x1Nepal">Nepal</option>
	<option value="x1Netherlands">Netherlands</option>
	<option value="x1New Caledonia">New Caledonia</option>
	<option value="x1New Zealand">New Zealand</option>
	<option value="x1Nicaragua">Nicaragua</option>
	<option value="x1Niger">Niger</option>
	<option value="x1Nigeria">Nigeria</option>
	<option value="x1Niue">Niue</option>
	<option value="x1Norfolk Island">Norfolk Island</option>
	<option value="x1North Macedonia">North Macedonia</option>
	<option value="x1Northern Mariana Islands">Northern Mariana Islands</option>
	<option value="x1Norway">Norway</option>
	<option value="x1Oman">Oman</option>
	<option value="x1Pakistan">Pakistan</option>
	<option value="x1Palau">Palau</option>
	<option value="x1Palestinian Territory, Occupied">Palestinian Territory, Occupied</option>
	<option value="x1Panama">Panama</option>
	<option value="x1Papua New Guinea">Papua New Guinea</option>
	<option value="x1Paraguay">Paraguay</option>
	<option value="x1Peru">Peru</option>
	<option value="x1Philippines">Philippines</option>
	<option value="x1Pitcairn">Pitcairn</option>
	<option value="x1Poland">Poland</option>
	<option value="x1Portugal">Portugal</option>
	<option value="x1Puerto Rico">Puerto Rico</option>
	<option value="x1Qatar">Qatar</option>
	<option value="x1Réunion">Réunion</option>
	<option value="x1Romania">Romania</option>
	<option value="x1Russian Federation">Russian Federation</option>
	<option value="x1Rwanda">Rwanda</option>
	<option value="x1Saint Barthélemy">Saint Barthélemy</option>
	<option value="x1Saint Helena">Saint Helena</option>
	<option value="x1Saint Kitts and Nevis">Saint Kitts and Nevis</option>
	<option value="x1Saint Lucia">Saint Lucia</option>
	<option value="x1Saint Martin (French Part)">Saint Martin (French Part)</option>
	<option value="x1Saint Pierre and Miquelon">Saint Pierre and Miquelon</option>
	<option value="x1Saint Vincent and the Grenadines">Saint Vincent and the Grenadines</option>
	<option value="x1Samoa">Samoa</option>
	<option value="x1San Marino">San Marino</option>
	<option value="x1Sao Tome and Principe">Sao Tome and Principe</option>
	<option value="x1Saudi Arabia">Saudi Arabia</option>
	<option value="x1Senegal">Senegal</option>
	<option value="x1Serbia">Serbia</option>
	<option value="x1Seychelles">Seychelles</option>
	<option value="x1Sierra Leone">Sierra Leone</option>
	<option value="x1Singapore">Singapore</option>
	<option value="x1Sint Maarten (Dutch Part)">Sint Maarten (Dutch Part)</option>
	<option value="x1Slovakia">Slovakia</option>
	<option value="x1Slovenia">Slovenia</option>
	<option value="x1Solomon Islands">Solomon Islands</option>
	<option value="x1Somalia">Somalia</option>
	<option value="x1South Africa">South Africa</option>
	<option value="x1South Georgia and the South Sandwich Islands">South Georgia and the South Sandwich Islands</option>
	<option value="x1South Sudan">South Sudan</option>
	<option value="x1Spain">Spain</option>
	<option value="x1Sri Lanka">Sri Lanka</option>
	<option value="x1Sudan">Sudan</option>
	<option value="x1Suriname">Suriname</option>
	<option value="x1Svalbard and Jan Mayen">Svalbard and Jan Mayen</option>
	<option value="x1Swaziland">Swaziland</option>
	<option value="x1Sweden">Sweden</option>
	<option value="x1Switzerland">Switzerland</option>
	<option value="x1Syrian Arab Republic">Syrian Arab Republic</option>
	<option value="x1Taiwan, Province of China">Taiwan, Province of China</option>
	<option value="x1Tajikistan">Tajikistan</option>
	<option value="x1Tanzania, United Republic of">Tanzania, United Republic of</option>
	<option value="x1Thailand">Thailand</option>
	<option value="x1Timor-Leste">Timor-Leste</option>
	<option value="x1Togo">Togo</option>
	<option value="x1Tokelau">Tokelau</option>
	<option value="x1Tonga">Tonga</option>
	<option value="x1Trinidad and Tobago">Trinidad and Tobago</option>
	<option value="x1Tunisia">Tunisia</option>
	<option value="x1Turkey">Turkey</option>
	<option value="x1Turkmenistan">Turkmenistan</option>
	<option value="x1Turks and Caicos Islands">Turks and Caicos Islands</option>
	<option value="x1Tuvalu">Tuvalu</option>
	<option value="x1Uganda">Uganda</option>
	<option value="x1Ukraine">Ukraine</option>
	<option value="x1United Arab Emirates">United Arab Emirates</option>
	<option value="x1United Kingdom">United Kingdom</option>
	<option value="x1United States">United States</option>
	<option value="x1United States Minor Outlying Islands">United States Minor Outlying Islands</option>
	<option value="x1Uruguay">Uruguay</option>
	<option value="x1Uzbekistan">Uzbekistan</option>
	<option value="x1Vanuatu">Vanuatu</option>
	<option value="x1Venezuela">Venezuela</option>
	<option value="x1Vietnam">Vietnam</option>
	<option value="x1Virgin Islands, British">Virgin Islands, British</option>
	<option value="x1Virgin Islands, U.S.">Virgin Islands, U.S.</option>
	<option value="x1Wallis and Futuna">Wallis and Futuna</option>
	<option value="x1Western Sahara">Western Sahara</option>
	<option value="x1Yemen">Yemen</option>
	<option value="x1Zambia">Zambia</option>
	<option value="x1Zimbabwe">Zimbabwe</option>
</select>

Multiple selection with autocomplete

Open this Multiple autocomplete in a new tab

HTML:

<label for="country">
	<span class="field-label">Country</span>
</label>
<select id="country" class="multiselect" multiple>
	<option value="">Select a country</option>
	<option value="1">Afghanistan</option>
	<option value="2">Åland Islands</option>
	<option value="3">Albania</option>
	<option value="4">Algeria</option>
	<option value="5">American Samoa</option>
	<option value="6">Andorra</option>
	<option value="7">Angola</option>
	<option value="8">Anguilla</option>
	<option value="8">Antarctica</option>
	<option value="10">Antigua And Barbuda</option>
	<option value="11">Argentina</option>
	<option value="12">Armenia</option>
	<option value="13">Aruba</option>
	<option value="14">Australia</option>
	<option value="15">Austria</option>
	<option value="16">Azerbaijan</option>
	<option value="17">Bahamas</option>
	<option value="18">Bahrain</option>
	<option value="19">Bangladesh</option>
	<option value="20">Barbados</option>
	<option value="21">Belarus</option>
	<option value="22">Belgium</option>
	<option value="23">Belize</option>
	<option value="24">Benin</option>
	<option value="25">Bermuda</option>
	<option value="26">Bhutan</option>
	<option value="27">Bolivia</option>
	<option value="28">Bonaire, Sint Eustatius and Saba</option>
	<option value="29">Bosnia and Herzegovina</option>
	<option value="30">Botswana</option>
	<option value="31">Bouvet Island</option>
	<option value="32">Brazil</option>
	<option value="33">British Indian Ocean Territory</option>
	<option value="34">Brunei Darussalam</option>
	<option value="35">Bulgaria</option>
	<option value="36">Burkina Faso</option>
	<option value="37">Burundi</option>
	<option value="38">Cambodia</option>
	<option value="39">Cameroon</option>
	<option value="40">Canada</option>
	<option value="41">Cape Verde</option>
	<option value="42">Cayman Islands</option>
	<option value="43">Central African Republic</option>
	<option value="44">Chad</option>
	<option value="45">Chile</option>
	<option value="46">China</option>
	<option value="47">Christmas Island</option>
	<option value="48">Cocos (Keeling) Islands</option>
	<option value="49">Colombia</option>
	<option value="50">Comoros</option>
	<option value="51">Congo</option>
	<option value="52">Congo, the Democratic Republic of the</option>
	<option value="53">Cook Islands</option>
	<option value="54">Costa Rica</option>
	<option value="55">Côte d'Ivoire</option>
	<option value="x1Croatia">Croatia</option>
	<option value="x1Cuba">Cuba</option>
	<option value="x1Curaçao">Curaçao</option>
	<option value="x1Cyprus">Cyprus</option>
	<option value="x1Czech Republic">Czech Republic</option>
	<option value="x1Denmark">Denmark</option>
	<option value="x1Djibouti">Djibouti</option>
	<option value="x1Dominica">Dominica</option>
	<option value="x1Dominican Republic">Dominican Republic</option>
	<option value="x1Ecuador">Ecuador</option>
	<option value="x1Egypt">Egypt</option>
	<option value="x1El Salvador">El Salvador</option>
	<option value="x1Equatorial Guinea">Equatorial Guinea</option>
	<option value="x1Eritrea">Eritrea</option>
	<option value="x1Estonia">Estonia</option>
	<option value="x1Ethiopia">Ethiopia</option>
	<option value="x1Falkland Islands (Malvinas)">Falkland Islands (Malvinas)</option>
	<option value="x1Faroe Islands">Faroe Islands</option>
	<option value="x1Fiji">Fiji</option>
	<option value="x1Finland">Finland</option>
	<option value="x1France">France</option>
	<option value="x1French Guiana">French Guiana</option>
	<option value="x1French Polynesia">French Polynesia</option>
	<option value="x1French Southern Territories">French Southern Territories</option>
	<option value="x1Gabon">Gabon</option>
	<option value="x1Gambia">Gambia</option>
	<option value="x1Georgia">Georgia</option>
	<option value="x1Germany">Germany</option>
	<option value="x1Ghana">Ghana</option>
	<option value="x1Gibraltar">Gibraltar</option>
	<option value="x1Greece">Greece</option>
	<option value="x1Greenland">Greenland</option>
	<option value="x1Grenada">Grenada</option>
	<option value="x1Guadeloupe">Guadeloupe</option>
	<option value="x1Guam">Guam</option>
	<option value="x1Guatemala">Guatemala</option>
	<option value="x1Guernsey">Guernsey</option>
	<option value="x1Guinea">Guinea</option>
	<option value="x1Guinea-Bissau">Guinea-Bissau</option>
	<option value="x1Guyana">Guyana</option>
	<option value="x1Haiti">Haiti</option>
	<option value="x1Heard Island and McDonald Islands">Heard Island and McDonald Islands</option>
	<option value="x1Holy See (Vatican City State)">Holy See (Vatican City State)</option>
	<option value="x1Honduras">Honduras</option>
	<option value="x1Hong Kong">Hong Kong</option>
	<option value="x1Hungary">Hungary</option>
	<option value="x1Iceland">Iceland</option>
	<option value="x1India">India</option>
	<option value="x1Indonesia">Indonesia</option>
	<option value="x1Iran, Islamic Republic of">Iran, Islamic Republic of</option>
	<option value="x1Iraq">Iraq</option>
	<option value="x1Ireland">Ireland</option>
	<option value="x1Isle of Man">Isle of Man</option>
	<option value="x1Israel">Israel</option>
	<option value="x1Italy">Italy</option>
	<option value="x1Jamaica">Jamaica</option>
	<option value="x1Japan">Japan</option>
	<option value="x1Jersey">Jersey</option>
	<option value="x1Jordan">Jordan</option>
	<option value="x1Kazakhstan">Kazakhstan</option>
	<option value="x1Kenya">Kenya</option>
	<option value="x1Kiribati">Kiribati</option>
	<option value="x1Korea, Democratic People's Republic of">Korea, Democratic People's Republic of</option>
	<option value="x1Korea, Republic of">Korea, Republic of</option>
	<option value="x1Kuwait">Kuwait</option>
	<option value="x1Kyrgyzstan">Kyrgyzstan</option>
	<option value="x1Lao People's Democratic Republic">Lao People's Democratic Republic</option>
	<option value="x1Latvia">Latvia</option>
	<option value="x1Lebanon">Lebanon</option>
	<option value="x1Lesotho">Lesotho</option>
	<option value="x1Liberia">Liberia</option>
	<option value="x1Libyan Arab Jamahiriya">Libyan Arab Jamahiriya</option>
	<option value="x1Liechtenstein">Liechtenstein</option>
	<option value="x1Lithuania">Lithuania</option>
	<option value="x1Luxembourg">Luxembourg</option>
	<option value="x1Macao">Macao</option>
	<option value="x1Madagascar">Madagascar</option>
	<option value="x1Malawi">Malawi</option>
	<option value="x1Malaysia">Malaysia</option>
	<option value="x1Maldives">Maldives</option>
	<option value="x1Mali">Mali</option>
	<option value="x1Malta">Malta</option>
	<option value="x1Marshall Islands">Marshall Islands</option>
	<option value="x1Martinique">Martinique</option>
	<option value="x1Mauritania">Mauritania</option>
	<option value="x1Mauritius">Mauritius</option>
	<option value="x1Mayotte">Mayotte</option>
	<option value="x1Mexico">Mexico</option>
	<option value="x1Micronesia, Federated States of">Micronesia, Federated States of</option>
	<option value="x1Moldova, Republic of">Moldova, Republic of</option>
	<option value="x1Monaco">Monaco</option>
	<option value="x1Mongolia">Mongolia</option>
	<option value="x1Montenegro">Montenegro</option>
	<option value="x1Montserrat">Montserrat</option>
	<option value="x1Morocco">Morocco</option>
	<option value="x1Mozambique">Mozambique</option>
	<option value="x1Myanmar">Myanmar</option>
	<option value="x1Namibia">Namibia</option>
	<option value="x1Nauru">Nauru</option>
	<option value="x1Nepal">Nepal</option>
	<option value="x1Netherlands">Netherlands</option>
	<option value="x1New Caledonia">New Caledonia</option>
	<option value="x1New Zealand">New Zealand</option>
	<option value="x1Nicaragua">Nicaragua</option>
	<option value="x1Niger">Niger</option>
	<option value="x1Nigeria">Nigeria</option>
	<option value="x1Niue">Niue</option>
	<option value="x1Norfolk Island">Norfolk Island</option>
	<option value="x1North Macedonia">North Macedonia</option>
	<option value="x1Northern Mariana Islands">Northern Mariana Islands</option>
	<option value="x1Norway">Norway</option>
	<option value="x1Oman">Oman</option>
	<option value="x1Pakistan">Pakistan</option>
	<option value="x1Palau">Palau</option>
	<option value="x1Palestinian Territory, Occupied">Palestinian Territory, Occupied</option>
	<option value="x1Panama">Panama</option>
	<option value="x1Papua New Guinea">Papua New Guinea</option>
	<option value="x1Paraguay">Paraguay</option>
	<option value="x1Peru">Peru</option>
	<option value="x1Philippines">Philippines</option>
	<option value="x1Pitcairn">Pitcairn</option>
	<option value="x1Poland">Poland</option>
	<option value="x1Portugal">Portugal</option>
	<option value="x1Puerto Rico">Puerto Rico</option>
	<option value="x1Qatar">Qatar</option>
	<option value="x1Réunion">Réunion</option>
	<option value="x1Romania">Romania</option>
	<option value="x1Russian Federation">Russian Federation</option>
	<option value="x1Rwanda">Rwanda</option>
	<option value="x1Saint Barthélemy">Saint Barthélemy</option>
	<option value="x1Saint Helena">Saint Helena</option>
	<option value="x1Saint Kitts and Nevis">Saint Kitts and Nevis</option>
	<option value="x1Saint Lucia">Saint Lucia</option>
	<option value="x1Saint Martin (French Part)">Saint Martin (French Part)</option>
	<option value="x1Saint Pierre and Miquelon">Saint Pierre and Miquelon</option>
	<option value="x1Saint Vincent and the Grenadines">Saint Vincent and the Grenadines</option>
	<option value="x1Samoa">Samoa</option>
	<option value="x1San Marino">San Marino</option>
	<option value="x1Sao Tome and Principe">Sao Tome and Principe</option>
	<option value="x1Saudi Arabia">Saudi Arabia</option>
	<option value="x1Senegal">Senegal</option>
	<option value="x1Serbia">Serbia</option>
	<option value="x1Seychelles">Seychelles</option>
	<option value="x1Sierra Leone">Sierra Leone</option>
	<option value="x1Singapore">Singapore</option>
	<option value="x1Sint Maarten (Dutch Part)">Sint Maarten (Dutch Part)</option>
	<option value="x1Slovakia">Slovakia</option>
	<option value="x1Slovenia">Slovenia</option>
	<option value="x1Solomon Islands">Solomon Islands</option>
	<option value="x1Somalia">Somalia</option>
	<option value="x1South Africa">South Africa</option>
	<option value="x1South Georgia and the South Sandwich Islands">South Georgia and the South Sandwich Islands</option>
	<option value="x1South Sudan">South Sudan</option>
	<option value="x1Spain">Spain</option>
	<option value="x1Sri Lanka">Sri Lanka</option>
	<option value="x1Sudan">Sudan</option>
	<option value="x1Suriname">Suriname</option>
	<option value="x1Svalbard and Jan Mayen">Svalbard and Jan Mayen</option>
	<option value="x1Swaziland">Swaziland</option>
	<option value="x1Sweden">Sweden</option>
	<option value="x1Switzerland">Switzerland</option>
	<option value="x1Syrian Arab Republic">Syrian Arab Republic</option>
	<option value="x1Taiwan, Province of China">Taiwan, Province of China</option>
	<option value="x1Tajikistan">Tajikistan</option>
	<option value="x1Tanzania, United Republic of">Tanzania, United Republic of</option>
	<option value="x1Thailand">Thailand</option>
	<option value="x1Timor-Leste">Timor-Leste</option>
	<option value="x1Togo">Togo</option>
	<option value="x1Tokelau">Tokelau</option>
	<option value="x1Tonga">Tonga</option>
	<option value="x1Trinidad and Tobago">Trinidad and Tobago</option>
	<option value="x1Tunisia">Tunisia</option>
	<option value="x1Turkey">Turkey</option>
	<option value="x1Turkmenistan">Turkmenistan</option>
	<option value="x1Turks and Caicos Islands">Turks and Caicos Islands</option>
	<option value="x1Tuvalu">Tuvalu</option>
	<option value="x1Uganda">Uganda</option>
	<option value="x1Ukraine">Ukraine</option>
	<option value="x1United Arab Emirates">United Arab Emirates</option>
	<option value="x1United Kingdom">United Kingdom</option>
	<option value="x1United States">United States</option>
	<option value="x1United States Minor Outlying Islands">United States Minor Outlying Islands</option>
	<option value="x1Uruguay">Uruguay</option>
	<option value="x1Uzbekistan">Uzbekistan</option>
	<option value="x1Vanuatu">Vanuatu</option>
	<option value="x1Venezuela">Venezuela</option>
	<option value="x1Vietnam">Vietnam</option>
	<option value="x1Virgin Islands, British">Virgin Islands, British</option>
	<option value="x1Virgin Islands, U.S.">Virgin Islands, U.S.</option>
	<option value="x1Wallis and Futuna">Wallis and Futuna</option>
	<option value="x1Western Sahara">Western Sahara</option>
	<option value="x1Yemen">Yemen</option>
	<option value="x1Zambia">Zambia</option>
	<option value="x1Zimbabwe">Zimbabwe</option>
</select>

Autocomplete options

The autocomplete script can be configured using data-* attributes on the select.

Attribute Description Default value
data-search-start By default, the script will only return options with text starting with the given input. To search for options that contain the input, set that attribute to off on
data-text-only By default, the script will only check the text node of each option. If you want to include the option values in the search, set that attribute to off on
data-source It is possible to specify an endpoint to retrieve the results instead. In this case, the endpoint provided must return a JSON with the following format: 
{"results":[
    {"id":1,"text":"foo"},
    {"id":2,"text":"bar"}
]}
 -
data-minInput Minimum input length to start the search from data-source 2

Considerations

Note the link to a specific JavaScript file for the auto-complete functionality in the preceding example.

In practice, add the following script before the closing body tag </body> for the auto-complete to work correctly:

<script src="dist/assets/js/multiselect.js"></script>

An example of a simple search form

Here is one example of how to use <input type="search">. It is recommended to include role="search" on the parent <form> element.

Notice the use of the box layout and sidebar layout in this example.

Open this Simple search form in a new tab

HTML:

<div class="l-box">
	<label for="search">
		<span class="field-label">Search</span>
	</label>
	<div class="l-sidebar search">
		<form role="search" novalidate>
			<div class="not-sidebar">
				<input type="search" id="search" name="search">
			</div>
			<div class="sidebar">
				<button type="submit" class="button" name="search">Search</button>
			</div>
		</form>
	</div>
</div>

Grouping inputs to line up side-by-side

The class .input-group can be used to align form inputs horizontally with each other, by applying Flexbox behaviour. You can see an example of this in the preceding example for dealing with times.

Considerations

This class should not be used in conjunction with radios or checkboxes. The pattern has not been fully tested with these input types and may not work well on smaller viewports. Furthermore, radios and checkboxes are easier to read and quicker to scan when presented vertically.

Fixed width inputs

There is a collection of CSS classes prefixed with .input-width- which, when added to an <input>, will reduce the maximum width of the input field to better suit the intended contents:

Open this Examples of fixed width inputs in a new tab

HTML:

<form novalidate>
	<div class="field">
		<label for="width-30">
			<span class="field-label">30 character width</span>
		</label>
		<input type="text" class="input-width-30" id="width-30" name="width-30">
	</div>
	<div class="field">
		<label for="width-20">
			<span class="field-label">20 character width</span>
		</label>
		<input type="text" class="input-width-20" id="width-20" name="width-20">
	</div>
	<div class="field">
		<label for="width-10">
			<span class="field-label">10 character width</span>
		</label>
		<input type="text" class="input-width-10" id="width-10" name="width-10">
	</div>
	<div class="field">
		<label for="width-5">
			<span class="field-label">5 character width</span>
		</label>
		<input type="text" class="input-width-5" id="width-5" name="width-5">
	</div>
	<div class="field">
		<label for="width-4">
			<span class="field-label">4 character width</span>
		</label>
		<input type="text" class="input-width-4" id="width-4" name="width-4">
	</div>
	<div class="field">
		<label for="width-3">
			<span class="field-label">3 character width</span>
		</label>
		<input type="text" class="input-width-3" id="width-3" name="width-3">
	</div>
	<div class="field">
		<label for="width-2">
			<span class="field-label">2 character width</span>
		</label>
		<input type="text" class="input-width-2" id="width-2" name="width-2">
	</div>
</form>

Progress indicators

While it is recommended not to use progress indicators for forms, the design system does include one:

Open this Form progress indicator in a new tab

HTML:

<section>
	<h2 class="visuallyhidden">Form progress</h2>
	<ol class="clean-list progress-list" role="list">
		<li class="progress-step complete">
			<span class="visuallyhidden">Completed: </span>
			<a href="" class="progress-step__inner">
				<div class="progress-step__marker complete" aria-hidden="true">1</div>
				<span>Delivery address</span>
			</a>
		</li>
		<li class="progress-step" aria-current="step">
			<div class="progress-step__inner">
				<div class="progress-step__marker" aria-hidden="true">2</div>
				<span>Billing address</span>
			</div>
		</li>
		<li class="progress-step">
			<div class="progress-step__inner">
				<div class="progress-step__marker" aria-hidden="true">3</div>
				<span>Payment details</span>
			</div>
		</li>
		<li class="progress-step">
			<div class="progress-step__inner">
				<div class="progress-step__marker" aria-hidden="true">4</div>
				<span>Confirmation</span>
			</div>
		</li>
	</ol>
</section>