Skip to contentSkip to footer
Give feedbackv3.0.2

Fields

Forms can help people find the information they need, complete a task or complete an application online.

Ask for the minimum amount of information needed for the client to complete the task, this makes the forms shorter, and improves completion rates. Make it clear that optional fields are optional.

Examples of form components

Use a field for a person’s full name if possible - different cultures structure names in different ways so Firstname, Surname isn't always appropriate.

Structure

For tools with a single field per page, wrap them with div.fieldset. When creating tools with multiple questions or fields, for example date or address fields, it is best to use the fieldset tag.

Labels

It is generally preferred to use the label tag for field labels, however other field types can be used. It's important that regardless of tag, the label contains the for="" attribute with the fields ID inside.

<div class="fieldset">
	<label for="standardField">Standard field <span class="optional">(optional)</span></label>
	<input id="standardField" placeholder="" type="text">
</div>
With additional help text
<div class="fieldset">
	<label for="standardField">Standard field</label>
	<span class="form-hint">With additional help text</span>
	<input id="standardField" placeholder="" type="text">
</div>
Please enter a valid email address
<div class="fieldset">
	<label for="exampleInputEmail1">Inline validation error with field placeholder</label>
	<input id="exampleInputEmail1" placeholder="Email" required="" type="email">
	<small>Information about these details.</small>
	<div class="invalid">Please enter a valid email address</div>
</div>
Enter at least 3 characters
Please enter a password between 3 and 10 characters
<div class="fieldset">
	<label for="exampleInputPassword1">Password</label>
	<span class="form-hint">Enter at least 3 characters</span>
	<input id="exampleInputPassword1" pattern=".{3,10}" placeholder="Password" required="" type="password">
	<div class="valid">Wonderful!</div>
	<div class="invalid">Please enter a password between 3 and 10 characters</div>
</div>
Description why this field isn't enabled
<div class="fieldset">
	<label for="exampleInputPassword1">Disabled field</label>
	<span class="form-hint">Description why this field isn't enabled</span>
	<input id="exampleInputPassword1" disabled placeholder="Disabled field" type="password">
</div>
<div class="fieldset">
	<label for="exampleSelect1">Example dropdown select</label>
	<div class="dropdown">
		<select id="exampleSelect1">
			<option>1</option>
			<option>2</option>
			<option>3</option>
			<option>4</option>
			<option>5</option>
		</select>
	</div>
</fieldset>
<div class="fieldset">
	<label for="exampleSelect2">Example dropdown multiple select</label>
	<select id="exampleSelect2" multiple="" class="multi-select">
		<option>1</option>
		<option>2</option>
		<option>3</option>
		<option>4</option>
		<option>5</option>
	</select>
</div>
<div class="fieldset">
	<label for="exampleTextarea">Example textarea </label>
	<textarea id="exampleTextarea" rows="3"></textarea>
</div>
This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line.
<div class="fieldset">
	<label for="exampleInputFile">File input</label>
	<input id="exampleInputFile" type="file" class="form-control-file">
	<small>This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line.</small>
</div>
Radio buttons
<fieldset>
	<legend for="radio">Radio buttons</legend>
	<label class="radio radio--block">
		<input checked name="radio" type="radio" value="option1">Yes
	</label>
	<label class="radio radio--block">
		<input name="radio" type="radio" value="option2">No
	</label>
	<label class="radio radio--block disabled">
		<input disabled name="radio" type="radio" value="option3">Not sure
	</label>
</fieldset>
Inline Radio buttons
<fieldset>
	<legend for="radio-inline">Inline Radio buttons</legend>
	<label class="radio radio--inline">
		<input checked name="radio-inline" type="radio" value="option1">Yes
	</label>
	<label class="radio radio--inline">
		<input name="radio-inline" type="radio" value="option2">No
	</label>
	<label class="radio radio--inline disabled">
		<input disabled name="radio-inline" type="radio" value="option3">Not sure
	</label>
</fieldset>
Radio buttons (description)
<fieldset>
	<legend for="radio-description">Radio buttons (description)</legend>
	<label class="radio radio--block">
		<input checked name="radio-description" type="radio" value="option1">
		<p>
			<span>Yes</span><br>I'm in situation A
		</p>
	</label>
	<label class="radio radio--block">
		<input name="radio-description" type="radio" value="option2">
		<p>
			<span>Yes</span><br>I'm in situation B
		</p>
	</label>
	<label class="radio radio--block">
		<input name="radio-description" type="radio" value="option3">
		<p>
			<span>No</span><br>I'm not in any situation
		</p>
	</label>
</fieldset>
Checkboxes
<fieldset>
	<legend for="checkbox">Checkboxes</legend>
	<label class="checkbox checkbox--block">
		<input name="checkbox" type="checkbox">Option one
	</label>
	<label class="checkbox checkbox--block">
		<input name="checkbox" type="checkbox">Option two
	</label>
	<label class="checkbox checkbox--block disabled">
		<input disabled name="checkbox" type="checkbox">Disabled
	</label>
</fieldset>
Inline checkboxes
<fieldset>
	<legend for="checkbox-inline">Inline checkboxes</legend>
	<label class="checkbox checkbox--inline">
		<input name="checkbox-inline" type="checkbox">Option one
	</label>
	<label class="checkbox checkbox--inline">
		<input name="checkbox-inline" type="checkbox">Option two
	</label>
	<label class="checkbox checkbox--inline disabled">
		<input disabled name="checkbox-inline" type="checkbox">Disabled
	</label>
</fieldset>
Check boxes (description)
<fieldset>
	<legend for="checkbox-description">Check boxes (description)</legend>
	<label class="checkbox checkbox--block">
		<input name="checkbox-description" type="checkbox">
		<p>
			<span>Yes</span><br>You are in situation A
		</p>
	</label>
	<label class="checkbox checkbox--block">
		<input name="checkbox-description" type="checkbox">
		<p>
			<span>Yes</span><br>You are in situation B
		</p>
	</label>
	<label class="checkbox checkbox--block">
		<input name="checkbox-description" type="checkbox">
		<p>
			<span>No</span><br>I'm not in any situation
		</p>
	</label>
</fieldset>