ComponentInput

44 of 44 upstream examples match. Razor component: <NhsukInput>

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

Default

Matches upstream

What is your full name?

Razor Pages and MVC

<nhsuk-input
    label-options="@(new LabelOptions
    {
        Heading = "What is your full name?",
        Size = "l",
    })"
    name="example"
/>

Blazor

<NhsukInput
    Label="@(new LabelOptions
    {
        Heading = "What is your full name?",
        Size = "l",
    })"
    Name="example"
/>

Nunjucks (upstream)

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

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

Disabled

Matches upstream

Open on its own page (opens in new tab)

What is your full name?

Razor Pages and MVC

<nhsuk-input
    label-options="@(new LabelOptions
    {
        Heading = "What is your full name?",
        Size = "l",
    })"
    name="example"
    disabled="true"
/>

Blazor

<NhsukInput
    Label="@(new LabelOptions
    {
        Heading = "What is your full name?",
        Size = "l",
    })"
    Name="example"
    Disabled="true"
/>

Nunjucks (upstream)

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

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

Label

Matches upstream

with size S

Open on its own page (opens in new tab)

What is your NHS number?

Razor Pages and MVC

<nhsuk-input
    label-options="@(new LabelOptions
    {
        Heading = "What is your NHS number?",
        Size = "s",
    })"
    id="custom-size"
    name="example"
    width="10"
    code="true"
    inputmode="numeric"
    spellcheck="false"
/>

Blazor

<NhsukInput
    Label="@(new LabelOptions
    {
        Heading = "What is your NHS number?",
        Size = "s",
    })"
    Id="custom-size"
    Name="example"
    Width="10"
    Code="true"
    Inputmode="numeric"
    Spellcheck="false"
/>

Nunjucks (upstream)

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

{{ input({
  "label": {
    "heading": "What is your NHS number?",
    "size": "s"
  },
  "id": "custom-size",
  "name": "example",
  "width": 10,
  "code": true,
  "inputmode": "numeric",
  "spellcheck": false
}) }}

Label

Matches upstream

with size M

Open on its own page (opens in new tab)

What is your NHS number?

Razor Pages and MVC

<nhsuk-input
    label-options="@(new LabelOptions
    {
        Heading = "What is your NHS number?",
        Size = "m",
    })"
    id="custom-size"
    name="example"
    width="10"
    code="true"
    inputmode="numeric"
    spellcheck="false"
/>

Blazor

<NhsukInput
    Label="@(new LabelOptions
    {
        Heading = "What is your NHS number?",
        Size = "m",
    })"
    Id="custom-size"
    Name="example"
    Width="10"
    Code="true"
    Inputmode="numeric"
    Spellcheck="false"
/>

Nunjucks (upstream)

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

{{ input({
  "label": {
    "heading": "What is your NHS number?",
    "size": "m"
  },
  "id": "custom-size",
  "name": "example",
  "width": 10,
  "code": true,
  "inputmode": "numeric",
  "spellcheck": false
}) }}

Label

Matches upstream

with size L

Open on its own page (opens in new tab)

What is your NHS number?

Razor Pages and MVC

<nhsuk-input
    label-options="@(new LabelOptions
    {
        Heading = "What is your NHS number?",
        Size = "l",
    })"
    id="custom-size"
    name="example"
    width="10"
    code="true"
    inputmode="numeric"
    spellcheck="false"
/>

Blazor

<NhsukInput
    Label="@(new LabelOptions
    {
        Heading = "What is your NHS number?",
        Size = "l",
    })"
    Id="custom-size"
    Name="example"
    Width="10"
    Code="true"
    Inputmode="numeric"
    Spellcheck="false"
/>

Nunjucks (upstream)

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

{{ input({
  "label": {
    "heading": "What is your NHS number?",
    "size": "l"
  },
  "id": "custom-size",
  "name": "example",
  "width": 10,
  "code": true,
  "inputmode": "numeric",
  "spellcheck": false
}) }}

Label

Matches upstream

with size XL

Open on its own page (opens in new tab)

What is your NHS number?

Razor Pages and MVC

<nhsuk-input
    label-options="@(new LabelOptions
    {
        Heading = "What is your NHS number?",
        Size = "xl",
    })"
    id="custom-size"
    name="example"
    width="10"
    code="true"
    inputmode="numeric"
    spellcheck="false"
/>

Blazor

<NhsukInput
    Label="@(new LabelOptions
    {
        Heading = "What is your NHS number?",
        Size = "xl",
    })"
    Id="custom-size"
    Name="example"
    Width="10"
    Code="true"
    Inputmode="numeric"
    Spellcheck="false"
/>

Nunjucks (upstream)

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

{{ input({
  "label": {
    "heading": "What is your NHS number?",
    "size": "xl"
  },
  "id": "custom-size",
  "name": "example",
  "width": 10,
  "code": true,
  "inputmode": "numeric",
  "spellcheck": false
}) }}

Width

Matches upstream

with 2 character

Open on its own page (opens in new tab)

2 character width

Razor Pages and MVC

<nhsuk-input
    name="example"
    id="input-width"
    label="2 character width"
    width="2"
/>

Blazor

<NhsukInput
    Name="example"
    Id="input-width"
    Label="@(new LabelOptions
    {
        Text = "2 character width",
    })"
    Width="2"
/>

Nunjucks (upstream)

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

{{ input({
  "name": "example",
  "id": "input-width",
  "label": {
    "text": "2 character width"
  },
  "width": 2
}) }}

Width

Matches upstream

with 3 character

Open on its own page (opens in new tab)

3 character width

Razor Pages and MVC

<nhsuk-input
    name="example"
    id="input-width"
    label="3 character width"
    width="3"
/>

Blazor

<NhsukInput
    Name="example"
    Id="input-width"
    Label="@(new LabelOptions
    {
        Text = "3 character width",
    })"
    Width="3"
/>

Nunjucks (upstream)

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

{{ input({
  "name": "example",
  "id": "input-width",
  "label": {
    "text": "3 character width"
  },
  "width": 3
}) }}

Width

Matches upstream

with 4 character

Open on its own page (opens in new tab)

4 character width

Razor Pages and MVC

<nhsuk-input
    name="example"
    id="input-width"
    label="4 character width"
    width="4"
/>

Blazor

<NhsukInput
    Name="example"
    Id="input-width"
    Label="@(new LabelOptions
    {
        Text = "4 character width",
    })"
    Width="4"
/>

Nunjucks (upstream)

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

{{ input({
  "name": "example",
  "id": "input-width",
  "label": {
    "text": "4 character width"
  },
  "width": 4
}) }}

Width

Matches upstream

with 5 character

Open on its own page (opens in new tab)

5 character width

Razor Pages and MVC

<nhsuk-input
    name="example"
    id="input-width"
    label="5 character width"
    width="5"
/>

Blazor

<NhsukInput
    Name="example"
    Id="input-width"
    Label="@(new LabelOptions
    {
        Text = "5 character width",
    })"
    Width="5"
/>

Nunjucks (upstream)

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

{{ input({
  "name": "example",
  "id": "input-width",
  "label": {
    "text": "5 character width"
  },
  "width": 5
}) }}

Width

Matches upstream

with 10 character

Open on its own page (opens in new tab)

10 character width

Razor Pages and MVC

<nhsuk-input
    name="example"
    id="input-width"
    label="10 character width"
    width="10"
/>

Blazor

<NhsukInput
    Name="example"
    Id="input-width"
    Label="@(new LabelOptions
    {
        Text = "10 character width",
    })"
    Width="10"
/>

Nunjucks (upstream)

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

{{ input({
  "name": "example",
  "id": "input-width",
  "label": {
    "text": "10 character width"
  },
  "width": 10
}) }}

Width

Matches upstream

with 20 character

Open on its own page (opens in new tab)

20 character width

Razor Pages and MVC

<nhsuk-input
    name="example"
    id="input-width"
    label="20 character width"
    width="20"
/>

Blazor

<NhsukInput
    Name="example"
    Id="input-width"
    Label="@(new LabelOptions
    {
        Text = "20 character width",
    })"
    Width="20"
/>

Nunjucks (upstream)

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

{{ input({
  "name": "example",
  "id": "input-width",
  "label": {
    "text": "20 character width"
  },
  "width": 20
}) }}

Width

Matches upstream

with 30 character

Open on its own page (opens in new tab)

30 character width

Razor Pages and MVC

<nhsuk-input
    name="example"
    id="input-width"
    label="30 character width"
    width="30"
/>

Blazor

<NhsukInput
    Name="example"
    Id="input-width"
    Label="@(new LabelOptions
    {
        Text = "30 character width",
    })"
    Width="30"
/>

Nunjucks (upstream)

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

{{ input({
  "name": "example",
  "id": "input-width",
  "label": {
    "text": "30 character width"
  },
  "width": 30
}) }}

Width class

Matches upstream

Open on its own page (opens in new tab)

What is your NHS number?

Razor Pages and MVC

<nhsuk-input
    label-options="@(new LabelOptions
    {
        Heading = "What is your NHS number?",
        Size = "l",
    })"
    id="input-width"
    name="example"
    classes="nhsuk-input--width-10"
/>

Blazor

<NhsukInput
    Label="@(new LabelOptions
    {
        Heading = "What is your NHS number?",
        Size = "l",
    })"
    Id="input-width"
    Name="example"
    Classes="nhsuk-input--width-10"
/>

Nunjucks (upstream)

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

{{ input({
  "label": {
    "heading": "What is your NHS number?",
    "size": "l"
  },
  "id": "input-width",
  "name": "example",
  "classes": "nhsuk-input--width-10"
}) }}

Width class overriding width option

Matches upstream

Open on its own page (opens in new tab)

What is your NHS number?

Razor Pages and MVC

<nhsuk-input
    label-options="@(new LabelOptions
    {
        Heading = "What is your NHS number?",
        Size = "l",
    })"
    id="input-width"
    name="example"
    classes="nhsuk-input--width-10"
    width="30"
/>

Blazor

<NhsukInput
    Label="@(new LabelOptions
    {
        Heading = "What is your NHS number?",
        Size = "l",
    })"
    Id="input-width"
    Name="example"
    Classes="nhsuk-input--width-10"
    Width="30"
/>

Nunjucks (upstream)

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

{{ input({
  "label": {
    "heading": "What is your NHS number?",
    "size": "l"
  },
  "id": "input-width",
  "name": "example",
  "classes": "nhsuk-input--width-10",
  "width": 30
}) }}

With autocomplete attribute

Matches upstream

Open on its own page (opens in new tab)

Enter a full postcode in England

For example, LS1 1AB

Razor Pages and MVC

<nhsuk-input
    label-options="@(new LabelOptions
    {
        Heading = "Enter a full postcode in England",
    })"
    hint="For example, LS1 1AB"
    id="with-autocomplete-attribute"
    name="example"
    autocomplete="postal-code"
/>

Blazor

<NhsukInput
    Label="@(new LabelOptions
    {
        Heading = "Enter a full postcode in England",
    })"
    Hint="@(new HintOptions
    {
        Text = "For example, LS1 1AB",
    })"
    Id="with-autocomplete-attribute"
    Name="example"
    Autocomplete="postal-code"
/>

Nunjucks (upstream)

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

{{ input({
  "label": {
    "heading": "Enter a full postcode in England"
  },
  "hint": {
    "text": "For example, LS1 1AB"
  },
  "id": "with-autocomplete-attribute",
  "name": "example",
  "autocomplete": "postal-code"
}) }}

With button

Matches upstream

Open on its own page (opens in new tab)

What is your NHS number?

Razor Pages and MVC

<nhsuk-input
    label-options="@(new LabelOptions
    {
        Heading = "What is your NHS number?",
        Size = "l",
    })"
    id="with-button"
    name="example"
    width="10"
    code="true"
    inputmode="numeric"
    spellcheck="false"
    form-group="@(new InputFormGroupOptions
    {
        AfterInput = new InputFormGroupAfterInputOptions
        {
            Html = @"<button class=""nhsuk-button nhsuk-button--secondary nhsuk-button--small"" data-module=""nhsuk-button"" type=""submit"">
  Search
</button>
",
        },
    })"
/>

Blazor

<NhsukInput
    Label="@(new LabelOptions
    {
        Heading = "What is your NHS number?",
        Size = "l",
    })"
    Id="with-button"
    Name="example"
    Width="10"
    Code="true"
    Inputmode="numeric"
    Spellcheck="false"
    FormGroup="@(new InputFormGroupOptions
    {
        AfterInput = new InputFormGroupAfterInputOptions
        {
            Html = @"<button class=""nhsuk-button nhsuk-button--secondary nhsuk-button--small"" data-module=""nhsuk-button"" type=""submit"">
  Search
</button>
",
        },
    })"
/>

Nunjucks (upstream)

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

{{ input({
  "label": {
    "heading": "What is your NHS number?",
    "size": "l"
  },
  "id": "with-button",
  "name": "example",
  "width": 10,
  "code": true,
  "inputmode": "numeric",
  "spellcheck": false,
  "formGroup": {
    "afterInput": {
      "html": "<button class=\"nhsuk-button nhsuk-button--secondary nhsuk-button--small\" data-module=\"nhsuk-button\" type=\"submit\">\n  Search\n</button>\n"
    }
  }
}) }}

With button and error message

Matches upstream

Open on its own page (opens in new tab)

What is your NHS number?

Enter NHS number

Razor Pages and MVC

<nhsuk-input
    label-options="@(new LabelOptions
    {
        Heading = "What is your NHS number?",
        Size = "l",
    })"
    error-message="Enter NHS number"
    id="with-button-error-message"
    name="example"
    width="10"
    code="true"
    inputmode="numeric"
    spellcheck="false"
    form-group="@(new InputFormGroupOptions
    {
        AfterInput = new InputFormGroupAfterInputOptions
        {
            Html = @"<button class=""nhsuk-button nhsuk-button--secondary nhsuk-button--small"" data-module=""nhsuk-button"" type=""submit"">
  Search
</button>
",
        },
    })"
/>

Blazor

<NhsukInput
    Label="@(new LabelOptions
    {
        Heading = "What is your NHS number?",
        Size = "l",
    })"
    ErrorMessage="@(new ErrorMessageOptions
    {
        Text = "Enter NHS number",
    })"
    Id="with-button-error-message"
    Name="example"
    Width="10"
    Code="true"
    Inputmode="numeric"
    Spellcheck="false"
    FormGroup="@(new InputFormGroupOptions
    {
        AfterInput = new InputFormGroupAfterInputOptions
        {
            Html = @"<button class=""nhsuk-button nhsuk-button--secondary nhsuk-button--small"" data-module=""nhsuk-button"" type=""submit"">
  Search
</button>
",
        },
    })"
/>

Nunjucks (upstream)

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

{{ input({
  "label": {
    "heading": "What is your NHS number?",
    "size": "l"
  },
  "errorMessage": {
    "text": "Enter NHS number"
  },
  "id": "with-button-error-message",
  "name": "example",
  "width": 10,
  "code": true,
  "inputmode": "numeric",
  "spellcheck": false,
  "formGroup": {
    "afterInput": {
      "html": "<button class=\"nhsuk-button nhsuk-button--secondary nhsuk-button--small\" data-module=\"nhsuk-button\" type=\"submit\">\n  Search\n</button>\n"
    }
  }
}) }}

With code input styling

Matches upstream

Open on its own page (opens in new tab)

What is your NHS number?

This is a 10 digit number (like 999 123 4567) that you can find on an NHS letter, prescription or in the NHS App

Razor Pages and MVC

<nhsuk-input
    label-options="@(new LabelOptions
    {
        Heading = "What is your NHS number?",
        Size = "l",
    })"
    hint-options="@(new HintOptions
    {
        Html = "This is a 10 digit number (like <span class=\"nhsuk-u-nowrap\">999 123 4567</span>) that you can find on an NHS letter, prescription or in the NHS App",
    })"
    id="with-code-input-styling"
    name="example"
    width="10"
    code="true"
    value="999 123 4567"
    inputmode="numeric"
    spellcheck="false"
/>

Blazor

<NhsukInput
    Label="@(new LabelOptions
    {
        Heading = "What is your NHS number?",
        Size = "l",
    })"
    Hint="@(new HintOptions
    {
        Html = "This is a 10 digit number (like <span class=\"nhsuk-u-nowrap\">999 123 4567</span>) that you can find on an NHS letter, prescription or in the NHS App",
    })"
    Id="with-code-input-styling"
    Name="example"
    Width="10"
    Code="true"
    Value="999 123 4567"
    Inputmode="numeric"
    Spellcheck="false"
/>

Nunjucks (upstream)

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

{{ input({
  "label": {
    "heading": "What is your NHS number?",
    "size": "l"
  },
  "hint": {
    "html": "This is a 10 digit number (like <span class=\"nhsuk-u-nowrap\">999 123 4567</span>) that you can find on an NHS letter, prescription or in the NHS App"
  },
  "id": "with-code-input-styling",
  "name": "example",
  "width": 10,
  "code": true,
  "value": "999 123 4567",
  "inputmode": "numeric",
  "spellcheck": false
}) }}

With error message

Matches upstream

Open on its own page (opens in new tab)

What is your NHS number?

Enter NHS number

Razor Pages and MVC

<nhsuk-input
    label-options="@(new LabelOptions
    {
        Heading = "What is your NHS number?",
        Size = "l",
    })"
    error-message="Enter NHS number"
    id="with-error-message"
    name="example"
    width="10"
    code="true"
    inputmode="numeric"
    spellcheck="false"
/>

Blazor

<NhsukInput
    Label="@(new LabelOptions
    {
        Heading = "What is your NHS number?",
        Size = "l",
    })"
    ErrorMessage="@(new ErrorMessageOptions
    {
        Text = "Enter NHS number",
    })"
    Id="with-error-message"
    Name="example"
    Width="10"
    Code="true"
    Inputmode="numeric"
    Spellcheck="false"
/>

Nunjucks (upstream)

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

{{ input({
  "label": {
    "heading": "What is your NHS number?",
    "size": "l"
  },
  "errorMessage": {
    "text": "Enter NHS number"
  },
  "id": "with-error-message",
  "name": "example",
  "width": 10,
  "code": true,
  "inputmode": "numeric",
  "spellcheck": false
}) }}

With error message and hint

Matches upstream

Open on its own page (opens in new tab)

What is your NHS number?

This is a 10 digit number (like 999 123 4567) that you can find on an NHS letter, prescription or in the NHS App

Enter NHS number

Razor Pages and MVC

<nhsuk-input
    label-options="@(new LabelOptions
    {
        Heading = "What is your NHS number?",
        Size = "l",
    })"
    hint-options="@(new HintOptions
    {
        Html = "This is a 10 digit number (like <span class=\"nhsuk-u-nowrap\">999 123 4567</span>) that you can find on an NHS letter, prescription or in the NHS App",
    })"
    error-message="Enter NHS number"
    id="with-hint-error"
    name="example"
    width="10"
    code="true"
    inputmode="numeric"
    spellcheck="false"
/>

Blazor

<NhsukInput
    Label="@(new LabelOptions
    {
        Heading = "What is your NHS number?",
        Size = "l",
    })"
    Hint="@(new HintOptions
    {
        Html = "This is a 10 digit number (like <span class=\"nhsuk-u-nowrap\">999 123 4567</span>) that you can find on an NHS letter, prescription or in the NHS App",
    })"
    ErrorMessage="@(new ErrorMessageOptions
    {
        Text = "Enter NHS number",
    })"
    Id="with-hint-error"
    Name="example"
    Width="10"
    Code="true"
    Inputmode="numeric"
    Spellcheck="false"
/>

Nunjucks (upstream)

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

{{ input({
  "label": {
    "heading": "What is your NHS number?",
    "size": "l"
  },
  "hint": {
    "html": "This is a 10 digit number (like <span class=\"nhsuk-u-nowrap\">999 123 4567</span>) that you can find on an NHS letter, prescription or in the NHS App"
  },
  "errorMessage": {
    "text": "Enter NHS number"
  },
  "id": "with-hint-error",
  "name": "example",
  "width": 10,
  "code": true,
  "inputmode": "numeric",
  "spellcheck": false
}) }}

With error message and hint as strings

Matches upstream

Open on its own page (opens in new tab)

What is your NHS number?

This is a 10 digit number (like 999 123 4567) that you can find on an NHS letter, prescription or in the NHS App

Enter NHS number

Razor Pages and MVC

<nhsuk-input
    label-options="@(new LabelOptions
    {
        Heading = "What is your NHS number?",
        Size = "l",
    })"
    hint="This is a 10 digit number (like 999 123 4567) that you can find on an NHS letter, prescription or in the NHS App"
    error-message="Enter NHS number"
    id="with-hint-error"
    name="example"
    width="10"
    code="true"
    inputmode="numeric"
    spellcheck="false"
/>

Blazor

<NhsukInput
    Label="@(new LabelOptions
    {
        Heading = "What is your NHS number?",
        Size = "l",
    })"
    Hint="@("This is a 10 digit number (like 999 123 4567) that you can find on an NHS letter, prescription or in the NHS App")"
    ErrorMessage="@("Enter NHS number")"
    Id="with-hint-error"
    Name="example"
    Width="10"
    Code="true"
    Inputmode="numeric"
    Spellcheck="false"
/>

Nunjucks (upstream)

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

{{ input({
  "label": {
    "heading": "What is your NHS number?",
    "size": "l"
  },
  "hint": "This is a 10 digit number (like 999\u00A0123\u00A04567) that you can find on an NHS letter, prescription or in the NHS App",
  "errorMessage": "Enter NHS number",
  "id": "with-hint-error",
  "name": "example",
  "width": 10,
  "code": true,
  "inputmode": "numeric",
  "spellcheck": false
}) }}

With error message and hint, without heading

Matches upstream

Open on its own page (opens in new tab)

What is your NHS number?

This is a 10 digit number (like 999 123 4567) that you can find on an NHS letter, prescription or in the NHS App

Enter NHS number

Razor Pages and MVC

<nhsuk-input
    label="What is your NHS number?"
    hint-options="@(new HintOptions
    {
        Html = "This is a 10 digit number (like <span class=\"nhsuk-u-nowrap\">999 123 4567</span>) that you can find on an NHS letter, prescription or in the NHS App",
    })"
    error-message="Enter NHS number"
    id="with-hint-error"
    name="example"
    width="10"
    code="true"
    inputmode="numeric"
    spellcheck="false"
/>

Blazor

<NhsukInput
    Label="@(new LabelOptions
    {
        Text = "What is your NHS number?",
    })"
    Hint="@(new HintOptions
    {
        Html = "This is a 10 digit number (like <span class=\"nhsuk-u-nowrap\">999 123 4567</span>) that you can find on an NHS letter, prescription or in the NHS App",
    })"
    ErrorMessage="@(new ErrorMessageOptions
    {
        Text = "Enter NHS number",
    })"
    Id="with-hint-error"
    Name="example"
    Width="10"
    Code="true"
    Inputmode="numeric"
    Spellcheck="false"
/>

Nunjucks (upstream)

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

{{ input({
  "label": {
    "text": "What is your NHS number?"
  },
  "hint": {
    "html": "This is a 10 digit number (like <span class=\"nhsuk-u-nowrap\">999 123 4567</span>) that you can find on an NHS letter, prescription or in the NHS App"
  },
  "errorMessage": {
    "text": "Enter NHS number"
  },
  "id": "with-hint-error",
  "name": "example",
  "width": 10,
  "code": true,
  "inputmode": "numeric",
  "spellcheck": false
}) }}

With error message, without heading

Matches upstream

Open on its own page (opens in new tab)

What is your NHS number?Enter NHS number

Razor Pages and MVC

<nhsuk-input
    label="What is your NHS number?"
    error-message="Enter NHS number"
    id="with-error-message"
    name="example"
    width="10"
    code="true"
    inputmode="numeric"
    spellcheck="false"
/>

Blazor

<NhsukInput
    Label="@(new LabelOptions
    {
        Text = "What is your NHS number?",
    })"
    ErrorMessage="@(new ErrorMessageOptions
    {
        Text = "Enter NHS number",
    })"
    Id="with-error-message"
    Name="example"
    Width="10"
    Code="true"
    Inputmode="numeric"
    Spellcheck="false"
/>

Nunjucks (upstream)

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

{{ input({
  "label": {
    "text": "What is your NHS number?"
  },
  "errorMessage": {
    "text": "Enter NHS number"
  },
  "id": "with-error-message",
  "name": "example",
  "width": 10,
  "code": true,
  "inputmode": "numeric",
  "spellcheck": false
}) }}

With error only

Matches upstream

Open on its own page (opens in new tab)

What is your NHS number?

Razor Pages and MVC

<nhsuk-input
    label-options="@(new LabelOptions
    {
        Heading = "What is your NHS number?",
        Size = "l",
    })"
    error-message-options="@(true)"
    id="with-error-only"
    name="example"
    width="10"
    code="true"
    inputmode="numeric"
    spellcheck="false"
/>

Blazor

<NhsukInput
    Label="@(new LabelOptions
    {
        Heading = "What is your NHS number?",
        Size = "l",
    })"
    ErrorMessage="@(true)"
    Id="with-error-only"
    Name="example"
    Width="10"
    Code="true"
    Inputmode="numeric"
    Spellcheck="false"
/>

Nunjucks (upstream)

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

{{ input({
  "label": {
    "heading": "What is your NHS number?",
    "size": "l"
  },
  "errorMessage": true,
  "id": "with-error-only",
  "name": "example",
  "width": 10,
  "code": true,
  "inputmode": "numeric",
  "spellcheck": false
}) }}

With hint

Matches upstream

Open on its own page (opens in new tab)

What is your NHS number?

This is a 10 digit number (like 999 123 4567) that you can find on an NHS letter, prescription or in the NHS App

Razor Pages and MVC

<nhsuk-input
    label-options="@(new LabelOptions
    {
        Heading = "What is your NHS number?",
        Size = "l",
    })"
    hint-options="@(new HintOptions
    {
        Html = "This is a 10 digit number (like <span class=\"nhsuk-u-nowrap\">999 123 4567</span>) that you can find on an NHS letter, prescription or in the NHS App",
    })"
    id="with-hint"
    name="example"
    width="10"
    code="true"
    inputmode="numeric"
    spellcheck="false"
/>

Blazor

<NhsukInput
    Label="@(new LabelOptions
    {
        Heading = "What is your NHS number?",
        Size = "l",
    })"
    Hint="@(new HintOptions
    {
        Html = "This is a 10 digit number (like <span class=\"nhsuk-u-nowrap\">999 123 4567</span>) that you can find on an NHS letter, prescription or in the NHS App",
    })"
    Id="with-hint"
    Name="example"
    Width="10"
    Code="true"
    Inputmode="numeric"
    Spellcheck="false"
/>

Nunjucks (upstream)

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

{{ input({
  "label": {
    "heading": "What is your NHS number?",
    "size": "l"
  },
  "hint": {
    "html": "This is a 10 digit number (like <span class=\"nhsuk-u-nowrap\">999 123 4567</span>) that you can find on an NHS letter, prescription or in the NHS App"
  },
  "id": "with-hint",
  "name": "example",
  "width": 10,
  "code": true,
  "inputmode": "numeric",
  "spellcheck": false
}) }}

Without heading

Matches upstream

Open on its own page (opens in new tab)

What is your NHS number?

Razor Pages and MVC

<nhsuk-input
    label="What is your NHS number?"
    id="without-heading"
    name="example"
    width="10"
    code="true"
    inputmode="numeric"
    spellcheck="false"
/>

Blazor

<NhsukInput
    Label="@("What is your NHS number?")"
    Id="without-heading"
    Name="example"
    Width="10"
    Code="true"
    Inputmode="numeric"
    Spellcheck="false"
/>

Nunjucks (upstream)

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

{{ input({
  "label": "What is your NHS number?",
  "id": "without-heading",
  "name": "example",
  "width": 10,
  "code": true,
  "inputmode": "numeric",
  "spellcheck": false
}) }}

With prefix

Matches upstream

Open on its own page (opens in new tab)

Cost in pounds

Razor Pages and MVC

<nhsuk-input
    label-options="@(new LabelOptions
    {
        Heading = "Cost in pounds",
    })"
    id="with-prefix"
    name="example"
    prefix="£"
    width="5"
/>

Blazor

<NhsukInput
    Label="@(new LabelOptions
    {
        Heading = "Cost in pounds",
    })"
    Id="with-prefix"
    Name="example"
    Prefix="@(new InputPrefixOptions
    {
        Text = "£",
    })"
    Width="5"
/>

Nunjucks (upstream)

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

{{ input({
  "label": {
    "heading": "Cost in pounds"
  },
  "id": "with-prefix",
  "name": "example",
  "prefix": {
    "text": "£"
  },
  "width": 5
}) }}

With prefix and suffix

Matches upstream

Open on its own page (opens in new tab)

Cost per item, in pounds

Razor Pages and MVC

<nhsuk-input
    label-options="@(new LabelOptions
    {
        Heading = "Cost per item, in pounds",
    })"
    id="with-prefix-suffix"
    name="example"
    prefix="£"
    suffix="per item"
    width="5"
/>

Blazor

<NhsukInput
    Label="@(new LabelOptions
    {
        Heading = "Cost per item, in pounds",
    })"
    Id="with-prefix-suffix"
    Name="example"
    Prefix="@(new InputPrefixOptions
    {
        Text = "£",
    })"
    Suffix="@(new InputSuffixOptions
    {
        Text = "per item",
    })"
    Width="5"
/>

Nunjucks (upstream)

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

{{ input({
  "label": {
    "heading": "Cost per item, in pounds"
  },
  "id": "with-prefix-suffix",
  "name": "example",
  "prefix": {
    "text": "£"
  },
  "suffix": {
    "text": "per item"
  },
  "width": 5
}) }}

With prefix and suffix and error message

Matches upstream

Open on its own page (opens in new tab)

Cost per item, in pounds

Enter a cost per item, in pounds

Razor Pages and MVC

<nhsuk-input
    label-options="@(new LabelOptions
    {
        Heading = "Cost per item, in pounds",
    })"
    error-message="Enter a cost per item, in pounds"
    id="with-prefix-suffix"
    name="example"
    prefix="£"
    suffix="per item"
    width="5"
/>

Blazor

<NhsukInput
    Label="@(new LabelOptions
    {
        Heading = "Cost per item, in pounds",
    })"
    ErrorMessage="@(new ErrorMessageOptions
    {
        Text = "Enter a cost per item, in pounds",
    })"
    Id="with-prefix-suffix"
    Name="example"
    Prefix="@(new InputPrefixOptions
    {
        Text = "£",
    })"
    Suffix="@(new InputSuffixOptions
    {
        Text = "per item",
    })"
    Width="5"
/>

Nunjucks (upstream)

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

{{ input({
  "label": {
    "heading": "Cost per item, in pounds"
  },
  "errorMessage": {
    "text": "Enter a cost per item, in pounds"
  },
  "id": "with-prefix-suffix",
  "name": "example",
  "prefix": {
    "text": "£"
  },
  "suffix": {
    "text": "per item"
  },
  "width": 5
}) }}

With prefix as string

Matches upstream

Open on its own page (opens in new tab)

Cost in pounds

Razor Pages and MVC

<nhsuk-input
    label-options="@(new LabelOptions
    {
        Heading = "Cost in pounds",
    })"
    id="with-prefix"
    name="example"
    prefix="£"
    width="5"
/>

Blazor

<NhsukInput
    Label="@(new LabelOptions
    {
        Heading = "Cost in pounds",
    })"
    Id="with-prefix"
    Name="example"
    Prefix="@("£")"
    Width="5"
/>

Nunjucks (upstream)

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

{{ input({
  "label": {
    "heading": "Cost in pounds"
  },
  "id": "with-prefix",
  "name": "example",
  "prefix": "£",
  "width": 5
}) }}

With prefix HTML

Matches upstream

Open on its own page (opens in new tab)

Cost in pounds

Razor Pages and MVC

<nhsuk-input
    label-options="@(new LabelOptions
    {
        Heading = "Cost in pounds",
    })"
    id="with-prefix"
    name="example"
    prefix-options="@(new InputPrefixOptions
    {
        Html = "<span>£</span>",
    })"
    width="5"
/>

Blazor

<NhsukInput
    Label="@(new LabelOptions
    {
        Heading = "Cost in pounds",
    })"
    Id="with-prefix"
    Name="example"
    Prefix="@(new InputPrefixOptions
    {
        Html = "<span>£</span>",
    })"
    Width="5"
/>

Nunjucks (upstream)

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

{{ input({
  "label": {
    "heading": "Cost in pounds"
  },
  "id": "with-prefix",
  "name": "example",
  "prefix": {
    "html": "<span>£</span>"
  },
  "width": 5
}) }}

With suffix

Matches upstream

Open on its own page (opens in new tab)

Weight in kilograms

Razor Pages and MVC

<nhsuk-input
    label-options="@(new LabelOptions
    {
        Heading = "Weight in kilograms",
    })"
    id="with-suffix"
    name="example"
    suffix="kg"
    width="5"
/>

Blazor

<NhsukInput
    Label="@(new LabelOptions
    {
        Heading = "Weight in kilograms",
    })"
    Id="with-suffix"
    Name="example"
    Suffix="@(new InputSuffixOptions
    {
        Text = "kg",
    })"
    Width="5"
/>

Nunjucks (upstream)

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

{{ input({
  "label": {
    "heading": "Weight in kilograms"
  },
  "id": "with-suffix",
  "name": "example",
  "suffix": {
    "text": "kg"
  },
  "width": 5
}) }}

With suffix as string

Matches upstream

Open on its own page (opens in new tab)

Weight in kilograms

Razor Pages and MVC

<nhsuk-input
    label-options="@(new LabelOptions
    {
        Heading = "Weight in kilograms",
    })"
    id="with-suffix"
    name="example"
    suffix="kg"
    width="5"
/>

Blazor

<NhsukInput
    Label="@(new LabelOptions
    {
        Heading = "Weight in kilograms",
    })"
    Id="with-suffix"
    Name="example"
    Suffix="@("kg")"
    Width="5"
/>

Nunjucks (upstream)

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

{{ input({
  "label": {
    "heading": "Weight in kilograms"
  },
  "id": "with-suffix",
  "name": "example",
  "suffix": "kg",
  "width": 5
}) }}

With suffix HTML

Matches upstream

Open on its own page (opens in new tab)

Weight in kilograms

Razor Pages and MVC

<nhsuk-input
    label-options="@(new LabelOptions
    {
        Heading = "Weight in kilograms",
    })"
    id="with-suffix"
    name="example"
    suffix-options="@(new InputSuffixOptions
    {
        Html = "<span>kg</span>",
    })"
    width="5"
/>

Blazor

<NhsukInput
    Label="@(new LabelOptions
    {
        Heading = "Weight in kilograms",
    })"
    Id="with-suffix"
    Name="example"
    Suffix="@(new InputSuffixOptions
    {
        Html = "<span>kg</span>",
    })"
    Width="5"
/>

Nunjucks (upstream)

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

{{ input({
  "label": {
    "heading": "Weight in kilograms"
  },
  "id": "with-suffix",
  "name": "example",
  "suffix": {
    "html": "<span>kg</span>"
  },
  "width": 5
}) }}