Input form groups

Basic input form group

All text inputs must have visible labels; placeholder text is not an acceptable replacement for a label as it vanishes when users start typing.

Labels should be aligned above the text input they refer to. They should be short, direct and written in sentence case. Do not use colons at the end of labels.

• English Example
• English HTML
• French Example
• French HTML

Input form with Header as a Label

If you’re asking just one question per page as recommended, you can set the contents of the label as the page heading. This is good practice as it means that users of screen readers will only hear the contents once.

• English Example
• English HTML
• French Example
• French HTML

Use appropriately-sized text inputs

Help users understand what they should enter by making text inputs the right size for the content they’re intended for.

By default, the width of text inputs is fluid and will fit the full width of the container they are placed into.

If you want to make the input smaller, you can either use a fixed width input, or use the width override classes to create a smaller, fluid width input.

Fixed width inputs

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.

On fixed width inputs, the width will remain fixed on all screens unless it is wider than the viewport, in which case it will shrink to fit.

<div class="ns-form-group">
	<label class="ns-label" for="width-50">
		50 em (about 65 characters)
	</label>
	<input class="ns-input fw-50" id="width-50" name="width-50" type="text">
</div>

Input form group with hint text

Use hint for help that’s relevant to the majority of users, like how their information will be used, or where to find it.

• English Example
• English HTML
• French Example
• French HTML

Prefixes and suffixes

Use prefixes and suffixes to help users enter things like currencies and measurements.

Prefixes and suffixes are useful when there’s a commonly understood symbol or abbreviation for the type of information you’re asking for. Do not rely on prefixes or suffixes alone, because people who use a screen reader won’t see them.

If you need a specific type of information, say so in the input label or hint text as well. For example, put “Cost, in dollars” in the input label and use the “$” symbol in the prefix.

Some users may miss the fact that the input already has a suffix or prefix, and enter a prefix or suffix into the input. Allow for this in your validation and do not show an error.

• English Example
• English HTML
• French Example
• French HTML

Error messages

Error messages should be styled like this:

• English Example
• English HTML
• French Example
• French HTML

Prefixes and suffixes with error

• English Example
• English HTML
• French Example
• French HTML