Skip to main content
All components

ComponentDate input

39 of 39 upstream examples match. Razor component: <NhsukDateInput>

Showing the examples from upstream's review app. Show 1 more test-only examples

Default

Matches upstream

Open on its own page (opens in new tab)

What is your date of birth?

For example, 31 3 1980
Razor Pages and MVC 
<nhsuk-date-input
    fieldset="@(new FieldsetOptions
    {
        Legend = new LegendOptions
        {
            Heading = "What is your date of birth?",
            Size = "l",
        },
    })"
    hint="For example, 31 3 1980"
    id="example"
/>
Blazor 
<NhsukDateInput
    Fieldset="@(new FieldsetOptions
    {
        Legend = new LegendOptions
        {
            Heading = "What is your date of birth?",
            Size = "l",
        },
    })"
    Hint="@(new HintOptions
    {
        Text = "For example, 31 3 1980",
    })"
    Id="example"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/date-input/macro.njk" import dateInput %}

{{ dateInput({
  "fieldset": {
    "legend": {
      "heading": "What is your date of birth?",
      "size": "l"
    }
  },
  "hint": {
    "text": "For example, 31 3 1980"
  },
  "id": "example"
}) }}

Disabled

Matches upstream

Open on its own page (opens in new tab)

What is your date of birth?

For example, 31 3 1980
Razor Pages and MVC 
<nhsuk-date-input
    fieldset="@(new FieldsetOptions
    {
        Legend = new LegendOptions
        {
            Heading = "What is your date of birth?",
            Size = "l",
        },
    })"
    hint="For example, 31 3 1980"
    id="example"
    disabled="true"
/>
Blazor 
<NhsukDateInput
    Fieldset="@(new FieldsetOptions
    {
        Legend = new LegendOptions
        {
            Heading = "What is your date of birth?",
            Size = "l",
        },
    })"
    Hint="@(new HintOptions
    {
        Text = "For example, 31 3 1980",
    })"
    Id="example"
    Disabled="true"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/date-input/macro.njk" import dateInput %}

{{ dateInput({
  "fieldset": {
    "legend": {
      "heading": "What is your date of birth?",
      "size": "l"
    }
  },
  "hint": {
    "text": "For example, 31 3 1980"
  },
  "id": "example",
  "disabled": true
}) }}

Disabled input

Matches upstream

Open on its own page (opens in new tab)

What is your date of birth?

For example, 31 3 1980
Razor Pages and MVC 
<nhsuk-date-input
    fieldset="@(new FieldsetOptions
    {
        Legend = new LegendOptions
        {
            Heading = "What is your date of birth?",
            Size = "l",
        },
    })"
    hint="For example, 31 3 1980"
    id="example"
    year="@(new DateInputItemsItem
    {
        Disabled = true,
    })"
/>
Blazor 
<NhsukDateInput
    Fieldset="@(new FieldsetOptions
    {
        Legend = new LegendOptions
        {
            Heading = "What is your date of birth?",
            Size = "l",
        },
    })"
    Hint="@(new HintOptions
    {
        Text = "For example, 31 3 1980",
    })"
    Id="example"
    Year="@(new DateInputItemsItem
    {
        Disabled = true,
    })"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/date-input/macro.njk" import dateInput %}

{{ dateInput({
  "fieldset": {
    "legend": {
      "heading": "What is your date of birth?",
      "size": "l"
    }
  },
  "hint": {
    "text": "For example, 31 3 1980"
  },
  "id": "example",
  "year": {
    "disabled": true
  }
}) }}

Disabled input (using items)

Matches upstream

Open on its own page (opens in new tab)

What is your date of birth?

For example, 31 3 1980
Razor Pages and MVC 
<nhsuk-date-input
    fieldset="@(new FieldsetOptions
    {
        Legend = new LegendOptions
        {
            Heading = "What is your date of birth?",
            Size = "l",
        },
    })"
    hint="For example, 31 3 1980"
    id="example"
    items="@([
        new DateInputItemsItem
        {
            Name = "day",
            Width = 2,
        },
        new DateInputItemsItem
        {
            Name = "month",
            Width = 2,
        },
        new DateInputItemsItem
        {
            Name = "year",
            Width = 4,
            Disabled = true,
        },
    ])"
/>
Blazor 
<NhsukDateInput
    Fieldset="@(new FieldsetOptions
    {
        Legend = new LegendOptions
        {
            Heading = "What is your date of birth?",
            Size = "l",
        },
    })"
    Hint="@(new HintOptions
    {
        Text = "For example, 31 3 1980",
    })"
    Id="example"
    Items="@([
        new DateInputItemsItem
        {
            Name = "day",
            Width = 2,
        },
        new DateInputItemsItem
        {
            Name = "month",
            Width = 2,
        },
        new DateInputItemsItem
        {
            Name = "year",
            Width = 4,
            Disabled = true,
        },
    ])"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/date-input/macro.njk" import dateInput %}

{{ dateInput({
  "fieldset": {
    "legend": {
      "heading": "What is your date of birth?",
      "size": "l"
    }
  },
  "hint": {
    "text": "For example, 31 3 1980"
  },
  "id": "example",
  "items": [
    {
      "name": "day",
      "width": 2
    },
    {
      "name": "month",
      "width": 2
    },
    {
      "name": "year",
      "width": 4,
      "disabled": true
    }
  ]
}) }}

Disabled with enabled input

Matches upstream

Open on its own page (opens in new tab)

What is your date of birth?

For example, 31 3 1980
Razor Pages and MVC 
<nhsuk-date-input
    fieldset="@(new FieldsetOptions
    {
        Legend = new LegendOptions
        {
            Heading = "What is your date of birth?",
            Size = "l",
        },
    })"
    hint="For example, 31 3 1980"
    id="example"
    disabled="true"
    year="@(new DateInputItemsItem
    {
        Disabled = false,
    })"
/>
Blazor 
<NhsukDateInput
    Fieldset="@(new FieldsetOptions
    {
        Legend = new LegendOptions
        {
            Heading = "What is your date of birth?",
            Size = "l",
        },
    })"
    Hint="@(new HintOptions
    {
        Text = "For example, 31 3 1980",
    })"
    Id="example"
    Disabled="true"
    Year="@(new DateInputItemsItem
    {
        Disabled = false,
    })"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/date-input/macro.njk" import dateInput %}

{{ dateInput({
  "fieldset": {
    "legend": {
      "heading": "What is your date of birth?",
      "size": "l"
    }
  },
  "hint": {
    "text": "For example, 31 3 1980"
  },
  "id": "example",
  "disabled": true,
  "year": {
    "disabled": false
  }
}) }}

Day and month

Matches upstream

Open on its own page (opens in new tab)

What is your birthday?

For example, 5 12
Razor Pages and MVC 
<nhsuk-date-input
    fieldset="@(new FieldsetOptions
    {
        Legend = new LegendOptions
        {
            Heading = "What is your birthday?",
            Size = "l",
        },
    })"
    hint="For example, 5 12"
    id="example"
    year="@(new DateInputItemsItem { IsFalse = true })"
/>
Blazor 
<NhsukDateInput
    Fieldset="@(new FieldsetOptions
    {
        Legend = new LegendOptions
        {
            Heading = "What is your birthday?",
            Size = "l",
        },
    })"
    Hint="@(new HintOptions
    {
        Text = "For example, 5 12",
    })"
    Id="example"
    Year="@(new DateInputItemsItem { IsFalse = true })"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/date-input/macro.njk" import dateInput %}

{{ dateInput({
  "fieldset": {
    "legend": {
      "heading": "What is your birthday?",
      "size": "l"
    }
  },
  "hint": {
    "text": "For example, 5 12"
  },
  "id": "example",
  "year": false
}) }}

Day and month (using items)

Matches upstream

Open on its own page (opens in new tab)

What is your birthday?

For example, 5 12
Razor Pages and MVC 
<nhsuk-date-input
    fieldset="@(new FieldsetOptions
    {
        Legend = new LegendOptions
        {
            Heading = "What is your birthday?",
            Size = "l",
        },
    })"
    hint="For example, 5 12"
    id="example"
    items="@([
        new DateInputItemsItem
        {
            Name = "day",
            Width = 2,
        },
        new DateInputItemsItem
        {
            Name = "month",
            Width = 2,
        },
    ])"
/>
Blazor 
<NhsukDateInput
    Fieldset="@(new FieldsetOptions
    {
        Legend = new LegendOptions
        {
            Heading = "What is your birthday?",
            Size = "l",
        },
    })"
    Hint="@(new HintOptions
    {
        Text = "For example, 5 12",
    })"
    Id="example"
    Items="@([
        new DateInputItemsItem
        {
            Name = "day",
            Width = 2,
        },
        new DateInputItemsItem
        {
            Name = "month",
            Width = 2,
        },
    ])"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/date-input/macro.njk" import dateInput %}

{{ dateInput({
  "fieldset": {
    "legend": {
      "heading": "What is your birthday?",
      "size": "l"
    }
  },
  "hint": {
    "text": "For example, 5 12"
  },
  "id": "example",
  "items": [
    {
      "name": "day",
      "width": 2
    },
    {
      "name": "month",
      "width": 2
    }
  ]
}) }}

Day and month (with empty item)

Matches upstream

Open on its own page (opens in new tab)

What is your birthday?

For example, 5 12
Razor Pages and MVC 
<nhsuk-date-input
    fieldset="@(new FieldsetOptions
    {
        Legend = new LegendOptions
        {
            Heading = "What is your birthday?",
            Size = "l",
        },
    })"
    hint="For example, 5 12"
    id="example"
    items="@([
        new DateInputItemsItem
        {
            Name = "day",
            Width = 2,
        },
        new DateInputItemsItem
        {
            Name = "month",
            Width = 2,
        },
        null,
    ])"
/>
Blazor 
<NhsukDateInput
    Fieldset="@(new FieldsetOptions
    {
        Legend = new LegendOptions
        {
            Heading = "What is your birthday?",
            Size = "l",
        },
    })"
    Hint="@(new HintOptions
    {
        Text = "For example, 5 12",
    })"
    Id="example"
    Items="@([
        new DateInputItemsItem
        {
            Name = "day",
            Width = 2,
        },
        new DateInputItemsItem
        {
            Name = "month",
            Width = 2,
        },
        null,
    ])"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/date-input/macro.njk" import dateInput %}

{{ dateInput({
  "fieldset": {
    "legend": {
      "heading": "What is your birthday?",
      "size": "l"
    }
  },
  "hint": {
    "text": "For example, 5 12"
  },
  "id": "example",
  "items": [
    {
      "name": "day",
      "width": 2
    },
    {
      "name": "month",
      "width": 2
    },
    false
  ]
}) }}

Legend

Matches upstream

with size S

Open on its own page (opens in new tab)

What is your date of birth?

For example, 31 3 1980
Razor Pages and MVC 
<nhsuk-date-input
    fieldset="@(new FieldsetOptions
    {
        Legend = new LegendOptions
        {
            Heading = "What is your date of birth?",
            Size = "s",
        },
    })"
    hint="For example, 31 3 1980"
    id="custom-size"
/>
Blazor 
<NhsukDateInput
    Fieldset="@(new FieldsetOptions
    {
        Legend = new LegendOptions
        {
            Heading = "What is your date of birth?",
            Size = "s",
        },
    })"
    Hint="@(new HintOptions
    {
        Text = "For example, 31 3 1980",
    })"
    Id="custom-size"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/date-input/macro.njk" import dateInput %}

{{ dateInput({
  "fieldset": {
    "legend": {
      "heading": "What is your date of birth?",
      "size": "s"
    }
  },
  "hint": {
    "text": "For example, 31 3 1980"
  },
  "id": "custom-size"
}) }}

Legend

Matches upstream

with size M

Open on its own page (opens in new tab)

What is your date of birth?

For example, 31 3 1980
Razor Pages and MVC 
<nhsuk-date-input
    fieldset="@(new FieldsetOptions
    {
        Legend = new LegendOptions
        {
            Heading = "What is your date of birth?",
            Size = "m",
        },
    })"
    hint="For example, 31 3 1980"
    id="custom-size"
/>
Blazor 
<NhsukDateInput
    Fieldset="@(new FieldsetOptions
    {
        Legend = new LegendOptions
        {
            Heading = "What is your date of birth?",
            Size = "m",
        },
    })"
    Hint="@(new HintOptions
    {
        Text = "For example, 31 3 1980",
    })"
    Id="custom-size"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/date-input/macro.njk" import dateInput %}

{{ dateInput({
  "fieldset": {
    "legend": {
      "heading": "What is your date of birth?",
      "size": "m"
    }
  },
  "hint": {
    "text": "For example, 31 3 1980"
  },
  "id": "custom-size"
}) }}

Legend

Matches upstream

with size L

Open on its own page (opens in new tab)

What is your date of birth?

For example, 31 3 1980
Razor Pages and MVC 
<nhsuk-date-input
    fieldset="@(new FieldsetOptions
    {
        Legend = new LegendOptions
        {
            Heading = "What is your date of birth?",
            Size = "l",
        },
    })"
    hint="For example, 31 3 1980"
    id="custom-size"
/>
Blazor 
<NhsukDateInput
    Fieldset="@(new FieldsetOptions
    {
        Legend = new LegendOptions
        {
            Heading = "What is your date of birth?",
            Size = "l",
        },
    })"
    Hint="@(new HintOptions
    {
        Text = "For example, 31 3 1980",
    })"
    Id="custom-size"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/date-input/macro.njk" import dateInput %}

{{ dateInput({
  "fieldset": {
    "legend": {
      "heading": "What is your date of birth?",
      "size": "l"
    }
  },
  "hint": {
    "text": "For example, 31 3 1980"
  },
  "id": "custom-size"
}) }}

Legend

Matches upstream

with size XL

Open on its own page (opens in new tab)

What is your date of birth?

For example, 31 3 1980
Razor Pages and MVC 
<nhsuk-date-input
    fieldset="@(new FieldsetOptions
    {
        Legend = new LegendOptions
        {
            Heading = "What is your date of birth?",
            Size = "xl",
        },
    })"
    hint="For example, 31 3 1980"
    id="custom-size"
/>
Blazor 
<NhsukDateInput
    Fieldset="@(new FieldsetOptions
    {
        Legend = new LegendOptions
        {
            Heading = "What is your date of birth?",
            Size = "xl",
        },
    })"
    Hint="@(new HintOptions
    {
        Text = "For example, 31 3 1980",
    })"
    Id="custom-size"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/date-input/macro.njk" import dateInput %}

{{ dateInput({
  "fieldset": {
    "legend": {
      "heading": "What is your date of birth?",
      "size": "xl"
    }
  },
  "hint": {
    "text": "For example, 31 3 1980"
  },
  "id": "custom-size"
}) }}

Month and year

Matches upstream

Open on its own page (opens in new tab)

When did you start your job?

For example, 11 2023
Razor Pages and MVC 
<nhsuk-date-input
    fieldset="@(new FieldsetOptions
    {
        Legend = new LegendOptions
        {
            Heading = "When did you start your job?",
            Size = "l",
        },
    })"
    hint="For example, 11 2023"
    id="example"
    day="@(new DateInputItemsItem { IsFalse = true })"
/>
Blazor 
<NhsukDateInput
    Fieldset="@(new FieldsetOptions
    {
        Legend = new LegendOptions
        {
            Heading = "When did you start your job?",
            Size = "l",
        },
    })"
    Hint="@(new HintOptions
    {
        Text = "For example, 11 2023",
    })"
    Id="example"
    Day="@(new DateInputItemsItem { IsFalse = true })"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/date-input/macro.njk" import dateInput %}

{{ dateInput({
  "fieldset": {
    "legend": {
      "heading": "When did you start your job?",
      "size": "l"
    }
  },
  "hint": {
    "text": "For example, 11 2023"
  },
  "id": "example",
  "day": false
}) }}

Month and year (using items)

Matches upstream

Open on its own page (opens in new tab)

When did you start your job?

For example, 11 2023
Razor Pages and MVC 
<nhsuk-date-input
    fieldset="@(new FieldsetOptions
    {
        Legend = new LegendOptions
        {
            Heading = "When did you start your job?",
            Size = "l",
        },
    })"
    hint="For example, 11 2023"
    id="example"
    items="@([
        new DateInputItemsItem
        {
            Name = "month",
            Width = 2,
        },
        new DateInputItemsItem
        {
            Name = "year",
            Width = 4,
        },
    ])"
/>
Blazor 
<NhsukDateInput
    Fieldset="@(new FieldsetOptions
    {
        Legend = new LegendOptions
        {
            Heading = "When did you start your job?",
            Size = "l",
        },
    })"
    Hint="@(new HintOptions
    {
        Text = "For example, 11 2023",
    })"
    Id="example"
    Items="@([
        new DateInputItemsItem
        {
            Name = "month",
            Width = 2,
        },
        new DateInputItemsItem
        {
            Name = "year",
            Width = 4,
        },
    ])"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/date-input/macro.njk" import dateInput %}

{{ dateInput({
  "fieldset": {
    "legend": {
      "heading": "When did you start your job?",
      "size": "l"
    }
  },
  "hint": {
    "text": "For example, 11 2023"
  },
  "id": "example",
  "items": [
    {
      "name": "month",
      "width": 2
    },
    {
      "name": "year",
      "width": 4
    }
  ]
}) }}

Month and year (with empty item)

Matches upstream

Open on its own page (opens in new tab)

When did you start your job?

For example, 11 2023
Razor Pages and MVC 
<nhsuk-date-input
    fieldset="@(new FieldsetOptions
    {
        Legend = new LegendOptions
        {
            Heading = "When did you start your job?",
            Size = "l",
        },
    })"
    hint="For example, 11 2023"
    id="example"
    items="@([
        null,
        new DateInputItemsItem
        {
            Name = "month",
            Width = 2,
        },
        new DateInputItemsItem
        {
            Name = "year",
            Width = 4,
        },
    ])"
/>
Blazor 
<NhsukDateInput
    Fieldset="@(new FieldsetOptions
    {
        Legend = new LegendOptions
        {
            Heading = "When did you start your job?",
            Size = "l",
        },
    })"
    Hint="@(new HintOptions
    {
        Text = "For example, 11 2023",
    })"
    Id="example"
    Items="@([
        null,
        new DateInputItemsItem
        {
            Name = "month",
            Width = 2,
        },
        new DateInputItemsItem
        {
            Name = "year",
            Width = 4,
        },
    ])"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/date-input/macro.njk" import dateInput %}

{{ dateInput({
  "fieldset": {
    "legend": {
      "heading": "When did you start your job?",
      "size": "l"
    }
  },
  "hint": {
    "text": "For example, 11 2023"
  },
  "id": "example",
  "items": [
    false,
    {
      "name": "month",
      "width": 2
    },
    {
      "name": "year",
      "width": 4
    }
  ]
}) }}

Month and year with fields

Matches upstream

Open on its own page (opens in new tab)

When did you start your job?

For example, 11 2023
Razor Pages and MVC 
<nhsuk-date-input
    fieldset="@(new FieldsetOptions
    {
        Legend = new LegendOptions
        {
            Heading = "When did you start your job?",
            Size = "l",
        },
    })"
    hint="For example, 11 2023"
    id="example"
    day="@(new DateInputItemsItem { IsFalse = true })"
    month="@(new DateInputItemsItem
    {
        Value = "11",
    })"
    year="@(new DateInputItemsItem
    {
        Value = "2023",
    })"
/>
Blazor 
<NhsukDateInput
    Fieldset="@(new FieldsetOptions
    {
        Legend = new LegendOptions
        {
            Heading = "When did you start your job?",
            Size = "l",
        },
    })"
    Hint="@(new HintOptions
    {
        Text = "For example, 11 2023",
    })"
    Id="example"
    Day="@(new DateInputItemsItem { IsFalse = true })"
    Month="@(new DateInputItemsItem
    {
        Value = "11",
    })"
    Year="@(new DateInputItemsItem
    {
        Value = "2023",
    })"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/date-input/macro.njk" import dateInput %}

{{ dateInput({
  "fieldset": {
    "legend": {
      "heading": "When did you start your job?",
      "size": "l"
    }
  },
  "hint": {
    "text": "For example, 11 2023"
  },
  "id": "example",
  "day": false,
  "month": {
    "value": "11"
  },
  "year": {
    "value": "2023"
  }
}) }}

Month and year with fields overriding values

Matches upstream

Open on its own page (opens in new tab)

When did you start your job?

For example, 11 2023
Razor Pages and MVC 
<nhsuk-date-input
    fieldset="@(new FieldsetOptions
    {
        Legend = new LegendOptions
        {
            Heading = "When did you start your job?",
            Size = "l",
        },
    })"
    hint="For example, 11 2023"
    id="example"
    day="@(new DateInputItemsItem { IsFalse = true })"
    month="@(new DateInputItemsItem
    {
        Value = "11",
    })"
    year="@(new DateInputItemsItem
    {
        Value = "2023",
    })"
    values="@(new DateInputValuesOptions
    {
        Month = "8",
        Year = "2024",
    })"
/>
Blazor 
<NhsukDateInput
    Fieldset="@(new FieldsetOptions
    {
        Legend = new LegendOptions
        {
            Heading = "When did you start your job?",
            Size = "l",
        },
    })"
    Hint="@(new HintOptions
    {
        Text = "For example, 11 2023",
    })"
    Id="example"
    Day="@(new DateInputItemsItem { IsFalse = true })"
    Month="@(new DateInputItemsItem
    {
        Value = "11",
    })"
    Year="@(new DateInputItemsItem
    {
        Value = "2023",
    })"
    Values="@(new DateInputValuesOptions
    {
        Month = "8",
        Year = "2024",
    })"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/date-input/macro.njk" import dateInput %}

{{ dateInput({
  "fieldset": {
    "legend": {
      "heading": "When did you start your job?",
      "size": "l"
    }
  },
  "hint": {
    "text": "For example, 11 2023"
  },
  "id": "example",
  "day": false,
  "month": {
    "value": "11"
  },
  "year": {
    "value": "2023"
  },
  "values": {
    "month": "8",
    "year": "2024"
  }
}) }}

Month and year with values

Matches upstream

Open on its own page (opens in new tab)

When did you start your job?

For example, 11 2023
Razor Pages and MVC 
<nhsuk-date-input
    fieldset="@(new FieldsetOptions
    {
        Legend = new LegendOptions
        {
            Heading = "When did you start your job?",
            Size = "l",
        },
    })"
    hint="For example, 11 2023"
    id="example"
    day="@(new DateInputItemsItem { IsFalse = true })"
    values="@(new DateInputValuesOptions
    {
        Month = "8",
        Year = "2024",
    })"
/>
Blazor 
<NhsukDateInput
    Fieldset="@(new FieldsetOptions
    {
        Legend = new LegendOptions
        {
            Heading = "When did you start your job?",
            Size = "l",
        },
    })"
    Hint="@(new HintOptions
    {
        Text = "For example, 11 2023",
    })"
    Id="example"
    Day="@(new DateInputItemsItem { IsFalse = true })"
    Values="@(new DateInputValuesOptions
    {
        Month = "8",
        Year = "2024",
    })"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/date-input/macro.njk" import dateInput %}

{{ dateInput({
  "fieldset": {
    "legend": {
      "heading": "When did you start your job?",
      "size": "l"
    }
  },
  "hint": {
    "text": "For example, 11 2023"
  },
  "id": "example",
  "day": false,
  "values": {
    "month": "8",
    "year": "2024"
  }
}) }}

With autocomplete values

Matches upstream

Open on its own page (opens in new tab)

What is your date of birth?

For example, 31 3 1980
Razor Pages and MVC 
<nhsuk-date-input
    fieldset="@(new FieldsetOptions
    {
        Legend = new LegendOptions
        {
            Heading = "What is your date of birth?",
            Size = "l",
        },
    })"
    hint="For example, 31 3 1980"
    id="example"
    day="@(new DateInputItemsItem
    {
        Autocomplete = "bday-day",
    })"
    month="@(new DateInputItemsItem
    {
        Autocomplete = "bday-month",
    })"
    year="@(new DateInputItemsItem
    {
        Autocomplete = "bday-year",
    })"
/>
Blazor 
<NhsukDateInput
    Fieldset="@(new FieldsetOptions
    {
        Legend = new LegendOptions
        {
            Heading = "What is your date of birth?",
            Size = "l",
        },
    })"
    Hint="@(new HintOptions
    {
        Text = "For example, 31 3 1980",
    })"
    Id="example"
    Day="@(new DateInputItemsItem
    {
        Autocomplete = "bday-day",
    })"
    Month="@(new DateInputItemsItem
    {
        Autocomplete = "bday-month",
    })"
    Year="@(new DateInputItemsItem
    {
        Autocomplete = "bday-year",
    })"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/date-input/macro.njk" import dateInput %}

{{ dateInput({
  "fieldset": {
    "legend": {
      "heading": "What is your date of birth?",
      "size": "l"
    }
  },
  "hint": {
    "text": "For example, 31 3 1980"
  },
  "id": "example",
  "day": {
    "autocomplete": "bday-day"
  },
  "month": {
    "autocomplete": "bday-month"
  },
  "year": {
    "autocomplete": "bday-year"
  }
}) }}

With autocomplete values (using items)

Matches upstream

Open on its own page (opens in new tab)

What is your date of birth?

For example, 31 3 1980
Razor Pages and MVC 
<nhsuk-date-input
    fieldset="@(new FieldsetOptions
    {
        Legend = new LegendOptions
        {
            Heading = "What is your date of birth?",
            Size = "l",
        },
    })"
    hint="For example, 31 3 1980"
    id="example"
    items="@([
        new DateInputItemsItem
        {
            Name = "day",
            Width = 2,
            Autocomplete = "bday-day",
        },
        new DateInputItemsItem
        {
            Name = "month",
            Width = 2,
            Autocomplete = "bday-month",
        },
        new DateInputItemsItem
        {
            Name = "year",
            Width = 4,
            Autocomplete = "bday-year",
        },
    ])"
/>
Blazor 
<NhsukDateInput
    Fieldset="@(new FieldsetOptions
    {
        Legend = new LegendOptions
        {
            Heading = "What is your date of birth?",
            Size = "l",
        },
    })"
    Hint="@(new HintOptions
    {
        Text = "For example, 31 3 1980",
    })"
    Id="example"
    Items="@([
        new DateInputItemsItem
        {
            Name = "day",
            Width = 2,
            Autocomplete = "bday-day",
        },
        new DateInputItemsItem
        {
            Name = "month",
            Width = 2,
            Autocomplete = "bday-month",
        },
        new DateInputItemsItem
        {
            Name = "year",
            Width = 4,
            Autocomplete = "bday-year",
        },
    ])"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/date-input/macro.njk" import dateInput %}

{{ dateInput({
  "fieldset": {
    "legend": {
      "heading": "What is your date of birth?",
      "size": "l"
    }
  },
  "hint": {
    "text": "For example, 31 3 1980"
  },
  "id": "example",
  "items": [
    {
      "name": "day",
      "width": 2,
      "autocomplete": "bday-day"
    },
    {
      "name": "month",
      "width": 2,
      "autocomplete": "bday-month"
    },
    {
      "name": "year",
      "width": 4,
      "autocomplete": "bday-year"
    }
  ]
}) }}

With custom name prefix

Matches upstream

Open on its own page (opens in new tab)

What is your date of birth?

For example, 31 3 1980
Razor Pages and MVC 
<nhsuk-date-input
    fieldset="@(new FieldsetOptions
    {
        Legend = new LegendOptions
        {
            Heading = "What is your date of birth?",
            Size = "l",
        },
    })"
    hint="For example, 31 3 1980"
    id="example"
    name-prefix="example"
/>
Blazor 
<NhsukDateInput
    Fieldset="@(new FieldsetOptions
    {
        Legend = new LegendOptions
        {
            Heading = "What is your date of birth?",
            Size = "l",
        },
    })"
    Hint="@(new HintOptions
    {
        Text = "For example, 31 3 1980",
    })"
    Id="example"
    NamePrefix="example"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/date-input/macro.njk" import dateInput %}

{{ dateInput({
  "fieldset": {
    "legend": {
      "heading": "What is your date of birth?",
      "size": "l"
    }
  },
  "hint": {
    "text": "For example, 31 3 1980"
  },
  "id": "example",
  "namePrefix": "example"
}) }}

With error message

Matches upstream

Open on its own page (opens in new tab)

What is your date of birth?

Error: Enter your date of birth
Razor Pages and MVC 
<nhsuk-date-input
    fieldset="@(new FieldsetOptions
    {
        Legend = new LegendOptions
        {
            Heading = "What is your date of birth?",
            Size = "l",
        },
    })"
    error-message="Enter your date of birth"
    id="example"
/>
Blazor 
<NhsukDateInput
    Fieldset="@(new FieldsetOptions
    {
        Legend = new LegendOptions
        {
            Heading = "What is your date of birth?",
            Size = "l",
        },
    })"
    ErrorMessage="@(new ErrorMessageOptions
    {
        Text = "Enter your date of birth",
    })"
    Id="example"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/date-input/macro.njk" import dateInput %}

{{ dateInput({
  "fieldset": {
    "legend": {
      "heading": "What is your date of birth?",
      "size": "l"
    }
  },
  "errorMessage": {
    "text": "Enter your date of birth"
  },
  "id": "example"
}) }}

With error message and hint

Matches upstream

Open on its own page (opens in new tab)

What is your date of birth?

For example, 31 3 1980
Error: Enter your date of birth
Razor Pages and MVC 
<nhsuk-date-input
    fieldset="@(new FieldsetOptions
    {
        Legend = new LegendOptions
        {
            Heading = "What is your date of birth?",
            Size = "l",
        },
    })"
    hint="For example, 31 3 1980"
    error-message="Enter your date of birth"
    id="example"
/>
Blazor 
<NhsukDateInput
    Fieldset="@(new FieldsetOptions
    {
        Legend = new LegendOptions
        {
            Heading = "What is your date of birth?",
            Size = "l",
        },
    })"
    Hint="@(new HintOptions
    {
        Text = "For example, 31 3 1980",
    })"
    ErrorMessage="@(new ErrorMessageOptions
    {
        Text = "Enter your date of birth",
    })"
    Id="example"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/date-input/macro.njk" import dateInput %}

{{ dateInput({
  "fieldset": {
    "legend": {
      "heading": "What is your date of birth?",
      "size": "l"
    }
  },
  "hint": {
    "text": "For example, 31 3 1980"
  },
  "errorMessage": {
    "text": "Enter your date of birth"
  },
  "id": "example"
}) }}

With error message and hint as strings

Matches upstream

Open on its own page (opens in new tab)

What is your date of birth?

For example, 31 3 1980
Error: Enter your date of birth
Razor Pages and MVC 
<nhsuk-date-input
    fieldset="@(new FieldsetOptions
    {
        Legend = new LegendOptions
        {
            Heading = "What is your date of birth?",
            Size = "l",
        },
    })"
    hint="For example, 31 3 1980"
    error-message="Enter your date of birth"
    id="example"
/>
Blazor 
<NhsukDateInput
    Fieldset="@(new FieldsetOptions
    {
        Legend = new LegendOptions
        {
            Heading = "What is your date of birth?",
            Size = "l",
        },
    })"
    Hint="@("For example, 31 3 1980")"
    ErrorMessage="@("Enter your date of birth")"
    Id="example"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/date-input/macro.njk" import dateInput %}

{{ dateInput({
  "fieldset": {
    "legend": {
      "heading": "What is your date of birth?",
      "size": "l"
    }
  },
  "hint": "For example, 31 3 1980",
  "errorMessage": "Enter your date of birth",
  "id": "example"
}) }}

With error message and hint, without heading

Matches upstream

Open on its own page (opens in new tab)

What is your date of birth?
For example, 31 3 1980
Error: Enter your date of birth
Razor Pages and MVC 
<nhsuk-date-input
    fieldset="@(new FieldsetOptions
    {
        Legend = "What is your date of birth?",
    })"
    hint="For example, 31 3 1980"
    error-message="Enter your date of birth"
    id="example"
/>
Blazor 
<NhsukDateInput
    Fieldset="@(new FieldsetOptions
    {
        Legend = "What is your date of birth?",
    })"
    Hint="@(new HintOptions
    {
        Text = "For example, 31 3 1980",
    })"
    ErrorMessage="@(new ErrorMessageOptions
    {
        Text = "Enter your date of birth",
    })"
    Id="example"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/date-input/macro.njk" import dateInput %}

{{ dateInput({
  "fieldset": {
    "legend": "What is your date of birth?"
  },
  "hint": {
    "text": "For example, 31 3 1980"
  },
  "errorMessage": {
    "text": "Enter your date of birth"
  },
  "id": "example"
}) }}

With error message, without heading

Matches upstream

Open on its own page (opens in new tab)

What is your date of birth?Error: Enter your date of birth
Razor Pages and MVC 
<nhsuk-date-input
    fieldset="@(new FieldsetOptions
    {
        Legend = "What is your date of birth?",
    })"
    error-message="Enter your date of birth"
    id="example"
/>
Blazor 
<NhsukDateInput
    Fieldset="@(new FieldsetOptions
    {
        Legend = "What is your date of birth?",
    })"
    ErrorMessage="@(new ErrorMessageOptions
    {
        Text = "Enter your date of birth",
    })"
    Id="example"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/date-input/macro.njk" import dateInput %}

{{ dateInput({
  "fieldset": {
    "legend": "What is your date of birth?"
  },
  "errorMessage": {
    "text": "Enter your date of birth"
  },
  "id": "example"
}) }}

With error on day input

Matches upstream

Open on its own page (opens in new tab)

What is your date of birth?

For example, 31 3 1980
Error: Date of birth must include a day
Razor Pages and MVC 
<nhsuk-date-input
    fieldset="@(new FieldsetOptions
    {
        Legend = new LegendOptions
        {
            Heading = "What is your date of birth?",
            Size = "l",
        },
    })"
    hint="For example, 31 3 1980"
    error-message="Date of birth must include a day"
    id="example"
    day="@(new DateInputItemsItem
    {
        Error = true,
    })"
    month="@(new DateInputItemsItem
    {
        Value = "3",
    })"
    year="@(new DateInputItemsItem
    {
        Value = "1980",
    })"
/>
Blazor 
<NhsukDateInput
    Fieldset="@(new FieldsetOptions
    {
        Legend = new LegendOptions
        {
            Heading = "What is your date of birth?",
            Size = "l",
        },
    })"
    Hint="@(new HintOptions
    {
        Text = "For example, 31 3 1980",
    })"
    ErrorMessage="@(new ErrorMessageOptions
    {
        Text = "Date of birth must include a day",
    })"
    Id="example"
    Day="@(new DateInputItemsItem
    {
        Error = true,
    })"
    Month="@(new DateInputItemsItem
    {
        Value = "3",
    })"
    Year="@(new DateInputItemsItem
    {
        Value = "1980",
    })"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/date-input/macro.njk" import dateInput %}

{{ dateInput({
  "fieldset": {
    "legend": {
      "heading": "What is your date of birth?",
      "size": "l"
    }
  },
  "hint": {
    "text": "For example, 31 3 1980"
  },
  "errorMessage": {
    "text": "Date of birth must include a day"
  },
  "id": "example",
  "day": {
    "error": true
  },
  "month": {
    "value": "3"
  },
  "year": {
    "value": "1980"
  }
}) }}

With error on day input (using items)

Matches upstream

Open on its own page (opens in new tab)

What is your date of birth?

For example, 31 3 1980
Error: Date of birth must include a day
Razor Pages and MVC 
<nhsuk-date-input
    fieldset="@(new FieldsetOptions
    {
        Legend = new LegendOptions
        {
            Heading = "What is your date of birth?",
            Size = "l",
        },
    })"
    hint="For example, 31 3 1980"
    error-message="Date of birth must include a day"
    id="example"
    items="@([
        new DateInputItemsItem
        {
            Name = "day",
            Width = 2,
            Error = true,
        },
        new DateInputItemsItem
        {
            Name = "month",
            Value = "3",
            Width = 2,
        },
        new DateInputItemsItem
        {
            Name = "year",
            Value = "1980",
            Width = 4,
        },
    ])"
/>
Blazor 
<NhsukDateInput
    Fieldset="@(new FieldsetOptions
    {
        Legend = new LegendOptions
        {
            Heading = "What is your date of birth?",
            Size = "l",
        },
    })"
    Hint="@(new HintOptions
    {
        Text = "For example, 31 3 1980",
    })"
    ErrorMessage="@(new ErrorMessageOptions
    {
        Text = "Date of birth must include a day",
    })"
    Id="example"
    Items="@([
        new DateInputItemsItem
        {
            Name = "day",
            Width = 2,
            Error = true,
        },
        new DateInputItemsItem
        {
            Name = "month",
            Value = "3",
            Width = 2,
        },
        new DateInputItemsItem
        {
            Name = "year",
            Value = "1980",
            Width = 4,
        },
    ])"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/date-input/macro.njk" import dateInput %}

{{ dateInput({
  "fieldset": {
    "legend": {
      "heading": "What is your date of birth?",
      "size": "l"
    }
  },
  "hint": {
    "text": "For example, 31 3 1980"
  },
  "errorMessage": {
    "text": "Date of birth must include a day"
  },
  "id": "example",
  "items": [
    {
      "name": "day",
      "width": 2,
      "error": true
    },
    {
      "name": "month",
      "value": "3",
      "width": 2
    },
    {
      "name": "year",
      "value": "1980",
      "width": 4
    }
  ]
}) }}

With error only

Matches upstream

Open on its own page (opens in new tab)

What is your date of birth?

Razor Pages and MVC 
<nhsuk-date-input
    fieldset="@(new FieldsetOptions
    {
        Legend = new LegendOptions
        {
            Heading = "What is your date of birth?",
            Size = "l",
        },
    })"
    error-message-options="@(true)"
    id="example"
/>
Blazor 
<NhsukDateInput
    Fieldset="@(new FieldsetOptions
    {
        Legend = new LegendOptions
        {
            Heading = "What is your date of birth?",
            Size = "l",
        },
    })"
    ErrorMessage="@(true)"
    Id="example"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/date-input/macro.njk" import dateInput %}

{{ dateInput({
  "fieldset": {
    "legend": {
      "heading": "What is your date of birth?",
      "size": "l"
    }
  },
  "errorMessage": true,
  "id": "example"
}) }}

With error on month input

Matches upstream

Open on its own page (opens in new tab)

What is your date of birth?

For example, 31 3 1980
Error: Date of birth must include a month
Razor Pages and MVC 
<nhsuk-date-input
    fieldset="@(new FieldsetOptions
    {
        Legend = new LegendOptions
        {
            Heading = "What is your date of birth?",
            Size = "l",
        },
    })"
    hint="For example, 31 3 1980"
    error-message="Date of birth must include a month"
    id="example"
    items="@([
        new DateInputItemsItem
        {
            Name = "day",
            Width = 2,
            Value = "31",
        },
        new DateInputItemsItem
        {
            Name = "month",
            Width = 2,
            Error = true,
        },
        new DateInputItemsItem
        {
            Name = "year",
            Width = 4,
            Value = "1980",
        },
    ])"
/>
Blazor 
<NhsukDateInput
    Fieldset="@(new FieldsetOptions
    {
        Legend = new LegendOptions
        {
            Heading = "What is your date of birth?",
            Size = "l",
        },
    })"
    Hint="@(new HintOptions
    {
        Text = "For example, 31 3 1980",
    })"
    ErrorMessage="@(new ErrorMessageOptions
    {
        Text = "Date of birth must include a month",
    })"
    Id="example"
    Items="@([
        new DateInputItemsItem
        {
            Name = "day",
            Width = 2,
            Value = "31",
        },
        new DateInputItemsItem
        {
            Name = "month",
            Width = 2,
            Error = true,
        },
        new DateInputItemsItem
        {
            Name = "year",
            Width = 4,
            Value = "1980",
        },
    ])"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/date-input/macro.njk" import dateInput %}

{{ dateInput({
  "fieldset": {
    "legend": {
      "heading": "What is your date of birth?",
      "size": "l"
    }
  },
  "hint": {
    "text": "For example, 31 3 1980"
  },
  "errorMessage": {
    "text": "Date of birth must include a month"
  },
  "id": "example",
  "items": [
    {
      "name": "day",
      "width": 2,
      "value": "31"
    },
    {
      "name": "month",
      "width": 2,
      "error": true
    },
    {
      "name": "year",
      "width": 4,
      "value": "1980"
    }
  ]
}) }}

With error on month input (using items)

Matches upstream

Open on its own page (opens in new tab)

What is your date of birth?

For example, 31 3 1980
Error: Date of birth must include a month
Razor Pages and MVC 
<nhsuk-date-input
    fieldset="@(new FieldsetOptions
    {
        Legend = new LegendOptions
        {
            Heading = "What is your date of birth?",
            Size = "l",
        },
    })"
    hint="For example, 31 3 1980"
    error-message="Date of birth must include a month"
    id="example"
    day="@(new DateInputItemsItem
    {
        Value = "31",
    })"
    month="@(new DateInputItemsItem
    {
        Error = true,
    })"
    year="@(new DateInputItemsItem
    {
        Value = "1980",
    })"
/>
Blazor 
<NhsukDateInput
    Fieldset="@(new FieldsetOptions
    {
        Legend = new LegendOptions
        {
            Heading = "What is your date of birth?",
            Size = "l",
        },
    })"
    Hint="@(new HintOptions
    {
        Text = "For example, 31 3 1980",
    })"
    ErrorMessage="@(new ErrorMessageOptions
    {
        Text = "Date of birth must include a month",
    })"
    Id="example"
    Day="@(new DateInputItemsItem
    {
        Value = "31",
    })"
    Month="@(new DateInputItemsItem
    {
        Error = true,
    })"
    Year="@(new DateInputItemsItem
    {
        Value = "1980",
    })"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/date-input/macro.njk" import dateInput %}

{{ dateInput({
  "fieldset": {
    "legend": {
      "heading": "What is your date of birth?",
      "size": "l"
    }
  },
  "hint": {
    "text": "For example, 31 3 1980"
  },
  "errorMessage": {
    "text": "Date of birth must include a month"
  },
  "id": "example",
  "day": {
    "value": "31"
  },
  "month": {
    "error": true
  },
  "year": {
    "value": "1980"
  }
}) }}

With error on year input

Matches upstream

Open on its own page (opens in new tab)

What is your date of birth?

For example, 31 3 1980
Error: Date of birth must include a year
Razor Pages and MVC 
<nhsuk-date-input
    fieldset="@(new FieldsetOptions
    {
        Legend = new LegendOptions
        {
            Heading = "What is your date of birth?",
            Size = "l",
        },
    })"
    hint="For example, 31 3 1980"
    error-message="Date of birth must include a year"
    id="example"
    day="@(new DateInputItemsItem
    {
        Value = "31",
    })"
    month="@(new DateInputItemsItem
    {
        Value = "3",
    })"
    year="@(new DateInputItemsItem
    {
        Error = true,
    })"
/>
Blazor 
<NhsukDateInput
    Fieldset="@(new FieldsetOptions
    {
        Legend = new LegendOptions
        {
            Heading = "What is your date of birth?",
            Size = "l",
        },
    })"
    Hint="@(new HintOptions
    {
        Text = "For example, 31 3 1980",
    })"
    ErrorMessage="@(new ErrorMessageOptions
    {
        Text = "Date of birth must include a year",
    })"
    Id="example"
    Day="@(new DateInputItemsItem
    {
        Value = "31",
    })"
    Month="@(new DateInputItemsItem
    {
        Value = "3",
    })"
    Year="@(new DateInputItemsItem
    {
        Error = true,
    })"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/date-input/macro.njk" import dateInput %}

{{ dateInput({
  "fieldset": {
    "legend": {
      "heading": "What is your date of birth?",
      "size": "l"
    }
  },
  "hint": {
    "text": "For example, 31 3 1980"
  },
  "errorMessage": {
    "text": "Date of birth must include a year"
  },
  "id": "example",
  "day": {
    "value": "31"
  },
  "month": {
    "value": "3"
  },
  "year": {
    "error": true
  }
}) }}

With error on year input (using items)

Matches upstream

Open on its own page (opens in new tab)

What is your date of birth?

For example, 31 3 1980
Error: Date of birth must include a year
Razor Pages and MVC 
<nhsuk-date-input
    fieldset="@(new FieldsetOptions
    {
        Legend = new LegendOptions
        {
            Heading = "What is your date of birth?",
            Size = "l",
        },
    })"
    hint="For example, 31 3 1980"
    error-message="Date of birth must include a year"
    id="example"
    items="@([
        new DateInputItemsItem
        {
            Name = "day",
            Width = 2,
            Value = "31",
        },
        new DateInputItemsItem
        {
            Name = "month",
            Width = 2,
            Value = "3",
        },
        new DateInputItemsItem
        {
            Name = "year",
            Width = 4,
            Error = true,
        },
    ])"
/>
Blazor 
<NhsukDateInput
    Fieldset="@(new FieldsetOptions
    {
        Legend = new LegendOptions
        {
            Heading = "What is your date of birth?",
            Size = "l",
        },
    })"
    Hint="@(new HintOptions
    {
        Text = "For example, 31 3 1980",
    })"
    ErrorMessage="@(new ErrorMessageOptions
    {
        Text = "Date of birth must include a year",
    })"
    Id="example"
    Items="@([
        new DateInputItemsItem
        {
            Name = "day",
            Width = 2,
            Value = "31",
        },
        new DateInputItemsItem
        {
            Name = "month",
            Width = 2,
            Value = "3",
        },
        new DateInputItemsItem
        {
            Name = "year",
            Width = 4,
            Error = true,
        },
    ])"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/date-input/macro.njk" import dateInput %}

{{ dateInput({
  "fieldset": {
    "legend": {
      "heading": "What is your date of birth?",
      "size": "l"
    }
  },
  "hint": {
    "text": "For example, 31 3 1980"
  },
  "errorMessage": {
    "text": "Date of birth must include a year"
  },
  "id": "example",
  "items": [
    {
      "name": "day",
      "width": 2,
      "value": "31"
    },
    {
      "name": "month",
      "width": 2,
      "value": "3"
    },
    {
      "name": "year",
      "width": 4,
      "error": true
    }
  ]
}) }}

With errors only

Matches upstream

Open on its own page (opens in new tab)

What is your date of birth?

Razor Pages and MVC 
<nhsuk-date-input
    fieldset="@(new FieldsetOptions
    {
        Legend = new LegendOptions
        {
            Heading = "What is your date of birth?",
            Size = "l",
        },
    })"
    id="example"
    day="@(new DateInputItemsItem
    {
        Error = true,
    })"
    month="@(new DateInputItemsItem
    {
        Error = true,
    })"
    year="@(new DateInputItemsItem
    {
        Error = true,
    })"
/>
Blazor 
<NhsukDateInput
    Fieldset="@(new FieldsetOptions
    {
        Legend = new LegendOptions
        {
            Heading = "What is your date of birth?",
            Size = "l",
        },
    })"
    Id="example"
    Day="@(new DateInputItemsItem
    {
        Error = true,
    })"
    Month="@(new DateInputItemsItem
    {
        Error = true,
    })"
    Year="@(new DateInputItemsItem
    {
        Error = true,
    })"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/date-input/macro.njk" import dateInput %}

{{ dateInput({
  "fieldset": {
    "legend": {
      "heading": "What is your date of birth?",
      "size": "l"
    }
  },
  "id": "example",
  "day": {
    "error": true
  },
  "month": {
    "error": true
  },
  "year": {
    "error": true
  }
}) }}

With errors only (using items)

Matches upstream

Open on its own page (opens in new tab)

What is your date of birth?

Razor Pages and MVC 
<nhsuk-date-input
    fieldset="@(new FieldsetOptions
    {
        Legend = new LegendOptions
        {
            Heading = "What is your date of birth?",
            Size = "l",
        },
    })"
    id="example"
    items="@([
        new DateInputItemsItem
        {
            Name = "day",
            Width = 2,
            Error = true,
        },
        new DateInputItemsItem
        {
            Name = "month",
            Width = 2,
            Error = true,
        },
        new DateInputItemsItem
        {
            Name = "year",
            Width = 4,
            Error = true,
        },
    ])"
/>
Blazor 
<NhsukDateInput
    Fieldset="@(new FieldsetOptions
    {
        Legend = new LegendOptions
        {
            Heading = "What is your date of birth?",
            Size = "l",
        },
    })"
    Id="example"
    Items="@([
        new DateInputItemsItem
        {
            Name = "day",
            Width = 2,
            Error = true,
        },
        new DateInputItemsItem
        {
            Name = "month",
            Width = 2,
            Error = true,
        },
        new DateInputItemsItem
        {
            Name = "year",
            Width = 4,
            Error = true,
        },
    ])"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/date-input/macro.njk" import dateInput %}

{{ dateInput({
  "fieldset": {
    "legend": {
      "heading": "What is your date of birth?",
      "size": "l"
    }
  },
  "id": "example",
  "items": [
    {
      "name": "day",
      "width": 2,
      "error": true
    },
    {
      "name": "month",
      "width": 2,
      "error": true
    },
    {
      "name": "year",
      "width": 4,
      "error": true
    }
  ]
}) }}

Without heading

Matches upstream

Open on its own page (opens in new tab)

What is your date of birth?
Razor Pages and MVC 
<nhsuk-date-input
    fieldset="@(new FieldsetOptions
    {
        Legend = "What is your date of birth?",
    })"
    id="example"
/>
Blazor 
<NhsukDateInput
    Fieldset="@(new FieldsetOptions
    {
        Legend = "What is your date of birth?",
    })"
    Id="example"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/date-input/macro.njk" import dateInput %}

{{ dateInput({
  "fieldset": {
    "legend": "What is your date of birth?"
  },
  "id": "example"
}) }}

With translations

Matches upstream

Open on its own page (opens in new tab)

Beth yw eich dyddiad geni?

Er enghraifft, 31 3 1980
Razor Pages and MVC 
<nhsuk-date-input
    fieldset="@(new FieldsetOptions
    {
        Legend = new LegendOptions
        {
            Heading = "Beth yw eich dyddiad geni?",
            Size = "l",
        },
    })"
    hint="Er enghraifft, 31 3 1980"
    id="example"
    day="@(new DateInputItemsItem
    {
        Label = "Dydd",
    })"
    month="@(new DateInputItemsItem
    {
        Label = "Mis",
    })"
    year="@(new DateInputItemsItem
    {
        Label = "Blwyddyn",
    })"
/>
Blazor 
<NhsukDateInput
    Fieldset="@(new FieldsetOptions
    {
        Legend = new LegendOptions
        {
            Heading = "Beth yw eich dyddiad geni?",
            Size = "l",
        },
    })"
    Hint="@(new HintOptions
    {
        Text = "Er enghraifft, 31 3 1980",
    })"
    Id="example"
    Day="@(new DateInputItemsItem
    {
        Label = "Dydd",
    })"
    Month="@(new DateInputItemsItem
    {
        Label = "Mis",
    })"
    Year="@(new DateInputItemsItem
    {
        Label = "Blwyddyn",
    })"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/date-input/macro.njk" import dateInput %}

{{ dateInput({
  "fieldset": {
    "legend": {
      "heading": "Beth yw eich dyddiad geni?",
      "size": "l"
    }
  },
  "hint": {
    "text": "Er enghraifft, 31 3 1980"
  },
  "id": "example",
  "day": {
    "label": "Dydd"
  },
  "month": {
    "label": "Mis"
  },
  "year": {
    "label": "Blwyddyn"
  }
}) }}

With values

Matches upstream

Open on its own page (opens in new tab)

What is your date of birth?

For example, 31 3 1980
Razor Pages and MVC 
<nhsuk-date-input
    fieldset="@(new FieldsetOptions
    {
        Legend = new LegendOptions
        {
            Heading = "What is your date of birth?",
            Size = "l",
        },
    })"
    hint="For example, 31 3 1980"
    id="example"
    values="@(new DateInputValuesOptions
    {
        Day = "5",
        Month = "8",
        Year = "2024",
    })"
/>
Blazor 
<NhsukDateInput
    Fieldset="@(new FieldsetOptions
    {
        Legend = new LegendOptions
        {
            Heading = "What is your date of birth?",
            Size = "l",
        },
    })"
    Hint="@(new HintOptions
    {
        Text = "For example, 31 3 1980",
    })"
    Id="example"
    Values="@(new DateInputValuesOptions
    {
        Day = "5",
        Month = "8",
        Year = "2024",
    })"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/date-input/macro.njk" import dateInput %}

{{ dateInput({
  "fieldset": {
    "legend": {
      "heading": "What is your date of birth?",
      "size": "l"
    }
  },
  "hint": {
    "text": "For example, 31 3 1980"
  },
  "id": "example",
  "values": {
    "day": "5",
    "month": "8",
    "year": "2024"
  }
}) }}