Skip to main content
All components

ComponentLabel

31 of 31 upstream examples match. Razor component: <NhsukLabel>

Default

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC 
<nhsuk-label heading="What is your full name?" size="l" />
Blazor 
<NhsukLabel Heading="@("What is your full name?")" Size="l" />
Nunjucks (upstream) 
{% from "nhsuk/components/label/macro.njk" import label %}

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

Size class

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC 
<nhsuk-label heading="What is your full name?" classes="nhsuk-label--l" />
Blazor 
<NhsukLabel Heading="@("What is your full name?")" Classes="nhsuk-label--l" />
Nunjucks (upstream) 
{% from "nhsuk/components/label/macro.njk" import label %}

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

Size class overriding size option

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC 
<nhsuk-label heading="What is your full name?" classes="nhsuk-label--l" size="s" />
Blazor 
<NhsukLabel Heading="@("What is your full name?")" Classes="nhsuk-label--l" Size="s" />
Nunjucks (upstream) 
{% from "nhsuk/components/label/macro.njk" import label %}

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

Text

Matches upstream

with size S

Open on its own page (opens in new tab)

Razor Pages and MVC 
<nhsuk-label heading="What is your full name?" size="s" />
Blazor 
<NhsukLabel Heading="@("What is your full name?")" Size="s" />
Nunjucks (upstream) 
{% from "nhsuk/components/label/macro.njk" import label %}

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

Text

Matches upstream

with size M

Open on its own page (opens in new tab)

Razor Pages and MVC 
<nhsuk-label heading="What is your full name?" size="m" />
Blazor 
<NhsukLabel Heading="@("What is your full name?")" Size="m" />
Nunjucks (upstream) 
{% from "nhsuk/components/label/macro.njk" import label %}

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

Text

Matches upstream

with size L

Open on its own page (opens in new tab)

Razor Pages and MVC 
<nhsuk-label heading="What is your full name?" size="l" />
Blazor 
<NhsukLabel Heading="@("What is your full name?")" Size="l" />
Nunjucks (upstream) 
{% from "nhsuk/components/label/macro.njk" import label %}

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

Text

Matches upstream

with size XL

Open on its own page (opens in new tab)

Razor Pages and MVC 
<nhsuk-label heading="What is your full name?" size="xl" />
Blazor 
<NhsukLabel Heading="@("What is your full name?")" Size="xl" />
Nunjucks (upstream) 
{% from "nhsuk/components/label/macro.njk" import label %}

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

Text and caption

Matches upstream

with size S

Open on its own page (opens in new tab)

Razor Pages and MVC 
<nhsuk-label text="What is your full name?" caption="About you" size="s" />
Blazor 
<NhsukLabel Text="What is your full name?" Caption="@("About you")" Size="s" />
Nunjucks (upstream) 
{% from "nhsuk/components/label/macro.njk" import label %}

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

Text and caption

Matches upstream

with size M

Open on its own page (opens in new tab)

Razor Pages and MVC 
<nhsuk-label text="What is your full name?" caption="About you" size="m" />
Blazor 
<NhsukLabel Text="What is your full name?" Caption="@("About you")" Size="m" />
Nunjucks (upstream) 
{% from "nhsuk/components/label/macro.njk" import label %}

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

Text and caption

Matches upstream

with size L

Open on its own page (opens in new tab)

Razor Pages and MVC 
<nhsuk-label text="What is your full name?" caption="About you" size="l" />
Blazor 
<NhsukLabel Text="What is your full name?" Caption="@("About you")" Size="l" />
Nunjucks (upstream) 
{% from "nhsuk/components/label/macro.njk" import label %}

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

Text and caption

Matches upstream

with size XL

Open on its own page (opens in new tab)

Razor Pages and MVC 
<nhsuk-label text="What is your full name?" caption="About you" size="xl" />
Blazor 
<NhsukLabel Text="What is your full name?" Caption="@("About you")" Size="xl" />
Nunjucks (upstream) 
{% from "nhsuk/components/label/macro.njk" import label %}

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

Text and caption "after" as a paragraph

Matches upstream

with size S

Open on its own page (opens in new tab)

About you

Razor Pages and MVC 
<nhsuk-label
    text="What is your full name?"
    caption-options="@(new CaptionOptions
    {
        Text = "About you",
        Placement = "after",
        Element = "p",
    })"
    size="s"
/>
Blazor 
<NhsukLabel
    Text="What is your full name?"
    Caption="@(new CaptionOptions
    {
        Text = "About you",
        Placement = "after",
        Element = "p",
    })"
    Size="s"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/label/macro.njk" import label %}

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

Text and caption "after" as a paragraph

Matches upstream

with size M

Open on its own page (opens in new tab)

About you

Razor Pages and MVC 
<nhsuk-label
    text="What is your full name?"
    caption-options="@(new CaptionOptions
    {
        Text = "About you",
        Placement = "after",
        Element = "p",
    })"
    size="m"
/>
Blazor 
<NhsukLabel
    Text="What is your full name?"
    Caption="@(new CaptionOptions
    {
        Text = "About you",
        Placement = "after",
        Element = "p",
    })"
    Size="m"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/label/macro.njk" import label %}

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

Text and caption "after" as a paragraph

Matches upstream

with size L

Open on its own page (opens in new tab)

About you

Razor Pages and MVC 
<nhsuk-label
    text="What is your full name?"
    caption-options="@(new CaptionOptions
    {
        Text = "About you",
        Placement = "after",
        Element = "p",
    })"
    size="l"
/>
Blazor 
<NhsukLabel
    Text="What is your full name?"
    Caption="@(new CaptionOptions
    {
        Text = "About you",
        Placement = "after",
        Element = "p",
    })"
    Size="l"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/label/macro.njk" import label %}

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

Text and caption "after" as a paragraph

Matches upstream

with size XL

Open on its own page (opens in new tab)

About you

Razor Pages and MVC 
<nhsuk-label
    text="What is your full name?"
    caption-options="@(new CaptionOptions
    {
        Text = "About you",
        Placement = "after",
        Element = "p",
    })"
    size="xl"
/>
Blazor 
<NhsukLabel
    Text="What is your full name?"
    Caption="@(new CaptionOptions
    {
        Text = "About you",
        Placement = "after",
        Element = "p",
    })"
    Size="xl"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/label/macro.njk" import label %}

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

Text and caption "before" as a paragraph

Matches upstream

with size S

Open on its own page (opens in new tab)

About you

Razor Pages and MVC 
<nhsuk-label
    text="What is your full name?"
    caption-options="@(new CaptionOptions
    {
        Text = "About you",
        Placement = "before",
        Element = "p",
    })"
    size="s"
/>
Blazor 
<NhsukLabel
    Text="What is your full name?"
    Caption="@(new CaptionOptions
    {
        Text = "About you",
        Placement = "before",
        Element = "p",
    })"
    Size="s"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/label/macro.njk" import label %}

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

Text and caption "before" as a paragraph

Matches upstream

with size M

Open on its own page (opens in new tab)

About you

Razor Pages and MVC 
<nhsuk-label
    text="What is your full name?"
    caption-options="@(new CaptionOptions
    {
        Text = "About you",
        Placement = "before",
        Element = "p",
    })"
    size="m"
/>
Blazor 
<NhsukLabel
    Text="What is your full name?"
    Caption="@(new CaptionOptions
    {
        Text = "About you",
        Placement = "before",
        Element = "p",
    })"
    Size="m"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/label/macro.njk" import label %}

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

Text and caption "before" as a paragraph

Matches upstream

with size L

Open on its own page (opens in new tab)

About you

Razor Pages and MVC 
<nhsuk-label
    text="What is your full name?"
    caption-options="@(new CaptionOptions
    {
        Text = "About you",
        Placement = "before",
        Element = "p",
    })"
    size="l"
/>
Blazor 
<NhsukLabel
    Text="What is your full name?"
    Caption="@(new CaptionOptions
    {
        Text = "About you",
        Placement = "before",
        Element = "p",
    })"
    Size="l"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/label/macro.njk" import label %}

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

Text and caption "before" as a paragraph

Matches upstream

with size XL

Open on its own page (opens in new tab)

About you

Razor Pages and MVC 
<nhsuk-label
    text="What is your full name?"
    caption-options="@(new CaptionOptions
    {
        Text = "About you",
        Placement = "before",
        Element = "p",
    })"
    size="xl"
/>
Blazor 
<NhsukLabel
    Text="What is your full name?"
    Caption="@(new CaptionOptions
    {
        Text = "About you",
        Placement = "before",
        Element = "p",
    })"
    Size="xl"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/label/macro.njk" import label %}

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

With deprecated page heading

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC 
<nhsuk-label
    text="What is your full name?"
    size="m"
    options="@(new LabelOptions
    {
        IsPageHeading = true,
    })"
/>
Blazor 
<NhsukLabel Text="What is your full name?" Size="m" IsPageHeading="true" />
Nunjucks (upstream) 
{% from "nhsuk/components/label/macro.njk" import label %}

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

With deprecated page heading overriding heading

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC 
<nhsuk-label
    heading-options="@(new LabelHeadingOptions
    {
        Text = "What is your full name?",
        Level = 3,
        Size = "s",
    })"
    options="@(new LabelOptions
    {
        IsPageHeading = false,
    })"
/>
Blazor 
<NhsukLabel
    Heading="@(new LabelHeadingOptions
    {
        Text = "What is your full name?",
        Level = 3,
        Size = "s",
    })"
    IsPageHeading="false"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/label/macro.njk" import label %}

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

With heading level 1

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC 
<nhsuk-label
    text="What is your full name?"
    size="l"
    heading-options="@(new LabelHeadingOptions
    {
        Level = 1,
    })"
/>
Blazor 
<NhsukLabel
    Text="What is your full name?"
    Size="l"
    Heading="@(new LabelHeadingOptions
    {
        Level = 1,
    })"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/label/macro.njk" import label %}

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

With heading level 2

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC 
<nhsuk-label
    text="What is your full name?"
    size="m"
    heading-options="@(new LabelHeadingOptions
    {
        Level = 2,
    })"
/>
Blazor 
<NhsukLabel
    Text="What is your full name?"
    Size="m"
    Heading="@(new LabelHeadingOptions
    {
        Level = 2,
    })"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/label/macro.njk" import label %}

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

With heading level 3

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC 
<nhsuk-label
    text="What is your full name?"
    size="s"
    heading-options="@(new LabelHeadingOptions
    {
        Level = 3,
    })"
/>
Blazor 
<NhsukLabel
    Text="What is your full name?"
    Size="s"
    Heading="@(new LabelHeadingOptions
    {
        Level = 3,
    })"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/label/macro.njk" import label %}

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

With heading options only

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC 
<nhsuk-label
    heading-options="@(new LabelHeadingOptions
    {
        Text = "What is your full name?",
        Level = 3,
        Size = "s",
    })"
/>
Blazor 
<NhsukLabel
    Heading="@(new LabelHeadingOptions
    {
        Text = "What is your full name?",
        Level = 3,
        Size = "s",
    })"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/label/macro.njk" import label %}

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

With HTML

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC 
<nhsuk-label html="What is your full name?" heading-options="@(true)" size="l" />
Blazor 
<NhsukLabel Html="What is your full name?" Heading="@(true)" Size="l" />
Nunjucks (upstream) 
{% from "nhsuk/components/label/macro.njk" import label %}

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

With HTML via call block

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC 
<nhsuk-label heading-options="@(true)" size="l">
    What is your full name?
</nhsuk-label>
Blazor 
<NhsukLabel Heading="@(true)" Size="l">
    What is your full name?
</NhsukLabel>
Nunjucks (upstream) 
{% from "nhsuk/components/label/macro.njk" import label %}

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

With HTML via call block, without heading

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC 
<nhsuk-label size="l">
    What is your full name?
</nhsuk-label>
Blazor 
<NhsukLabel Size="l">
    What is your full name?
</NhsukLabel>
Nunjucks (upstream) 
{% from "nhsuk/components/label/macro.njk" import label %}

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

With id attribute

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC 
<nhsuk-label id="custom-id" heading="What is your full name?" size="l" />
Blazor 
<NhsukLabel Id="custom-id" Heading="@("What is your full name?")" Size="l" />
Nunjucks (upstream) 
{% from "nhsuk/components/label/macro.njk" import label %}

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

With id attribute on heading

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC 
<nhsuk-label
    heading-options="@(new LabelHeadingOptions
    {
        Text = "What is your full name?",
        Id = "custom-id",
    })"
    size="l"
/>
Blazor 
<NhsukLabel
    Heading="@(new LabelHeadingOptions
    {
        Text = "What is your full name?",
        Id = "custom-id",
    })"
    Size="l"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/label/macro.njk" import label %}

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

Without heading

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC 
<nhsuk-label text="What is your full name?" />
Blazor 
<NhsukLabel Text="What is your full name?" />
Nunjucks (upstream) 
{% from "nhsuk/components/label/macro.njk" import label %}

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