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

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

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

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

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

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

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

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

<nhsuk-input label="Address line 1" name="address-line1" autocomplete="address-line1" />

<NhsukInput
    Label="@(new LabelOptions
    {
        Text = "Address line 1",
    })"
    Name="address-line1"
    Autocomplete="address-line1"
/>

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

{{ input({
  "label": {
    "text": "Address line 1"
  },
  "name": "address-line1",
  "autocomplete": "address-line1"
}) }}

<nhsuk-input
    label="Address line 2 (optional)"
    name="address-line2"
    autocomplete="address-line2"
/>

<NhsukInput
    Label="@(new LabelOptions
    {
        Text = "Address line 2 (optional)",
    })"
    Name="address-line2"
    Autocomplete="address-line2"
/>

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

{{ input({
  "label": {
    "text": "Address line 2 (optional)"
  },
  "name": "address-line2",
  "autocomplete": "address-line2"
}) }}

<nhsuk-input
    label="Postcode"
    name="address-postcode"
    autocomplete="postal-code"
    width="10"
/>

<NhsukInput
    Label="@(new LabelOptions
    {
        Text = "Postcode",
    })"
    Name="address-postcode"
    Autocomplete="postal-code"
    Width="10"
/>

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

{{ input({
  "label": {
    "text": "Postcode"
  },
  "name": "address-postcode",
  "autocomplete": "postal-code",
  "width": 10
}) }}

<nhsuk-input
    label="Town or city"
    name="address-town"
    autocomplete="address-level2"
    classes="nhsuk-u-width-two-thirds"
/>

<NhsukInput
    Label="@(new LabelOptions
    {
        Text = "Town or city",
    })"
    Name="address-town"
    Autocomplete="address-level2"
    Classes="nhsuk-u-width-two-thirds"
/>

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

{{ input({
  "label": {
    "text": "Town or city"
  },
  "name": "address-town",
  "autocomplete": "address-level2",
  "classes": "nhsuk-u-width-two-thirds"
}) }}

<nhsuk-input
    label="Email address"
    name="contact-by-email"
    classes="nhsuk-u-width-two-thirds"
    spellcheck="false"
/>

<NhsukInput
    Label="@(new LabelOptions
    {
        Text = "Email address",
    })"
    Name="contact-by-email"
    Classes="nhsuk-u-width-two-thirds"
    Spellcheck="false"
/>

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

{{ input({
  "label": {
    "text": "Email address"
  },
  "name": "contact-by-email",
  "classes": "nhsuk-u-width-two-thirds",
  "spellcheck": false
}) }}

<nhsuk-input
    label="Mobile phone number"
    type="tel"
    name="contact-by-text"
    classes="nhsuk-u-width-two-thirds"
/>

<NhsukInput
    Label="@(new LabelOptions
    {
        Text = "Mobile phone number",
    })"
    Type="tel"
    Name="contact-by-text"
    Classes="nhsuk-u-width-two-thirds"
/>

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

{{ input({
  "label": {
    "text": "Mobile phone number"
  },
  "type": "tel",
  "name": "contact-by-text",
  "classes": "nhsuk-u-width-two-thirds"
}) }}

<nhsuk-input
    label="Phone number"
    type="tel"
    name="contact-by-phone"
    classes="nhsuk-u-width-two-thirds"
/>

<NhsukInput
    Label="@(new LabelOptions
    {
        Text = "Phone number",
    })"
    Type="tel"
    Name="contact-by-phone"
    Classes="nhsuk-u-width-two-thirds"
/>

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

{{ input({
  "label": {
    "text": "Phone number"
  },
  "type": "tel",
  "name": "contact-by-phone",
  "classes": "nhsuk-u-width-two-thirds"
}) }}

<nhsuk-input
    label="Phone number"
    error-message="Enter your phone number"
    type="tel"
    name="contact-by-phone"
    classes="nhsuk-u-width-two-thirds"
/>

<NhsukInput
    Label="@(new LabelOptions
    {
        Text = "Phone number",
    })"
    ErrorMessage="@(new ErrorMessageOptions
    {
        Text = "Enter your phone number",
    })"
    Type="tel"
    Name="contact-by-phone"
    Classes="nhsuk-u-width-two-thirds"
/>

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

{{ input({
  "label": {
    "text": "Phone number"
  },
  "errorMessage": {
    "text": "Enter your phone number"
  },
  "type": "tel",
  "name": "contact-by-phone",
  "classes": "nhsuk-u-width-two-thirds"
}) }}

<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"
/>

<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"
/>

{% 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
}) }}

<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"
/>

<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"
/>

{% 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
}) }}

<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"
/>

<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"
/>

{% 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
}) }}

<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"
/>

<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"
/>

{% 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
}) }}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

{% 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"
}) }}

<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"
/>

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

{% 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
}) }}

<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"
/>

<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"
/>

{% 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"
}) }}

<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>
",
        },
    })"
/>

<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>
",
        },
    })"
/>

{% 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"
    }
  }
}) }}

<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>
",
        },
    })"
/>

<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>
",
        },
    })"
/>

{% 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"
    }
  }
}) }}

<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"
/>

<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"
/>

{% 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
}) }}

<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"
/>

<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"
/>

{% 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
}) }}

<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"
/>

<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"
/>

{% 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
}) }}

<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"
/>

<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"
/>

{% 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
}) }}

<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"
/>

<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"
/>

{% 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
}) }}

<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"
/>

<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"
/>

{% 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
}) }}

<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"
/>

<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"
/>

{% 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
}) }}

<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"
/>

<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"
/>

{% 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
}) }}

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

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

{% 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
}) }}

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

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

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

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

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

<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"
/>

{% 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
}) }}

<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"
/>

<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"
/>

{% 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
}) }}

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

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

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

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

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

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

{% 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
}) }}

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

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

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

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

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

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

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

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

<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"
/>

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

{% 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
}) }}