Skip to main content

Internal review app NHS.UK frontend

Use design system guidance and examples to build consistent, accessible NHS services for the public and staff.

Deployed automatically from main branch (opens in new tab).

Label

These examples are used for automated tests and may not follow service manual best practice.

Label default

Open this example in a new tab: Label default

Code

Markup

<h1 class="nhsuk-label-wrapper">
  <label class="nhsuk-label nhsuk-label--l">
    What is your full name?
  </label>
</h1>

Macro

{% from "label/macro.njk" import label -%}

{{ label({
  heading: "What is your full name?",
  size: "l"
}) }}

Label size class

Open this example in a new tab: Label size class

Code

Markup

<h1 class="nhsuk-label-wrapper">
  <label class="nhsuk-label nhsuk-label--l">
    What is your full name?
  </label>
</h1>

Macro

{% from "label/macro.njk" import label -%}

{{ label({
  heading: "What is your full name?",
  classes: "nhsuk-label--l"
}) }}

Label size class overriding size option

Open this example in a new tab: Label size class overriding size option

Code

Markup

<h1 class="nhsuk-label-wrapper">
  <label class="nhsuk-label nhsuk-label--l">
    What is your full name?
  </label>
</h1>

Macro

{% from "label/macro.njk" import label -%}

{{ label({
  heading: "What is your full name?",
  classes: "nhsuk-label--l",
  size: "s"
}) }}

Label with size S text

Open this example in a new tab: Label with size S text

Code

Markup

<h1 class="nhsuk-label-wrapper">
  <label class="nhsuk-label nhsuk-label--s">
    What is your full name?
  </label>
</h1>

Macro

{% from "label/macro.njk" import label -%}

{{ label({
  heading: "What is your full name?",
  size: "s"
}) }}

Label with size M text

Open this example in a new tab: Label with size M text

Code

Markup

<h1 class="nhsuk-label-wrapper">
  <label class="nhsuk-label nhsuk-label--m">
    What is your full name?
  </label>
</h1>

Macro

{% from "label/macro.njk" import label -%}

{{ label({
  heading: "What is your full name?",
  size: "m"
}) }}

Label with size L text

Open this example in a new tab: Label with size L text

Code

Markup

<h1 class="nhsuk-label-wrapper">
  <label class="nhsuk-label nhsuk-label--l">
    What is your full name?
  </label>
</h1>

Macro

{% from "label/macro.njk" import label -%}

{{ label({
  heading: "What is your full name?",
  size: "l"
}) }}

Label with size XL text

Open this example in a new tab: Label with size XL text

Code

Markup

<h1 class="nhsuk-label-wrapper">
  <label class="nhsuk-label nhsuk-label--xl">
    What is your full name?
  </label>
</h1>

Macro

{% from "label/macro.njk" import label -%}

{{ label({
  heading: "What is your full name?",
  size: "xl"
}) }}

Label with size S text and caption

Open this example in a new tab: Label with size S text and caption

Code

Markup

<label class="nhsuk-label nhsuk-label--s">
  <span class="nhsuk-caption">
    About you
  </span>
  What is your full name?
</label>

Macro

{% from "label/macro.njk" import label -%}

{{ label({
  text: "What is your full name?",
  caption: "About you",
  size: "s"
}) }}

Label with size M text and caption

Open this example in a new tab: Label with size M text and caption

Code

Markup

<label class="nhsuk-label nhsuk-label--m">
  <span class="nhsuk-caption-m">
    About you
  </span>
  What is your full name?
</label>

Macro

{% from "label/macro.njk" import label -%}

{{ label({
  text: "What is your full name?",
  caption: "About you",
  size: "m"
}) }}

Label with size L text and caption

Open this example in a new tab: Label with size L text and caption

Code

Markup

<label class="nhsuk-label nhsuk-label--l">
  <span class="nhsuk-caption-l">
    About you
  </span>
  What is your full name?
</label>

Macro

{% from "label/macro.njk" import label -%}

{{ label({
  text: "What is your full name?",
  caption: "About you",
  size: "l"
}) }}

Label with size XL text and caption

Open this example in a new tab: Label with size XL text and caption

Code

Markup

<label class="nhsuk-label nhsuk-label--xl">
  <span class="nhsuk-caption-xl">
    About you
  </span>
  What is your full name?
</label>

Macro

{% from "label/macro.njk" import label -%}

{{ label({
  text: "What is your full name?",
  caption: "About you",
  size: "xl"
}) }}

Label with size S text and caption "after" as a paragraph

Open this example in a new tab: Label with size S text and caption "after" as a paragraph

About you

Code

Markup

<label class="nhsuk-label nhsuk-label--s">
  What is your full name?
</label>
<p class="nhsuk-caption nhsuk-caption--bottom">
  About you
</p>

Macro

{% from "label/macro.njk" import label -%}

{{ label({
  text: "What is your full name?",
  caption: {
    text: "About you",
    placement: "after",
    element: "p"
  },
  size: "s"
}) }}

Label with size M text and caption "after" as a paragraph

Open this example in a new tab: Label with size M text and caption "after" as a paragraph

About you

Code

Markup

<label class="nhsuk-label nhsuk-label--m">
  What is your full name?
</label>
<p class="nhsuk-caption-m nhsuk-caption--bottom">
  About you
</p>

Macro

{% from "label/macro.njk" import label -%}

{{ label({
  text: "What is your full name?",
  caption: {
    text: "About you",
    placement: "after",
    element: "p"
  },
  size: "m"
}) }}

Label with size L text and caption "after" as a paragraph

Open this example in a new tab: Label with size L text and caption "after" as a paragraph

About you

Code

Markup

<label class="nhsuk-label nhsuk-label--l">
  What is your full name?
</label>
<p class="nhsuk-caption-l nhsuk-caption--bottom">
  About you
</p>

Macro

{% from "label/macro.njk" import label -%}

{{ label({
  text: "What is your full name?",
  caption: {
    text: "About you",
    placement: "after",
    element: "p"
  },
  size: "l"
}) }}

Label with size XL text and caption "after" as a paragraph

Open this example in a new tab: Label with size XL text and caption "after" as a paragraph

About you

Code

Markup

<label class="nhsuk-label nhsuk-label--xl">
  What is your full name?
</label>
<p class="nhsuk-caption-xl nhsuk-caption--bottom">
  About you
</p>

Macro

{% from "label/macro.njk" import label -%}

{{ label({
  text: "What is your full name?",
  caption: {
    text: "About you",
    placement: "after",
    element: "p"
  },
  size: "xl"
}) }}

Label with size S text and caption "before" as a paragraph

Open this example in a new tab: Label with size S text and caption "before" as a paragraph

About you

Code

Markup

<p class="nhsuk-caption">
  About you
</p>
<label class="nhsuk-label nhsuk-label--s">
  What is your full name?
</label>

Macro

{% from "label/macro.njk" import label -%}

{{ label({
  text: "What is your full name?",
  caption: {
    text: "About you",
    placement: "before",
    element: "p"
  },
  size: "s"
}) }}

Label with size M text and caption "before" as a paragraph

Open this example in a new tab: Label with size M text and caption "before" as a paragraph

About you

Code

Markup

<p class="nhsuk-caption-m">
  About you
</p>
<label class="nhsuk-label nhsuk-label--m">
  What is your full name?
</label>

Macro

{% from "label/macro.njk" import label -%}

{{ label({
  text: "What is your full name?",
  caption: {
    text: "About you",
    placement: "before",
    element: "p"
  },
  size: "m"
}) }}

Label with size L text and caption "before" as a paragraph

Open this example in a new tab: Label with size L text and caption "before" as a paragraph

About you

Code

Markup

<p class="nhsuk-caption-l">
  About you
</p>
<label class="nhsuk-label nhsuk-label--l">
  What is your full name?
</label>

Macro

{% from "label/macro.njk" import label -%}

{{ label({
  text: "What is your full name?",
  caption: {
    text: "About you",
    placement: "before",
    element: "p"
  },
  size: "l"
}) }}

Label with size XL text and caption "before" as a paragraph

Open this example in a new tab: Label with size XL text and caption "before" as a paragraph

About you

Code

Markup

<p class="nhsuk-caption-xl">
  About you
</p>
<label class="nhsuk-label nhsuk-label--xl">
  What is your full name?
</label>

Macro

{% from "label/macro.njk" import label -%}

{{ label({
  text: "What is your full name?",
  caption: {
    text: "About you",
    placement: "before",
    element: "p"
  },
  size: "xl"
}) }}

Label with deprecated page heading

Open this example in a new tab: Label with deprecated page heading

Code

Markup

<h1 class="nhsuk-label-wrapper">
  <label class="nhsuk-label nhsuk-label--m">
    What is your full name?
  </label>
</h1>

Macro

{% from "label/macro.njk" import label -%}

{{ label({
  text: "What is your full name?",
  size: "m",
  isPageHeading: true
}) }}

Label with deprecated page heading overriding heading

Open this example in a new tab: Label with deprecated page heading overriding heading

Code

Markup

<label class="nhsuk-label">
  What is your full name?
</label>

Macro

{% from "label/macro.njk" import label -%}

{{ label({
  heading: {
    text: "What is your full name?",
    level: 3,
    size: "s"
  },
  isPageHeading: false
}) }}

Label with heading level 1

Open this example in a new tab: Label with heading level 1

Code

Markup

<h1 class="nhsuk-label-wrapper">
  <label class="nhsuk-label nhsuk-label--l">
    What is your full name?
  </label>
</h1>

Macro

{% from "label/macro.njk" import label -%}

{{ label({
  text: "What is your full name?",
  size: "l",
  heading: {
    level: 1
  }
}) }}

Label with heading level 2

Open this example in a new tab: Label with heading level 2

Code

Markup

<h2 class="nhsuk-label-wrapper">
  <label class="nhsuk-label nhsuk-label--m">
    What is your full name?
  </label>
</h2>

Macro

{% from "label/macro.njk" import label -%}

{{ label({
  text: "What is your full name?",
  size: "m",
  heading: {
    level: 2
  }
}) }}

Label with heading level 3

Open this example in a new tab: Label with heading level 3

Code

Markup

<h3 class="nhsuk-label-wrapper">
  <label class="nhsuk-label nhsuk-label--s">
    What is your full name?
  </label>
</h3>

Macro

{% from "label/macro.njk" import label -%}

{{ label({
  text: "What is your full name?",
  size: "s",
  heading: {
    level: 3
  }
}) }}

Label with heading options only

Open this example in a new tab: Label with heading options only

Code

Markup

<h3 class="nhsuk-label-wrapper">
  <label class="nhsuk-label nhsuk-label--s">
    What is your full name?
  </label>
</h3>

Macro

{% from "label/macro.njk" import label -%}

{{ label({
  heading: {
    text: "What is your full name?",
    level: 3,
    size: "s"
  }
}) }}

Label with HTML

Open this example in a new tab: Label with HTML

Code

Markup

<h1 class="nhsuk-label-wrapper">
  <label class="nhsuk-label nhsuk-label--l">
    What is your full name?
  </label>
</h1>

Macro

{% from "label/macro.njk" import label -%}

{{ label({
  html: "What is your full name?",
  heading: true,
  size: "l"
}) }}

Label with HTML via call block

Open this example in a new tab: Label with HTML via call block

Code

Markup

<h1 class="nhsuk-label-wrapper">
  <label class="nhsuk-label nhsuk-label--l">
  What is your full name?
  </label>
</h1>

Macro

{% from "label/macro.njk" import label -%}

{% call label({
  heading: true,
  size: "l"
}) %}
What is your full name?
{%- endcall %}

Label with HTML via call block, without heading

Open this example in a new tab: Label with HTML via call block, without heading

Code

Markup

<label class="nhsuk-label nhsuk-label--l">
What is your full name?
</label>

Macro

{% from "label/macro.njk" import label -%}

{% call label({
  size: "l"
}) %}
What is your full name?
{%- endcall %}

Label with id attribute

Open this example in a new tab: Label with id attribute

Code

Markup

<h1 class="nhsuk-label-wrapper">
  <label class="nhsuk-label nhsuk-label--l" id="custom-id">
    What is your full name?
  </label>
</h1>

Macro

{% from "label/macro.njk" import label -%}

{{ label({
  id: "custom-id",
  heading: "What is your full name?",
  size: "l"
}) }}

Label with id attribute on heading

Open this example in a new tab: Label with id attribute on heading

Code

Markup

<h1 class="nhsuk-label-wrapper" id="custom-id">
  <label class="nhsuk-label nhsuk-label--l">
    What is your full name?
  </label>
</h1>

Macro

{% from "label/macro.njk" import label -%}

{{ label({
  heading: {
    text: "What is your full name?",
    id: "custom-id"
  },
  size: "l"
}) }}

Label without heading

Open this example in a new tab: Label without heading

Code

Markup

<label class="nhsuk-label">
  What is your full name?
</label>

Macro

{% from "label/macro.njk" import label -%}

{{ label({
  text: "What is your full name?"
}) }}