ComponentSelect

20 of 20 upstream examples match. Razor component: <NhsukSelect>

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

Default

Matches upstream

Sort by

Razor Pages and MVC

<nhsuk-select
    label-options="@(new LabelOptions
    {
        Heading = "Sort by",
        Size = "l",
    })"
    name="example"
    items="@([
        new SelectItemsItem
        {
            Value = "published",
            Text = "Recently published",
        },
        new SelectItemsItem
        {
            Value = "updated",
            Text = "Recently updated",
        },
        new SelectItemsItem
        {
            Value = "views",
            Text = "Most views",
        },
        new SelectItemsItem
        {
            Value = "comments",
            Text = "Most comments",
        },
    ])"
/>

Blazor

<NhsukSelect
    Label="@(new LabelOptions
    {
        Heading = "Sort by",
        Size = "l",
    })"
    Name="example"
    Items="@([
        new SelectItemsItem
        {
            Value = "published",
            Text = "Recently published",
        },
        new SelectItemsItem
        {
            Value = "updated",
            Text = "Recently updated",
        },
        new SelectItemsItem
        {
            Value = "views",
            Text = "Most views",
        },
        new SelectItemsItem
        {
            Value = "comments",
            Text = "Most comments",
        },
    ])"
/>

Nunjucks (upstream)

{% from "nhsuk/components/select/macro.njk" import select %}

{{ select({
  "label": {
    "heading": "Sort by",
    "size": "l"
  },
  "name": "example",
  "items": [
    {
      "value": "published",
      "text": "Recently published"
    },
    {
      "value": "updated",
      "text": "Recently updated"
    },
    {
      "value": "views",
      "text": "Most views"
    },
    {
      "value": "comments",
      "text": "Most comments"
    }
  ]
}) }}

Disabled

Matches upstream

Open on its own page (opens in new tab)

Sort by

Razor Pages and MVC

<nhsuk-select
    label-options="@(new LabelOptions
    {
        Heading = "Sort by",
        Size = "l",
    })"
    name="example"
    disabled="true"
    items="@([
        new SelectItemsItem
        {
            Value = "published",
            Text = "Recently published",
        },
        new SelectItemsItem
        {
            Value = "updated",
            Text = "Recently updated",
        },
        new SelectItemsItem
        {
            Value = "views",
            Text = "Most views",
        },
        new SelectItemsItem
        {
            Value = "comments",
            Text = "Most comments",
        },
    ])"
/>

Blazor

<NhsukSelect
    Label="@(new LabelOptions
    {
        Heading = "Sort by",
        Size = "l",
    })"
    Name="example"
    Disabled="true"
    Items="@([
        new SelectItemsItem
        {
            Value = "published",
            Text = "Recently published",
        },
        new SelectItemsItem
        {
            Value = "updated",
            Text = "Recently updated",
        },
        new SelectItemsItem
        {
            Value = "views",
            Text = "Most views",
        },
        new SelectItemsItem
        {
            Value = "comments",
            Text = "Most comments",
        },
    ])"
/>

Nunjucks (upstream)

{% from "nhsuk/components/select/macro.njk" import select %}

{{ select({
  "label": {
    "heading": "Sort by",
    "size": "l"
  },
  "name": "example",
  "disabled": true,
  "items": [
    {
      "value": "published",
      "text": "Recently published"
    },
    {
      "value": "updated",
      "text": "Recently updated"
    },
    {
      "value": "views",
      "text": "Most views"
    },
    {
      "value": "comments",
      "text": "Most comments"
    }
  ]
}) }}

Disabled option

Matches upstream

Open on its own page (opens in new tab)

Sort by

Razor Pages and MVC

<nhsuk-select
    label-options="@(new LabelOptions
    {
        Heading = "Sort by",
        Size = "l",
    })"
    name="example"
    items="@([
        new SelectItemsItem
        {
            Value = "published",
            Text = "Recently published",
        },
        new SelectItemsItem
        {
            Value = "updated",
            Text = "Recently updated",
        },
        new SelectItemsItem
        {
            Value = "views",
            Text = "Most views",
        },
        new SelectItemsItem
        {
            Value = "comments",
            Text = "Most comments",
            Disabled = true,
        },
    ])"
/>

Blazor

<NhsukSelect
    Label="@(new LabelOptions
    {
        Heading = "Sort by",
        Size = "l",
    })"
    Name="example"
    Items="@([
        new SelectItemsItem
        {
            Value = "published",
            Text = "Recently published",
        },
        new SelectItemsItem
        {
            Value = "updated",
            Text = "Recently updated",
        },
        new SelectItemsItem
        {
            Value = "views",
            Text = "Most views",
        },
        new SelectItemsItem
        {
            Value = "comments",
            Text = "Most comments",
            Disabled = true,
        },
    ])"
/>

Nunjucks (upstream)

{% from "nhsuk/components/select/macro.njk" import select %}

{{ select({
  "label": {
    "heading": "Sort by",
    "size": "l"
  },
  "name": "example",
  "items": [
    {
      "value": "published",
      "text": "Recently published"
    },
    {
      "value": "updated",
      "text": "Recently updated"
    },
    {
      "value": "views",
      "text": "Most views"
    },
    {
      "value": "comments",
      "text": "Most comments",
      "disabled": true
    }
  ]
}) }}

Label

Matches upstream

with size S

Open on its own page (opens in new tab)

Sort by

Razor Pages and MVC

<nhsuk-select
    label-options="@(new LabelOptions
    {
        Heading = "Sort by",
        Size = "s",
    })"
    id="custom-size"
    name="example"
    items="@([
        new SelectItemsItem
        {
            Value = "published",
            Text = "Recently published",
        },
        new SelectItemsItem
        {
            Value = "updated",
            Text = "Recently updated",
        },
        new SelectItemsItem
        {
            Value = "views",
            Text = "Most views",
        },
        new SelectItemsItem
        {
            Value = "comments",
            Text = "Most comments",
        },
    ])"
/>

Blazor

<NhsukSelect
    Label="@(new LabelOptions
    {
        Heading = "Sort by",
        Size = "s",
    })"
    Id="custom-size"
    Name="example"
    Items="@([
        new SelectItemsItem
        {
            Value = "published",
            Text = "Recently published",
        },
        new SelectItemsItem
        {
            Value = "updated",
            Text = "Recently updated",
        },
        new SelectItemsItem
        {
            Value = "views",
            Text = "Most views",
        },
        new SelectItemsItem
        {
            Value = "comments",
            Text = "Most comments",
        },
    ])"
/>

Nunjucks (upstream)

{% from "nhsuk/components/select/macro.njk" import select %}

{{ select({
  "label": {
    "heading": "Sort by",
    "size": "s"
  },
  "id": "custom-size",
  "name": "example",
  "items": [
    {
      "value": "published",
      "text": "Recently published"
    },
    {
      "value": "updated",
      "text": "Recently updated"
    },
    {
      "value": "views",
      "text": "Most views"
    },
    {
      "value": "comments",
      "text": "Most comments"
    }
  ]
}) }}

Label

Matches upstream

with size M

Open on its own page (opens in new tab)

Sort by

Razor Pages and MVC

<nhsuk-select
    label-options="@(new LabelOptions
    {
        Heading = "Sort by",
        Size = "m",
    })"
    id="custom-size"
    name="example"
    items="@([
        new SelectItemsItem
        {
            Value = "published",
            Text = "Recently published",
        },
        new SelectItemsItem
        {
            Value = "updated",
            Text = "Recently updated",
        },
        new SelectItemsItem
        {
            Value = "views",
            Text = "Most views",
        },
        new SelectItemsItem
        {
            Value = "comments",
            Text = "Most comments",
        },
    ])"
/>

Blazor

<NhsukSelect
    Label="@(new LabelOptions
    {
        Heading = "Sort by",
        Size = "m",
    })"
    Id="custom-size"
    Name="example"
    Items="@([
        new SelectItemsItem
        {
            Value = "published",
            Text = "Recently published",
        },
        new SelectItemsItem
        {
            Value = "updated",
            Text = "Recently updated",
        },
        new SelectItemsItem
        {
            Value = "views",
            Text = "Most views",
        },
        new SelectItemsItem
        {
            Value = "comments",
            Text = "Most comments",
        },
    ])"
/>

Nunjucks (upstream)

{% from "nhsuk/components/select/macro.njk" import select %}

{{ select({
  "label": {
    "heading": "Sort by",
    "size": "m"
  },
  "id": "custom-size",
  "name": "example",
  "items": [
    {
      "value": "published",
      "text": "Recently published"
    },
    {
      "value": "updated",
      "text": "Recently updated"
    },
    {
      "value": "views",
      "text": "Most views"
    },
    {
      "value": "comments",
      "text": "Most comments"
    }
  ]
}) }}

Label

Matches upstream

with size L

Open on its own page (opens in new tab)

Sort by

Razor Pages and MVC

<nhsuk-select
    label-options="@(new LabelOptions
    {
        Heading = "Sort by",
        Size = "l",
    })"
    id="custom-size"
    name="example"
    items="@([
        new SelectItemsItem
        {
            Value = "published",
            Text = "Recently published",
        },
        new SelectItemsItem
        {
            Value = "updated",
            Text = "Recently updated",
        },
        new SelectItemsItem
        {
            Value = "views",
            Text = "Most views",
        },
        new SelectItemsItem
        {
            Value = "comments",
            Text = "Most comments",
        },
    ])"
/>

Blazor

<NhsukSelect
    Label="@(new LabelOptions
    {
        Heading = "Sort by",
        Size = "l",
    })"
    Id="custom-size"
    Name="example"
    Items="@([
        new SelectItemsItem
        {
            Value = "published",
            Text = "Recently published",
        },
        new SelectItemsItem
        {
            Value = "updated",
            Text = "Recently updated",
        },
        new SelectItemsItem
        {
            Value = "views",
            Text = "Most views",
        },
        new SelectItemsItem
        {
            Value = "comments",
            Text = "Most comments",
        },
    ])"
/>

Nunjucks (upstream)

{% from "nhsuk/components/select/macro.njk" import select %}

{{ select({
  "label": {
    "heading": "Sort by",
    "size": "l"
  },
  "id": "custom-size",
  "name": "example",
  "items": [
    {
      "value": "published",
      "text": "Recently published"
    },
    {
      "value": "updated",
      "text": "Recently updated"
    },
    {
      "value": "views",
      "text": "Most views"
    },
    {
      "value": "comments",
      "text": "Most comments"
    }
  ]
}) }}

Label

Matches upstream

with size XL

Open on its own page (opens in new tab)

Sort by

Razor Pages and MVC

<nhsuk-select
    label-options="@(new LabelOptions
    {
        Heading = "Sort by",
        Size = "xl",
    })"
    id="custom-size"
    name="example"
    items="@([
        new SelectItemsItem
        {
            Value = "published",
            Text = "Recently published",
        },
        new SelectItemsItem
        {
            Value = "updated",
            Text = "Recently updated",
        },
        new SelectItemsItem
        {
            Value = "views",
            Text = "Most views",
        },
        new SelectItemsItem
        {
            Value = "comments",
            Text = "Most comments",
        },
    ])"
/>

Blazor

<NhsukSelect
    Label="@(new LabelOptions
    {
        Heading = "Sort by",
        Size = "xl",
    })"
    Id="custom-size"
    Name="example"
    Items="@([
        new SelectItemsItem
        {
            Value = "published",
            Text = "Recently published",
        },
        new SelectItemsItem
        {
            Value = "updated",
            Text = "Recently updated",
        },
        new SelectItemsItem
        {
            Value = "views",
            Text = "Most views",
        },
        new SelectItemsItem
        {
            Value = "comments",
            Text = "Most comments",
        },
    ])"
/>

Nunjucks (upstream)

{% from "nhsuk/components/select/macro.njk" import select %}

{{ select({
  "label": {
    "heading": "Sort by",
    "size": "xl"
  },
  "id": "custom-size",
  "name": "example",
  "items": [
    {
      "value": "published",
      "text": "Recently published"
    },
    {
      "value": "updated",
      "text": "Recently updated"
    },
    {
      "value": "views",
      "text": "Most views"
    },
    {
      "value": "comments",
      "text": "Most comments"
    }
  ]
}) }}

With button

Matches upstream

Open on its own page (opens in new tab)

Choose location

This can be different to where you went before

Razor Pages and MVC

<nhsuk-select
    label-options="@(new LabelOptions
    {
        Heading = "Choose location",
        Size = "l",
    })"
    hint="This can be different to where you went before"
    id="with-hint"
    name="example"
    items="@([
        new SelectItemsItem
        {
            Value = "choose",
            Text = "Choose location",
        },
        new SelectItemsItem
        {
            Value = "eastmidlands",
            Text = "East Midlands",
        },
        new SelectItemsItem
        {
            Value = "eastofengland",
            Text = "East of England",
        },
        new SelectItemsItem
        {
            Value = "london",
            Text = "London",
        },
        new SelectItemsItem
        {
            Value = "northeast",
            Text = "North East",
        },
        new SelectItemsItem
        {
            Value = "northwest",
            Text = "North West",
        },
        new SelectItemsItem
        {
            Value = "southeast",
            Text = "South East",
        },
        new SelectItemsItem
        {
            Value = "southwest",
            Text = "South West",
        },
        new SelectItemsItem
        {
            Value = "westmidlands",
            Text = "West Midlands",
        },
        new SelectItemsItem
        {
            Value = "yorkshire",
            Text = "Yorkshire and the Humber",
        },
    ])"
    form-group="@(new SelectFormGroupOptions
    {
        AfterInput = new SelectFormGroupAfterInputOptions
        {
            Html = @"<button class=""nhsuk-button nhsuk-button--secondary nhsuk-button--small"" data-module=""nhsuk-button"" type=""submit"">
  Save
</button>
",
        },
    })"
/>

Blazor

<NhsukSelect
    Label="@(new LabelOptions
    {
        Heading = "Choose location",
        Size = "l",
    })"
    Hint="@(new HintOptions
    {
        Text = "This can be different to where you went before",
    })"
    Id="with-hint"
    Name="example"
    Items="@([
        new SelectItemsItem
        {
            Value = "choose",
            Text = "Choose location",
        },
        new SelectItemsItem
        {
            Value = "eastmidlands",
            Text = "East Midlands",
        },
        new SelectItemsItem
        {
            Value = "eastofengland",
            Text = "East of England",
        },
        new SelectItemsItem
        {
            Value = "london",
            Text = "London",
        },
        new SelectItemsItem
        {
            Value = "northeast",
            Text = "North East",
        },
        new SelectItemsItem
        {
            Value = "northwest",
            Text = "North West",
        },
        new SelectItemsItem
        {
            Value = "southeast",
            Text = "South East",
        },
        new SelectItemsItem
        {
            Value = "southwest",
            Text = "South West",
        },
        new SelectItemsItem
        {
            Value = "westmidlands",
            Text = "West Midlands",
        },
        new SelectItemsItem
        {
            Value = "yorkshire",
            Text = "Yorkshire and the Humber",
        },
    ])"
    FormGroup="@(new SelectFormGroupOptions
    {
        AfterInput = new SelectFormGroupAfterInputOptions
        {
            Html = @"<button class=""nhsuk-button nhsuk-button--secondary nhsuk-button--small"" data-module=""nhsuk-button"" type=""submit"">
  Save
</button>
",
        },
    })"
/>

Nunjucks (upstream)

{% from "nhsuk/components/select/macro.njk" import select %}

{{ select({
  "label": {
    "heading": "Choose location",
    "size": "l"
  },
  "hint": {
    "text": "This can be different to where you went before"
  },
  "id": "with-hint",
  "name": "example",
  "items": [
    {
      "value": "choose",
      "text": "Choose location"
    },
    {
      "value": "eastmidlands",
      "text": "East Midlands"
    },
    {
      "value": "eastofengland",
      "text": "East of England"
    },
    {
      "value": "london",
      "text": "London"
    },
    {
      "value": "northeast",
      "text": "North East"
    },
    {
      "value": "northwest",
      "text": "North West"
    },
    {
      "value": "southeast",
      "text": "South East"
    },
    {
      "value": "southwest",
      "text": "South West"
    },
    {
      "value": "westmidlands",
      "text": "West Midlands"
    },
    {
      "value": "yorkshire",
      "text": "Yorkshire and the Humber"
    }
  ],
  "formGroup": {
    "afterInput": {
      "html": "<button class=\"nhsuk-button nhsuk-button--secondary nhsuk-button--small\" data-module=\"nhsuk-button\" type=\"submit\">\n  Save\n</button>\n"
    }
  }
}) }}

With button and error message

Matches upstream

Open on its own page (opens in new tab)

Choose location

This can be different to where you went before

Select a location

Razor Pages and MVC

<nhsuk-select
    label-options="@(new LabelOptions
    {
        Heading = "Choose location",
        Size = "l",
    })"
    hint="This can be different to where you went before"
    error-message="Select a location"
    id="with-hint"
    name="example"
    items="@([
        new SelectItemsItem
        {
            Value = "choose",
            Text = "Choose location",
        },
        new SelectItemsItem
        {
            Value = "eastmidlands",
            Text = "East Midlands",
        },
        new SelectItemsItem
        {
            Value = "eastofengland",
            Text = "East of England",
        },
        new SelectItemsItem
        {
            Value = "london",
            Text = "London",
        },
        new SelectItemsItem
        {
            Value = "northeast",
            Text = "North East",
        },
        new SelectItemsItem
        {
            Value = "northwest",
            Text = "North West",
        },
        new SelectItemsItem
        {
            Value = "southeast",
            Text = "South East",
        },
        new SelectItemsItem
        {
            Value = "southwest",
            Text = "South West",
        },
        new SelectItemsItem
        {
            Value = "westmidlands",
            Text = "West Midlands",
        },
        new SelectItemsItem
        {
            Value = "yorkshire",
            Text = "Yorkshire and the Humber",
        },
    ])"
    form-group="@(new SelectFormGroupOptions
    {
        AfterInput = new SelectFormGroupAfterInputOptions
        {
            Html = @"<button class=""nhsuk-button nhsuk-button--secondary nhsuk-button--small"" data-module=""nhsuk-button"" type=""submit"">
  Save
</button>
",
        },
    })"
/>

Blazor

<NhsukSelect
    Label="@(new LabelOptions
    {
        Heading = "Choose location",
        Size = "l",
    })"
    Hint="@(new HintOptions
    {
        Text = "This can be different to where you went before",
    })"
    ErrorMessage="@(new ErrorMessageOptions
    {
        Text = "Select a location",
    })"
    Id="with-hint"
    Name="example"
    Items="@([
        new SelectItemsItem
        {
            Value = "choose",
            Text = "Choose location",
        },
        new SelectItemsItem
        {
            Value = "eastmidlands",
            Text = "East Midlands",
        },
        new SelectItemsItem
        {
            Value = "eastofengland",
            Text = "East of England",
        },
        new SelectItemsItem
        {
            Value = "london",
            Text = "London",
        },
        new SelectItemsItem
        {
            Value = "northeast",
            Text = "North East",
        },
        new SelectItemsItem
        {
            Value = "northwest",
            Text = "North West",
        },
        new SelectItemsItem
        {
            Value = "southeast",
            Text = "South East",
        },
        new SelectItemsItem
        {
            Value = "southwest",
            Text = "South West",
        },
        new SelectItemsItem
        {
            Value = "westmidlands",
            Text = "West Midlands",
        },
        new SelectItemsItem
        {
            Value = "yorkshire",
            Text = "Yorkshire and the Humber",
        },
    ])"
    FormGroup="@(new SelectFormGroupOptions
    {
        AfterInput = new SelectFormGroupAfterInputOptions
        {
            Html = @"<button class=""nhsuk-button nhsuk-button--secondary nhsuk-button--small"" data-module=""nhsuk-button"" type=""submit"">
  Save
</button>
",
        },
    })"
/>

Nunjucks (upstream)

{% from "nhsuk/components/select/macro.njk" import select %}

{{ select({
  "label": {
    "heading": "Choose location",
    "size": "l"
  },
  "hint": {
    "text": "This can be different to where you went before"
  },
  "errorMessage": {
    "text": "Select a location"
  },
  "id": "with-hint",
  "name": "example",
  "items": [
    {
      "value": "choose",
      "text": "Choose location"
    },
    {
      "value": "eastmidlands",
      "text": "East Midlands"
    },
    {
      "value": "eastofengland",
      "text": "East of England"
    },
    {
      "value": "london",
      "text": "London"
    },
    {
      "value": "northeast",
      "text": "North East"
    },
    {
      "value": "northwest",
      "text": "North West"
    },
    {
      "value": "southeast",
      "text": "South East"
    },
    {
      "value": "southwest",
      "text": "South West"
    },
    {
      "value": "westmidlands",
      "text": "West Midlands"
    },
    {
      "value": "yorkshire",
      "text": "Yorkshire and the Humber"
    }
  ],
  "formGroup": {
    "afterInput": {
      "html": "<button class=\"nhsuk-button nhsuk-button--secondary nhsuk-button--small\" data-module=\"nhsuk-button\" type=\"submit\">\n  Save\n</button>\n"
    }
  }
}) }}

With divider

Matches upstream

Open on its own page (opens in new tab)

Sort by

Razor Pages and MVC

<nhsuk-select
    label-options="@(new LabelOptions
    {
        Heading = "Sort by",
        Size = "l",
    })"
    name="example"
    items="@([
        new SelectItemsItem
        {
            Value = "first-name-ascending",
            Text = "First name (A to Z)",
        },
        new SelectItemsItem
        {
            Value = "first-name-descending",
            Text = "First name (Z to A)",
        },
        new SelectItemsItem
        {
            Divider = true,
        },
        new SelectItemsItem
        {
            Value = "last-name-ascending",
            Text = "Last name (A to Z)",
        },
        new SelectItemsItem
        {
            Value = "last-name-descending",
            Text = "Last name (Z to A)",
        },
    ])"
/>

Blazor

<NhsukSelect
    Label="@(new LabelOptions
    {
        Heading = "Sort by",
        Size = "l",
    })"
    Name="example"
    Items="@([
        new SelectItemsItem
        {
            Value = "first-name-ascending",
            Text = "First name (A to Z)",
        },
        new SelectItemsItem
        {
            Value = "first-name-descending",
            Text = "First name (Z to A)",
        },
        new SelectItemsItem
        {
            Divider = true,
        },
        new SelectItemsItem
        {
            Value = "last-name-ascending",
            Text = "Last name (A to Z)",
        },
        new SelectItemsItem
        {
            Value = "last-name-descending",
            Text = "Last name (Z to A)",
        },
    ])"
/>

Nunjucks (upstream)

{% from "nhsuk/components/select/macro.njk" import select %}

{{ select({
  "label": {
    "heading": "Sort by",
    "size": "l"
  },
  "name": "example",
  "items": [
    {
      "value": "first-name-ascending",
      "text": "First name (A to Z)"
    },
    {
      "value": "first-name-descending",
      "text": "First name (Z to A)"
    },
    {
      "divider": true
    },
    {
      "value": "last-name-ascending",
      "text": "Last name (A to Z)"
    },
    {
      "value": "last-name-descending",
      "text": "Last name (Z to A)"
    }
  ]
}) }}

With error message

Matches upstream

Open on its own page (opens in new tab)

Choose location

Select a location

Razor Pages and MVC

<nhsuk-select
    label-options="@(new LabelOptions
    {
        Heading = "Choose location",
        Size = "l",
    })"
    error-message="Select a location"
    id="with-error-message"
    name="example"
    items="@([
        new SelectItemsItem
        {
            Value = "choose",
            Text = "Choose location",
        },
        new SelectItemsItem
        {
            Value = "eastmidlands",
            Text = "East Midlands",
        },
        new SelectItemsItem
        {
            Value = "eastofengland",
            Text = "East of England",
        },
        new SelectItemsItem
        {
            Value = "london",
            Text = "London",
        },
        new SelectItemsItem
        {
            Value = "northeast",
            Text = "North East",
        },
        new SelectItemsItem
        {
            Value = "northwest",
            Text = "North West",
        },
        new SelectItemsItem
        {
            Value = "southeast",
            Text = "South East",
        },
        new SelectItemsItem
        {
            Value = "southwest",
            Text = "South West",
        },
        new SelectItemsItem
        {
            Value = "westmidlands",
            Text = "West Midlands",
        },
        new SelectItemsItem
        {
            Value = "yorkshire",
            Text = "Yorkshire and the Humber",
        },
    ])"
/>

Blazor

<NhsukSelect
    Label="@(new LabelOptions
    {
        Heading = "Choose location",
        Size = "l",
    })"
    ErrorMessage="@(new ErrorMessageOptions
    {
        Text = "Select a location",
    })"
    Id="with-error-message"
    Name="example"
    Items="@([
        new SelectItemsItem
        {
            Value = "choose",
            Text = "Choose location",
        },
        new SelectItemsItem
        {
            Value = "eastmidlands",
            Text = "East Midlands",
        },
        new SelectItemsItem
        {
            Value = "eastofengland",
            Text = "East of England",
        },
        new SelectItemsItem
        {
            Value = "london",
            Text = "London",
        },
        new SelectItemsItem
        {
            Value = "northeast",
            Text = "North East",
        },
        new SelectItemsItem
        {
            Value = "northwest",
            Text = "North West",
        },
        new SelectItemsItem
        {
            Value = "southeast",
            Text = "South East",
        },
        new SelectItemsItem
        {
            Value = "southwest",
            Text = "South West",
        },
        new SelectItemsItem
        {
            Value = "westmidlands",
            Text = "West Midlands",
        },
        new SelectItemsItem
        {
            Value = "yorkshire",
            Text = "Yorkshire and the Humber",
        },
    ])"
/>

Nunjucks (upstream)

{% from "nhsuk/components/select/macro.njk" import select %}

{{ select({
  "label": {
    "heading": "Choose location",
    "size": "l"
  },
  "errorMessage": {
    "text": "Select a location"
  },
  "id": "with-error-message",
  "name": "example",
  "items": [
    {
      "value": "choose",
      "text": "Choose location"
    },
    {
      "value": "eastmidlands",
      "text": "East Midlands"
    },
    {
      "value": "eastofengland",
      "text": "East of England"
    },
    {
      "value": "london",
      "text": "London"
    },
    {
      "value": "northeast",
      "text": "North East"
    },
    {
      "value": "northwest",
      "text": "North West"
    },
    {
      "value": "southeast",
      "text": "South East"
    },
    {
      "value": "southwest",
      "text": "South West"
    },
    {
      "value": "westmidlands",
      "text": "West Midlands"
    },
    {
      "value": "yorkshire",
      "text": "Yorkshire and the Humber"
    }
  ]
}) }}

With error message and hint

Matches upstream

Open on its own page (opens in new tab)

Choose location

This can be different to where you went before

Select a location

Razor Pages and MVC

<nhsuk-select
    label-options="@(new LabelOptions
    {
        Heading = "Choose location",
        Size = "l",
    })"
    hint="This can be different to where you went before"
    error-message="Select a location"
    id="with-hint-error"
    name="example"
    items="@([
        new SelectItemsItem
        {
            Value = "choose",
            Text = "Choose location",
        },
        new SelectItemsItem
        {
            Value = "eastmidlands",
            Text = "East Midlands",
        },
        new SelectItemsItem
        {
            Value = "eastofengland",
            Text = "East of England",
        },
        new SelectItemsItem
        {
            Value = "london",
            Text = "London",
        },
        new SelectItemsItem
        {
            Value = "northeast",
            Text = "North East",
        },
        new SelectItemsItem
        {
            Value = "northwest",
            Text = "North West",
        },
        new SelectItemsItem
        {
            Value = "southeast",
            Text = "South East",
        },
        new SelectItemsItem
        {
            Value = "southwest",
            Text = "South West",
        },
        new SelectItemsItem
        {
            Value = "westmidlands",
            Text = "West Midlands",
        },
        new SelectItemsItem
        {
            Value = "yorkshire",
            Text = "Yorkshire and the Humber",
        },
    ])"
/>

Blazor

<NhsukSelect
    Label="@(new LabelOptions
    {
        Heading = "Choose location",
        Size = "l",
    })"
    Hint="@(new HintOptions
    {
        Text = "This can be different to where you went before",
    })"
    ErrorMessage="@(new ErrorMessageOptions
    {
        Text = "Select a location",
    })"
    Id="with-hint-error"
    Name="example"
    Items="@([
        new SelectItemsItem
        {
            Value = "choose",
            Text = "Choose location",
        },
        new SelectItemsItem
        {
            Value = "eastmidlands",
            Text = "East Midlands",
        },
        new SelectItemsItem
        {
            Value = "eastofengland",
            Text = "East of England",
        },
        new SelectItemsItem
        {
            Value = "london",
            Text = "London",
        },
        new SelectItemsItem
        {
            Value = "northeast",
            Text = "North East",
        },
        new SelectItemsItem
        {
            Value = "northwest",
            Text = "North West",
        },
        new SelectItemsItem
        {
            Value = "southeast",
            Text = "South East",
        },
        new SelectItemsItem
        {
            Value = "southwest",
            Text = "South West",
        },
        new SelectItemsItem
        {
            Value = "westmidlands",
            Text = "West Midlands",
        },
        new SelectItemsItem
        {
            Value = "yorkshire",
            Text = "Yorkshire and the Humber",
        },
    ])"
/>

Nunjucks (upstream)

{% from "nhsuk/components/select/macro.njk" import select %}

{{ select({
  "label": {
    "heading": "Choose location",
    "size": "l"
  },
  "hint": {
    "text": "This can be different to where you went before"
  },
  "errorMessage": {
    "text": "Select a location"
  },
  "id": "with-hint-error",
  "name": "example",
  "items": [
    {
      "value": "choose",
      "text": "Choose location"
    },
    {
      "value": "eastmidlands",
      "text": "East Midlands"
    },
    {
      "value": "eastofengland",
      "text": "East of England"
    },
    {
      "value": "london",
      "text": "London"
    },
    {
      "value": "northeast",
      "text": "North East"
    },
    {
      "value": "northwest",
      "text": "North West"
    },
    {
      "value": "southeast",
      "text": "South East"
    },
    {
      "value": "southwest",
      "text": "South West"
    },
    {
      "value": "westmidlands",
      "text": "West Midlands"
    },
    {
      "value": "yorkshire",
      "text": "Yorkshire and the Humber"
    }
  ]
}) }}

With error message and hint as strings

Matches upstream

Open on its own page (opens in new tab)

Choose location

This can be different to where you went before

Select a location

Razor Pages and MVC

<nhsuk-select
    label-options="@(new LabelOptions
    {
        Heading = "Choose location",
        Size = "l",
    })"
    hint="This can be different to where you went before"
    error-message="Select a location"
    id="with-hint-error"
    name="example"
    items="@([
        new SelectItemsItem
        {
            Value = "choose",
            Text = "Choose location",
        },
        new SelectItemsItem
        {
            Value = "eastmidlands",
            Text = "East Midlands",
        },
        new SelectItemsItem
        {
            Value = "eastofengland",
            Text = "East of England",
        },
        new SelectItemsItem
        {
            Value = "london",
            Text = "London",
        },
        new SelectItemsItem
        {
            Value = "northeast",
            Text = "North East",
        },
        new SelectItemsItem
        {
            Value = "northwest",
            Text = "North West",
        },
        new SelectItemsItem
        {
            Value = "southeast",
            Text = "South East",
        },
        new SelectItemsItem
        {
            Value = "southwest",
            Text = "South West",
        },
        new SelectItemsItem
        {
            Value = "westmidlands",
            Text = "West Midlands",
        },
        new SelectItemsItem
        {
            Value = "yorkshire",
            Text = "Yorkshire and the Humber",
        },
    ])"
/>

Blazor

<NhsukSelect
    Label="@(new LabelOptions
    {
        Heading = "Choose location",
        Size = "l",
    })"
    Hint="@("This can be different to where you went before")"
    ErrorMessage="@("Select a location")"
    Id="with-hint-error"
    Name="example"
    Items="@([
        new SelectItemsItem
        {
            Value = "choose",
            Text = "Choose location",
        },
        new SelectItemsItem
        {
            Value = "eastmidlands",
            Text = "East Midlands",
        },
        new SelectItemsItem
        {
            Value = "eastofengland",
            Text = "East of England",
        },
        new SelectItemsItem
        {
            Value = "london",
            Text = "London",
        },
        new SelectItemsItem
        {
            Value = "northeast",
            Text = "North East",
        },
        new SelectItemsItem
        {
            Value = "northwest",
            Text = "North West",
        },
        new SelectItemsItem
        {
            Value = "southeast",
            Text = "South East",
        },
        new SelectItemsItem
        {
            Value = "southwest",
            Text = "South West",
        },
        new SelectItemsItem
        {
            Value = "westmidlands",
            Text = "West Midlands",
        },
        new SelectItemsItem
        {
            Value = "yorkshire",
            Text = "Yorkshire and the Humber",
        },
    ])"
/>

Nunjucks (upstream)

{% from "nhsuk/components/select/macro.njk" import select %}

{{ select({
  "label": {
    "heading": "Choose location",
    "size": "l"
  },
  "hint": "This can be different to where you went before",
  "errorMessage": "Select a location",
  "id": "with-hint-error",
  "name": "example",
  "items": [
    {
      "value": "choose",
      "text": "Choose location"
    },
    {
      "value": "eastmidlands",
      "text": "East Midlands"
    },
    {
      "value": "eastofengland",
      "text": "East of England"
    },
    {
      "value": "london",
      "text": "London"
    },
    {
      "value": "northeast",
      "text": "North East"
    },
    {
      "value": "northwest",
      "text": "North West"
    },
    {
      "value": "southeast",
      "text": "South East"
    },
    {
      "value": "southwest",
      "text": "South West"
    },
    {
      "value": "westmidlands",
      "text": "West Midlands"
    },
    {
      "value": "yorkshire",
      "text": "Yorkshire and the Humber"
    }
  ]
}) }}

With error message and hint, without heading

Matches upstream

Open on its own page (opens in new tab)

Choose location

This can be different to where you went before

Select a location

Razor Pages and MVC

<nhsuk-select
    label="Choose location"
    hint="This can be different to where you went before"
    error-message="Select a location"
    id="with-hint-error"
    name="example"
    items="@([
        new SelectItemsItem
        {
            Value = "choose",
            Text = "Choose location",
        },
        new SelectItemsItem
        {
            Value = "eastmidlands",
            Text = "East Midlands",
        },
        new SelectItemsItem
        {
            Value = "eastofengland",
            Text = "East of England",
        },
        new SelectItemsItem
        {
            Value = "london",
            Text = "London",
        },
        new SelectItemsItem
        {
            Value = "northeast",
            Text = "North East",
        },
        new SelectItemsItem
        {
            Value = "northwest",
            Text = "North West",
        },
        new SelectItemsItem
        {
            Value = "southeast",
            Text = "South East",
        },
        new SelectItemsItem
        {
            Value = "southwest",
            Text = "South West",
        },
        new SelectItemsItem
        {
            Value = "westmidlands",
            Text = "West Midlands",
        },
        new SelectItemsItem
        {
            Value = "yorkshire",
            Text = "Yorkshire and the Humber",
        },
    ])"
/>

Blazor

<NhsukSelect
    Label="@(new LabelOptions
    {
        Text = "Choose location",
    })"
    Hint="@(new HintOptions
    {
        Text = "This can be different to where you went before",
    })"
    ErrorMessage="@(new ErrorMessageOptions
    {
        Text = "Select a location",
    })"
    Id="with-hint-error"
    Name="example"
    Items="@([
        new SelectItemsItem
        {
            Value = "choose",
            Text = "Choose location",
        },
        new SelectItemsItem
        {
            Value = "eastmidlands",
            Text = "East Midlands",
        },
        new SelectItemsItem
        {
            Value = "eastofengland",
            Text = "East of England",
        },
        new SelectItemsItem
        {
            Value = "london",
            Text = "London",
        },
        new SelectItemsItem
        {
            Value = "northeast",
            Text = "North East",
        },
        new SelectItemsItem
        {
            Value = "northwest",
            Text = "North West",
        },
        new SelectItemsItem
        {
            Value = "southeast",
            Text = "South East",
        },
        new SelectItemsItem
        {
            Value = "southwest",
            Text = "South West",
        },
        new SelectItemsItem
        {
            Value = "westmidlands",
            Text = "West Midlands",
        },
        new SelectItemsItem
        {
            Value = "yorkshire",
            Text = "Yorkshire and the Humber",
        },
    ])"
/>

Nunjucks (upstream)

{% from "nhsuk/components/select/macro.njk" import select %}

{{ select({
  "label": {
    "text": "Choose location"
  },
  "hint": {
    "text": "This can be different to where you went before"
  },
  "errorMessage": {
    "text": "Select a location"
  },
  "id": "with-hint-error",
  "name": "example",
  "items": [
    {
      "value": "choose",
      "text": "Choose location"
    },
    {
      "value": "eastmidlands",
      "text": "East Midlands"
    },
    {
      "value": "eastofengland",
      "text": "East of England"
    },
    {
      "value": "london",
      "text": "London"
    },
    {
      "value": "northeast",
      "text": "North East"
    },
    {
      "value": "northwest",
      "text": "North West"
    },
    {
      "value": "southeast",
      "text": "South East"
    },
    {
      "value": "southwest",
      "text": "South West"
    },
    {
      "value": "westmidlands",
      "text": "West Midlands"
    },
    {
      "value": "yorkshire",
      "text": "Yorkshire and the Humber"
    }
  ]
}) }}

With error message, without heading

Matches upstream

Open on its own page (opens in new tab)

Choose locationSelect a location

Razor Pages and MVC

<nhsuk-select
    label="Choose location"
    error-message="Select a location"
    id="with-error-message"
    name="example"
    items="@([
        new SelectItemsItem
        {
            Value = "choose",
            Text = "Choose location",
        },
        new SelectItemsItem
        {
            Value = "eastmidlands",
            Text = "East Midlands",
        },
        new SelectItemsItem
        {
            Value = "eastofengland",
            Text = "East of England",
        },
        new SelectItemsItem
        {
            Value = "london",
            Text = "London",
        },
        new SelectItemsItem
        {
            Value = "northeast",
            Text = "North East",
        },
        new SelectItemsItem
        {
            Value = "northwest",
            Text = "North West",
        },
        new SelectItemsItem
        {
            Value = "southeast",
            Text = "South East",
        },
        new SelectItemsItem
        {
            Value = "southwest",
            Text = "South West",
        },
        new SelectItemsItem
        {
            Value = "westmidlands",
            Text = "West Midlands",
        },
        new SelectItemsItem
        {
            Value = "yorkshire",
            Text = "Yorkshire and the Humber",
        },
    ])"
/>

Blazor

<NhsukSelect
    Label="@(new LabelOptions
    {
        Text = "Choose location",
    })"
    ErrorMessage="@(new ErrorMessageOptions
    {
        Text = "Select a location",
    })"
    Id="with-error-message"
    Name="example"
    Items="@([
        new SelectItemsItem
        {
            Value = "choose",
            Text = "Choose location",
        },
        new SelectItemsItem
        {
            Value = "eastmidlands",
            Text = "East Midlands",
        },
        new SelectItemsItem
        {
            Value = "eastofengland",
            Text = "East of England",
        },
        new SelectItemsItem
        {
            Value = "london",
            Text = "London",
        },
        new SelectItemsItem
        {
            Value = "northeast",
            Text = "North East",
        },
        new SelectItemsItem
        {
            Value = "northwest",
            Text = "North West",
        },
        new SelectItemsItem
        {
            Value = "southeast",
            Text = "South East",
        },
        new SelectItemsItem
        {
            Value = "southwest",
            Text = "South West",
        },
        new SelectItemsItem
        {
            Value = "westmidlands",
            Text = "West Midlands",
        },
        new SelectItemsItem
        {
            Value = "yorkshire",
            Text = "Yorkshire and the Humber",
        },
    ])"
/>

Nunjucks (upstream)

{% from "nhsuk/components/select/macro.njk" import select %}

{{ select({
  "label": {
    "text": "Choose location"
  },
  "errorMessage": {
    "text": "Select a location"
  },
  "id": "with-error-message",
  "name": "example",
  "items": [
    {
      "value": "choose",
      "text": "Choose location"
    },
    {
      "value": "eastmidlands",
      "text": "East Midlands"
    },
    {
      "value": "eastofengland",
      "text": "East of England"
    },
    {
      "value": "london",
      "text": "London"
    },
    {
      "value": "northeast",
      "text": "North East"
    },
    {
      "value": "northwest",
      "text": "North West"
    },
    {
      "value": "southeast",
      "text": "South East"
    },
    {
      "value": "southwest",
      "text": "South West"
    },
    {
      "value": "westmidlands",
      "text": "West Midlands"
    },
    {
      "value": "yorkshire",
      "text": "Yorkshire and the Humber"
    }
  ]
}) }}

With error only

Matches upstream

Open on its own page (opens in new tab)

Choose location

Razor Pages and MVC

<nhsuk-select
    label-options="@(new LabelOptions
    {
        Heading = "Choose location",
        Size = "l",
    })"
    error-message-options="@(true)"
    id="with-error-only"
    name="example"
    items="@([
        new SelectItemsItem
        {
            Value = "choose",
            Text = "Choose location",
        },
        new SelectItemsItem
        {
            Value = "eastmidlands",
            Text = "East Midlands",
        },
        new SelectItemsItem
        {
            Value = "eastofengland",
            Text = "East of England",
        },
        new SelectItemsItem
        {
            Value = "london",
            Text = "London",
        },
        new SelectItemsItem
        {
            Value = "northeast",
            Text = "North East",
        },
        new SelectItemsItem
        {
            Value = "northwest",
            Text = "North West",
        },
        new SelectItemsItem
        {
            Value = "southeast",
            Text = "South East",
        },
        new SelectItemsItem
        {
            Value = "southwest",
            Text = "South West",
        },
        new SelectItemsItem
        {
            Value = "westmidlands",
            Text = "West Midlands",
        },
        new SelectItemsItem
        {
            Value = "yorkshire",
            Text = "Yorkshire and the Humber",
        },
    ])"
/>

Blazor

<NhsukSelect
    Label="@(new LabelOptions
    {
        Heading = "Choose location",
        Size = "l",
    })"
    ErrorMessage="@(true)"
    Id="with-error-only"
    Name="example"
    Items="@([
        new SelectItemsItem
        {
            Value = "choose",
            Text = "Choose location",
        },
        new SelectItemsItem
        {
            Value = "eastmidlands",
            Text = "East Midlands",
        },
        new SelectItemsItem
        {
            Value = "eastofengland",
            Text = "East of England",
        },
        new SelectItemsItem
        {
            Value = "london",
            Text = "London",
        },
        new SelectItemsItem
        {
            Value = "northeast",
            Text = "North East",
        },
        new SelectItemsItem
        {
            Value = "northwest",
            Text = "North West",
        },
        new SelectItemsItem
        {
            Value = "southeast",
            Text = "South East",
        },
        new SelectItemsItem
        {
            Value = "southwest",
            Text = "South West",
        },
        new SelectItemsItem
        {
            Value = "westmidlands",
            Text = "West Midlands",
        },
        new SelectItemsItem
        {
            Value = "yorkshire",
            Text = "Yorkshire and the Humber",
        },
    ])"
/>

Nunjucks (upstream)

{% from "nhsuk/components/select/macro.njk" import select %}

{{ select({
  "label": {
    "heading": "Choose location",
    "size": "l"
  },
  "errorMessage": true,
  "id": "with-error-only",
  "name": "example",
  "items": [
    {
      "value": "choose",
      "text": "Choose location"
    },
    {
      "value": "eastmidlands",
      "text": "East Midlands"
    },
    {
      "value": "eastofengland",
      "text": "East of England"
    },
    {
      "value": "london",
      "text": "London"
    },
    {
      "value": "northeast",
      "text": "North East"
    },
    {
      "value": "northwest",
      "text": "North West"
    },
    {
      "value": "southeast",
      "text": "South East"
    },
    {
      "value": "southwest",
      "text": "South West"
    },
    {
      "value": "westmidlands",
      "text": "West Midlands"
    },
    {
      "value": "yorkshire",
      "text": "Yorkshire and the Humber"
    }
  ]
}) }}

With hint

Matches upstream

Open on its own page (opens in new tab)

Choose location

This can be different to where you went before

Razor Pages and MVC

<nhsuk-select
    label-options="@(new LabelOptions
    {
        Heading = "Choose location",
        Size = "l",
    })"
    hint="This can be different to where you went before"
    id="with-hint"
    name="example"
    items="@([
        new SelectItemsItem
        {
            Value = "choose",
            Text = "Choose location",
        },
        new SelectItemsItem
        {
            Value = "eastmidlands",
            Text = "East Midlands",
        },
        new SelectItemsItem
        {
            Value = "eastofengland",
            Text = "East of England",
        },
        new SelectItemsItem
        {
            Value = "london",
            Text = "London",
        },
        new SelectItemsItem
        {
            Value = "northeast",
            Text = "North East",
        },
        new SelectItemsItem
        {
            Value = "northwest",
            Text = "North West",
        },
        new SelectItemsItem
        {
            Value = "southeast",
            Text = "South East",
        },
        new SelectItemsItem
        {
            Value = "southwest",
            Text = "South West",
        },
        new SelectItemsItem
        {
            Value = "westmidlands",
            Text = "West Midlands",
        },
        new SelectItemsItem
        {
            Value = "yorkshire",
            Text = "Yorkshire and the Humber",
        },
    ])"
/>

Blazor

<NhsukSelect
    Label="@(new LabelOptions
    {
        Heading = "Choose location",
        Size = "l",
    })"
    Hint="@(new HintOptions
    {
        Text = "This can be different to where you went before",
    })"
    Id="with-hint"
    Name="example"
    Items="@([
        new SelectItemsItem
        {
            Value = "choose",
            Text = "Choose location",
        },
        new SelectItemsItem
        {
            Value = "eastmidlands",
            Text = "East Midlands",
        },
        new SelectItemsItem
        {
            Value = "eastofengland",
            Text = "East of England",
        },
        new SelectItemsItem
        {
            Value = "london",
            Text = "London",
        },
        new SelectItemsItem
        {
            Value = "northeast",
            Text = "North East",
        },
        new SelectItemsItem
        {
            Value = "northwest",
            Text = "North West",
        },
        new SelectItemsItem
        {
            Value = "southeast",
            Text = "South East",
        },
        new SelectItemsItem
        {
            Value = "southwest",
            Text = "South West",
        },
        new SelectItemsItem
        {
            Value = "westmidlands",
            Text = "West Midlands",
        },
        new SelectItemsItem
        {
            Value = "yorkshire",
            Text = "Yorkshire and the Humber",
        },
    ])"
/>

Nunjucks (upstream)

{% from "nhsuk/components/select/macro.njk" import select %}

{{ select({
  "label": {
    "heading": "Choose location",
    "size": "l"
  },
  "hint": {
    "text": "This can be different to where you went before"
  },
  "id": "with-hint",
  "name": "example",
  "items": [
    {
      "value": "choose",
      "text": "Choose location"
    },
    {
      "value": "eastmidlands",
      "text": "East Midlands"
    },
    {
      "value": "eastofengland",
      "text": "East of England"
    },
    {
      "value": "london",
      "text": "London"
    },
    {
      "value": "northeast",
      "text": "North East"
    },
    {
      "value": "northwest",
      "text": "North West"
    },
    {
      "value": "southeast",
      "text": "South East"
    },
    {
      "value": "southwest",
      "text": "South West"
    },
    {
      "value": "westmidlands",
      "text": "West Midlands"
    },
    {
      "value": "yorkshire",
      "text": "Yorkshire and the Humber"
    }
  ]
}) }}

Without heading

Matches upstream

Open on its own page (opens in new tab)

Sort by

Razor Pages and MVC

<nhsuk-select
    label="Sort by"
    id="without-heading"
    name="example"
    items="@([
        new SelectItemsItem
        {
            Value = "published",
            Text = "Recently published",
        },
        new SelectItemsItem
        {
            Value = "updated",
            Text = "Recently updated",
        },
        new SelectItemsItem
        {
            Value = "views",
            Text = "Most views",
        },
        new SelectItemsItem
        {
            Value = "comments",
            Text = "Most comments",
        },
    ])"
/>

Blazor

<NhsukSelect
    Label="@("Sort by")"
    Id="without-heading"
    Name="example"
    Items="@([
        new SelectItemsItem
        {
            Value = "published",
            Text = "Recently published",
        },
        new SelectItemsItem
        {
            Value = "updated",
            Text = "Recently updated",
        },
        new SelectItemsItem
        {
            Value = "views",
            Text = "Most views",
        },
        new SelectItemsItem
        {
            Value = "comments",
            Text = "Most comments",
        },
    ])"
/>

Nunjucks (upstream)

{% from "nhsuk/components/select/macro.njk" import select %}

{{ select({
  "label": "Sort by",
  "id": "without-heading",
  "name": "example",
  "items": [
    {
      "value": "published",
      "text": "Recently published"
    },
    {
      "value": "updated",
      "text": "Recently updated"
    },
    {
      "value": "views",
      "text": "Most views"
    },
    {
      "value": "comments",
      "text": "Most comments"
    }
  ]
}) }}

With selected value

Matches upstream

Open on its own page (opens in new tab)

Sort by

Razor Pages and MVC

<nhsuk-select
    label-options="@(new LabelOptions
    {
        Heading = "Sort by",
        Size = "l",
    })"
    id="with-value"
    name="example"
    value="updated"
    items="@([
        new SelectItemsItem
        {
            Value = "published",
            Text = "Recently published",
        },
        new SelectItemsItem
        {
            Value = "updated",
            Text = "Recently updated",
        },
        new SelectItemsItem
        {
            Value = "views",
            Text = "Most views",
        },
        new SelectItemsItem
        {
            Value = "comments",
            Text = "Most comments",
        },
    ])"
/>

Blazor

<NhsukSelect
    Label="@(new LabelOptions
    {
        Heading = "Sort by",
        Size = "l",
    })"
    Id="with-value"
    Name="example"
    Value="updated"
    Items="@([
        new SelectItemsItem
        {
            Value = "published",
            Text = "Recently published",
        },
        new SelectItemsItem
        {
            Value = "updated",
            Text = "Recently updated",
        },
        new SelectItemsItem
        {
            Value = "views",
            Text = "Most views",
        },
        new SelectItemsItem
        {
            Value = "comments",
            Text = "Most comments",
        },
    ])"
/>

Nunjucks (upstream)

{% from "nhsuk/components/select/macro.njk" import select %}

{{ select({
  "label": {
    "heading": "Sort by",
    "size": "l"
  },
  "id": "with-value",
  "name": "example",
  "value": "updated",
  "items": [
    {
      "value": "published",
      "text": "Recently published"
    },
    {
      "value": "updated",
      "text": "Recently updated"
    },
    {
      "value": "views",
      "text": "Most views"
    },
    {
      "value": "comments",
      "text": "Most comments"
    }
  ]
}) }}