Form elements

• To be confirmed

Example

Demo Label

Code

<div class="entity-form">
<fieldset class="entity-none">
<div class="info">
<label>Demo Label</label>
</div>
</fieldset>
</div>

 

• Use a text input field to let a user enter text that is no longer than a single line, such as their name or phone number.

Example

Code

<div class="entity-form">
<fieldset class="entity-none" >
<input type="text" class="text" />
</fieldset>
</div>

How to use them

See guidance from .GOV.UK on text input widths at: https://design-system.services.gov.uk/components/text-input

Different buttons to be used depending on the context.

How to use them

Write button text in sentence case, describing the action it performs. For example ‘Save and continue’ or ‘Start now’.

On .GOV.UK

See original component and latest research for this on the Government’s design system at: https://design-system.service.gov.uk/components/button/

3.1 Main call to action button

BUTTON TO BE ADDED

When to use it

Use this button on 'start' screens and to help users carry out an action like submitting an application or saving progress.

Secondary call to action button example

Show More

Code

<div class="entity-form">
<fieldset class="entity-none">
<button type="button" class="button" id="btnSubmit-alt">Show More</button>
</fieldset>
</div>

When to use this

Use this secondary call to action button if you need to include an action within a page and there is already a main call to action button present

 

The breadcrumbs element is used to help the user understand where they are within the website and to move between them.

Example

• HSE
• Design guide
• Elements

Share this page:

Code

<!--BREADCRUMBS-->
<div class="container">
<div class="row page-top">
<div class="col-md-8">
<ul class="breadcrumb">
<li><a href="http://www.hse.gov.uk" title="Home">HSE</a></li>
<li><a href="http://design.hse.gov.uk/style-guide.html">Design guide</a></li>
<li class="active"> <a href="http://design.hse.gov.uk/elements.html">Elements</a></li>
</ul>
</div>
<div class="xrm-editable-html&#32;xrm-attribute" data-languageContext="English">
<div class="xrm-attribute-value">
<div class="services-share">
<div class="col-md-4 text-right">
<p class="share addthis_toolbox">
<span>Share this page:</span>
<a title="Share on Facebook." class="addthis_button_facebook at300b" href=""><i class="fa fa-facebook-square" aria-hidden="true"></i></a>
<a title="Share on Twitter." class="addthis_button_twitter at300b" href="#" target="_blank"><i class="fa fa-twitter" aria-hidden="true"></i></a>
<a title="Share on Linkedin." class="addthis_button_linkedin at300b" href="#" target="_blank"><i class="fa fa-linkedin-square" aria-hidden="true"></i></a>
<a title="Share on WhatsApp." class="addthis_button_whatsapp at300b" href="#" target="_blank"><i class="fa fa-whatsapp" aria-hidden="true"></i></a>
<a title="Share." class="addthis_button_more at300b" href="#" target="_blank"><i class="fa fa-share-alt" aria-hidden="true"></i></a>
</p>
</div>
<!-- col -->
</div>
<!-- services-share -->
</div>
</div>
</div>
</div>
<!--BREADCRUMBS END-->

When to use it

Use this when you need to help users understand and move between levels of a website.

Don’t use it to show progress through a linear transaction. 

If other navigation is present, consider whether it is required or not.

How to use it

It should show the current page (not linked) and then the pages/path above with each item linked to that page.

On GOV.UK

See original component and latest research for this on the Government’s design system at: https://design-system.service.gov.uk/components/breadcrumbs/

 

Use an error message when there is a validation error. Explain what went wrong and how to fix it.

Example

The form could not be submitted for the following reasons

• How many are classified radiation employees? is a required field.

Code

<div class="entity-form class="entity-none";>
<div class="validation-summary alert alert-error alert-danger alert-block">
<h4 class="validation-header">The form could not be submitted for the following reasons</h4>
<ul>
<li><a href="">How many are classified radiation employees? is a required field.</a></li>
</ul>
</div>
</div>

When to use it

Show an error message at the top of the page  when there is a validation error.

How to use it

Summarise all errors at the top of the page the user is on using an error summary and link each error statement to the field in question.

On .GOV.UK

See original component and latest research for this on the Government’s design system at: https://design-system.service.gov.uk/components/error-message/

Comments

We are amending this to follow GDS guidance so that an error message is also displayed next to the field.

 

Help users select and upload a file.

Example

Upload a file

Code

<div class="form-group">
<label class="form-label" for="file-input"> Upload a file </label>
<input type="file" id="file-input">
</div>

When to use this

You should only ask users to use this if it’s critical to the delivery of the service.

On .GOV.UK

See original component and latest research for this on the Government’s design system at: https://design-system.service.gov.uk/components/file-upload/