Labels, legends and headings

Text input

isPageHeading: true

<h1> govuk-label--xl

<h1> govuk-label--l

<h1> govuk-label--m

<h1> govuk-label--s

<h1> No class

isPageHeading: false

<label> govuk-label--xl

<label> govuk-label--l

<label> govuk-label--m

<label> govuk-label--s

<label> No class

Text input (with hint)

isPageHeading: true

<h1> govuk-label--xl

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

<h1> govuk-label--l

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

<h1> govuk-label--m

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

<h1> govuk-label--s

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

<h1> No class

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

isPageHeading: false

<label> govuk-label--xl

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

<label> govuk-label--l

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

<label> govuk-label--m

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

<label> govuk-label--s

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

<label> No class

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

<h1> govuk-label--xl

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

Error: Error message goes here

<h1> govuk-label--l

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

Error: Error message goes here

<h1> govuk-label--m

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

Error: Error message goes here

<h1> govuk-label--s

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

Error: Error message goes here

<h1> No class

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

<label> govuk-label--xl

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

Error: Error message goes here

<label> govuk-label--l

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

Error: Error message goes here

<label> govuk-label--m

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

Error: Error message goes here

<label> govuk-label--s

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

Error: Error message goes here

<label> No class

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

British

Irish

Citizen of another country

<h1> govuk-fieldset__legend--l

British

Irish

Citizen of another country

<h1> govuk-fieldset__legend--m

British

Irish

Citizen of another country

<h1> govuk-fieldset__legend--s

British

Irish

Citizen of another country

<h1> No class

British

Irish

Citizen of another country

isPageHeading: false

<legend> govuk-fieldset__legend--xl

British

Irish

Citizen of another country

<legend> govuk-fieldset__legend--l

British

Irish

Citizen of another country

<legend> govuk-fieldset__legend--m

British

Irish

Citizen of another country

<legend> govuk-fieldset__legend--s

British

Irish

Citizen of another country

<legend> No class

British

Irish

Citizen of another country

Checkboxes (with hint)

isPageHeading: true

<h1> govuk-fieldset__legend--xl

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

British

Irish

Citizen of another country

<h1> govuk-fieldset__legend--l

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

British

Irish

Citizen of another country

<h1> govuk-fieldset__legend--m

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

British

Irish

Citizen of another country

<h1> govuk-fieldset__legend--s

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

British

Irish

Citizen of another country

<h1> No class

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

British

Irish

Citizen of another country

isPageHeading: false

<legend> govuk-fieldset__legend--xl

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

British

Irish

Citizen of another country

<legend> govuk-fieldset__legend--l

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

British

Irish

Citizen of another country

<legend> govuk-fieldset__legend--m

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

British

Irish

Citizen of another country

<legend> govuk-fieldset__legend--s

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

British

Irish

Citizen of another country

<legend> No class

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

British

Irish

Citizen of another country

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

British

Irish

Citizen of another country

<h1> govuk-fieldset__legend--l

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

Error: Please select an option

British

Irish

Citizen of another country

<h1> govuk-fieldset__legend--m

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

Error: Please select an option

British

Irish

Citizen of another country

<h1> govuk-fieldset__legend--s

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

Error: Please select an option

British

Irish

Citizen of another country

<h1> No class

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

Error: Please select an option

British

Irish

Citizen of another country

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

British

Irish

Citizen of another country

<legend> govuk-fieldset__legend--l

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

Error: Please select an option

British

Irish

Citizen of another country

<legend> govuk-fieldset__legend--m

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

Error: Please select an option

British

Irish

Citizen of another country

<legend> govuk-fieldset__legend--s

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

Error: Please select an option

British

Irish

Citizen of another country

<legend> No class

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

Error: Please select an option

British

Irish

Citizen of another country

Radios

isPageHeading: true

<h1> govuk-fieldset__legend--xl

Yes

<h1> govuk-fieldset__legend--l

Yes

<h1> govuk-fieldset__legend--m

Yes

<h1> govuk-fieldset__legend--s

Yes

<h1> No class

Yes

isPageHeading: false

<legend> govuk-fieldset__legend--xl

Yes

<legend> govuk-fieldset__legend--l

Yes

<legend> govuk-fieldset__legend--m

Yes

<legend> govuk-fieldset__legend--s

Yes

<legend> No class

Yes

Radios (with hint)

isPageHeading: true

<h1> govuk-fieldset__legend--xl

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

Yes

<h1> govuk-fieldset__legend--l

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

Yes

<h1> govuk-fieldset__legend--m

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

Yes

<h1> govuk-fieldset__legend--s

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

Yes

<h1> No class

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

Yes

isPageHeading: false

<legend> govuk-fieldset__legend--xl

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

Yes

<legend> govuk-fieldset__legend--l

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

Yes

<legend> govuk-fieldset__legend--m

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

Yes

<legend> govuk-fieldset__legend--s

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

Yes

<legend> No class

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

Yes

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

Yes

<h1> govuk-fieldset__legend--l

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

Error: Please select an option

Yes

<h1> govuk-fieldset__legend--m

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

Error: Please select an option

Yes

<h1> govuk-fieldset__legend--s

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

Error: Please select an option

Yes

<h1> No class

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

Error: Please select an option

Yes

isPageHeading: false

<legend> govuk-fieldset__legend--xl

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

Error: Please select an option

Yes

<legend> govuk-fieldset__legend--l

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

Error: Please select an option

Yes

<legend> govuk-fieldset__legend--m

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

Error: Please select an option

Yes

<legend> govuk-fieldset__legend--s

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

Error: Please select an option

Yes

<legend> No class

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

Error: Please select an option

Yes

Date Input

isPageHeading: true

<h1> govuk-fieldset__legend--xl

Day

Month

Year

<h1> govuk-fieldset__legend--l

Day

Month

Year

<h1> govuk-fieldset__legend--m

Day

Month

Year

<h1> govuk-fieldset__legend--s

Day

Month

Year

<h1> No class

Day

Month

Year

isPageHeading: false

<legend> govuk-fieldset__legend--xl

Day

Month

Year

<legend> govuk-fieldset__legend--l

Day

Month

Year

<legend> govuk-fieldset__legend--m

Day

Month

Year

<legend> govuk-fieldset__legend--s

Day

Month

Year

<legend> No class

Day

Month

Year

Date Input (with hint)

isPageHeading: true

<h1> govuk-fieldset__legend--xl

For example 5 12 1987

Day

Month

Year

<h1> govuk-fieldset__legend--l

For example 5 12 1987

Day

Month

Year

<h1> govuk-fieldset__legend--m

For example 5 12 1987

Day

Month

Year

<h1> govuk-fieldset__legend--s

For example 5 12 1987

Day

Month

Year

<h1> No class

For example 5 12 1987

Day

Month

Year

isPageHeading: false

<legend> govuk-fieldset__legend--xl

For example 5 12 1987

Day

Month

Year

<legend> govuk-fieldset__legend--l

For example 5 12 1987

Day

Month

Year

<legend> govuk-fieldset__legend--m

For example 5 12 1987

Day

Month

Year

<legend> govuk-fieldset__legend--s

For example 5 12 1987

Day

Month

Year

<legend> No class

For example 5 12 1987

Day

Month

Year

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

Day

Month

Year

<h1> govuk-fieldset__legend--l

For example 5 12 1987

Error: You must provide your date of birth

Day

Month

Year

<h1> govuk-fieldset__legend--m

For example 5 12 1987

Error: You must provide your date of birth

Day

Month

Year

<h1> govuk-fieldset__legend--s

For example 5 12 1987

Error: You must provide your date of birth

Day

Month

Year

<h1> No class

For example 5 12 1987

Error: You must provide your date of birth

Day

Month

Year

isPageHeading: false

<legend> govuk-fieldset__legend--xl

For example 5 12 1987

Error: You must provide your date of birth

Day

Month

Year

<legend> govuk-fieldset__legend--l

For example 5 12 1987

Error: You must provide your date of birth

Day

Month

Year

<legend> govuk-fieldset__legend--m

For example 5 12 1987

Error: You must provide your date of birth

Day

Month

Year

<legend> govuk-fieldset__legend--s

For example 5 12 1987

Error: You must provide your date of birth

Day

Month

Year

<legend> No class

For example 5 12 1987

Error: You must provide your date of birth

Day

Month

Year