Labels, legends and headings

Text input

isPageHeading: true

isPageHeading: false


Text input (with hint)

isPageHeading: true

It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.

It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.

It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.

It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.

It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.

isPageHeading: false

It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.
It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.
It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.
It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.
It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.

Text input (with hint and error)

isPageHeading: true

It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’. Error: Error message goes here

It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’. Error: Error message goes here

It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’. Error: Error message goes here

It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’. Error: Error message goes here

It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’. Error: Error message goes here

isPageHeading: false

It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’. Error: Error message goes here
It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’. Error: Error message goes here
It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’. Error: Error message goes here
It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’. Error: Error message goes here
It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’. Error: Error message goes here

Checkboxes

isPageHeading: true

<h1> govuk-fieldset__legend--xl

<h1> govuk-fieldset__legend--l

<h1> govuk-fieldset__legend--m

<h1> govuk-fieldset__legend--s

<h1> No class

isPageHeading: false

<legend> govuk-fieldset__legend--xl
<legend> govuk-fieldset__legend--l
<legend> govuk-fieldset__legend--m
<legend> govuk-fieldset__legend--s
<legend> No class

Checkboxes (with hint)

isPageHeading: true

<h1> govuk-fieldset__legend--xl

If you have dual nationality, select all options that are relevant to you.

<h1> govuk-fieldset__legend--l

If you have dual nationality, select all options that are relevant to you.

<h1> govuk-fieldset__legend--m

If you have dual nationality, select all options that are relevant to you.

<h1> govuk-fieldset__legend--s

If you have dual nationality, select all options that are relevant to you.

<h1> No class

If you have dual nationality, select all options that are relevant to you.

isPageHeading: false

<legend> govuk-fieldset__legend--xl If you have dual nationality, select all options that are relevant to you.
<legend> govuk-fieldset__legend--l If you have dual nationality, select all options that are relevant to you.
<legend> govuk-fieldset__legend--m If you have dual nationality, select all options that are relevant to you.
<legend> govuk-fieldset__legend--s If you have dual nationality, select all options that are relevant to you.
<legend> No class If you have dual nationality, select all options that are relevant to you.

Checkboxes (with hint and error)

isPageHeading: true

<h1> govuk-fieldset__legend--xl

If you have dual nationality, select all options that are relevant to you. Error: Please select an option

<h1> govuk-fieldset__legend--l

If you have dual nationality, select all options that are relevant to you. Error: Please select an option

<h1> govuk-fieldset__legend--m

If you have dual nationality, select all options that are relevant to you. Error: Please select an option

<h1> govuk-fieldset__legend--s

If you have dual nationality, select all options that are relevant to you. Error: Please select an option

<h1> No class

If you have dual nationality, select all options that are relevant to you. Error: Please select an option

isPageHeading: false

<legend> govuk-fieldset__legend--xl If you have dual nationality, select all options that are relevant to you. Error: Please select an option
<legend> govuk-fieldset__legend--l If you have dual nationality, select all options that are relevant to you. Error: Please select an option
<legend> govuk-fieldset__legend--m If you have dual nationality, select all options that are relevant to you. Error: Please select an option
<legend> govuk-fieldset__legend--s If you have dual nationality, select all options that are relevant to you. Error: Please select an option
<legend> No class If you have dual nationality, select all options that are relevant to you. Error: Please select an option

Radios

isPageHeading: true

<h1> govuk-fieldset__legend--xl

<h1> govuk-fieldset__legend--l

<h1> govuk-fieldset__legend--m

<h1> govuk-fieldset__legend--s

<h1> No class

isPageHeading: false

<legend> govuk-fieldset__legend--xl
<legend> govuk-fieldset__legend--l
<legend> govuk-fieldset__legend--m
<legend> govuk-fieldset__legend--s
<legend> No class

Radios (with hint)

isPageHeading: true

<h1> govuk-fieldset__legend--xl

This includes changing your last name or spelling your name differently.

<h1> govuk-fieldset__legend--l

This includes changing your last name or spelling your name differently.

<h1> govuk-fieldset__legend--m

This includes changing your last name or spelling your name differently.

<h1> govuk-fieldset__legend--s

This includes changing your last name or spelling your name differently.

<h1> No class

This includes changing your last name or spelling your name differently.

isPageHeading: false

<legend> govuk-fieldset__legend--xl This includes changing your last name or spelling your name differently.
<legend> govuk-fieldset__legend--l This includes changing your last name or spelling your name differently.
<legend> govuk-fieldset__legend--m This includes changing your last name or spelling your name differently.
<legend> govuk-fieldset__legend--s This includes changing your last name or spelling your name differently.
<legend> No class This includes changing your last name or spelling your name differently.

Radios (with hint and error)

isPageHeading: true

<h1> govuk-fieldset__legend--xl

This includes changing your last name or spelling your name differently. Error: Please select an option

<h1> govuk-fieldset__legend--l

This includes changing your last name or spelling your name differently. Error: Please select an option

<h1> govuk-fieldset__legend--m

This includes changing your last name or spelling your name differently. Error: Please select an option

<h1> govuk-fieldset__legend--s

This includes changing your last name or spelling your name differently. Error: Please select an option

<h1> No class

This includes changing your last name or spelling your name differently. Error: Please select an option

isPageHeading: false

<legend> govuk-fieldset__legend--xl This includes changing your last name or spelling your name differently. Error: Please select an option
<legend> govuk-fieldset__legend--l This includes changing your last name or spelling your name differently. Error: Please select an option
<legend> govuk-fieldset__legend--m This includes changing your last name or spelling your name differently. Error: Please select an option
<legend> govuk-fieldset__legend--s This includes changing your last name or spelling your name differently. Error: Please select an option
<legend> No class This includes changing your last name or spelling your name differently. Error: Please select an option

Date Input

isPageHeading: true

<h1> govuk-fieldset__legend--xl

<h1> govuk-fieldset__legend--l

<h1> govuk-fieldset__legend--m

<h1> govuk-fieldset__legend--s

<h1> No class

isPageHeading: false

<legend> govuk-fieldset__legend--xl
<legend> govuk-fieldset__legend--l
<legend> govuk-fieldset__legend--m
<legend> govuk-fieldset__legend--s
<legend> No class

Date Input (with hint)

isPageHeading: true

<h1> govuk-fieldset__legend--xl

For example 5 12 1987

<h1> govuk-fieldset__legend--l

For example 5 12 1987

<h1> govuk-fieldset__legend--m

For example 5 12 1987

<h1> govuk-fieldset__legend--s

For example 5 12 1987

<h1> No class

For example 5 12 1987

isPageHeading: false

<legend> govuk-fieldset__legend--xl For example 5 12 1987
<legend> govuk-fieldset__legend--l For example 5 12 1987
<legend> govuk-fieldset__legend--m For example 5 12 1987
<legend> govuk-fieldset__legend--s For example 5 12 1987
<legend> No class For example 5 12 1987

Date Input (with hint and error)

isPageHeading: true

<h1> govuk-fieldset__legend--xl

For example 5 12 1987 Error: You must provide your date of birth

<h1> govuk-fieldset__legend--l

For example 5 12 1987 Error: You must provide your date of birth

<h1> govuk-fieldset__legend--m

For example 5 12 1987 Error: You must provide your date of birth

<h1> govuk-fieldset__legend--s

For example 5 12 1987 Error: You must provide your date of birth

<h1> No class

For example 5 12 1987 Error: You must provide your date of birth

isPageHeading: false

<legend> govuk-fieldset__legend--xl For example 5 12 1987 Error: You must provide your date of birth
<legend> govuk-fieldset__legend--l For example 5 12 1987 Error: You must provide your date of birth
<legend> govuk-fieldset__legend--m For example 5 12 1987 Error: You must provide your date of birth
<legend> govuk-fieldset__legend--s For example 5 12 1987 Error: You must provide your date of birth
<legend> No class For example 5 12 1987 Error: You must provide your date of birth