Skip to main content
All components

ComponentSearch input

26 of 26 upstream examples match. Razor component: <NhsukSearchInput>

Default

Matches upstream

Open on its own page (opens in new tab)

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-search-input
    label-options="@(new LabelOptions
    {
        Heading = "Search by NHS number",
        Size = "m",
    })"
    placeholder="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",
    })"
    name="example"
    width="20"
/>
Blazor 
<NhsukSearchInput
    Label="@(new LabelOptions
    {
        Heading = "Search by NHS number",
        Size = "m",
    })"
    Placeholder="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",
    })"
    Name="example"
    Width="20"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/search-input/macro.njk" import searchInput %}

{{ searchInput({
  "label": {
    "heading": "Search by NHS number",
    "size": "m"
  },
  "placeholder": "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"
  },
  "name": "example",
  "width": 20
}) }}

Disabled

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC 
<nhsuk-search-input
    label-options="@(new LabelOptions
    {
        Heading = "Search by NHS number",
        Size = "m",
    })"
    placeholder="NHS number"
    name="example"
    disabled="true"
/>
Blazor 
<NhsukSearchInput
    Label="@(new LabelOptions
    {
        Heading = "Search by NHS number",
        Size = "m",
    })"
    Placeholder="NHS number"
    Name="example"
    Disabled="true"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/search-input/macro.njk" import searchInput %}

{{ searchInput({
  "label": {
    "heading": "Search by NHS number",
    "size": "m"
  },
  "placeholder": "NHS number",
  "name": "example",
  "disabled": true
}) }}

Disabled button

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC 
<nhsuk-search-input
    label-options="@(new LabelOptions
    {
        Heading = "Search by NHS number",
        Size = "m",
    })"
    placeholder="NHS number"
    name="example"
    button-options="@(new ButtonOptions
    {
        Disabled = true,
    })"
/>
Blazor 
<NhsukSearchInput
    Label="@(new LabelOptions
    {
        Heading = "Search by NHS number",
        Size = "m",
    })"
    Placeholder="NHS number"
    Name="example"
    Button="@(new ButtonOptions
    {
        Disabled = true,
    })"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/search-input/macro.njk" import searchInput %}

{{ searchInput({
  "label": {
    "heading": "Search by NHS number",
    "size": "m"
  },
  "placeholder": "NHS number",
  "name": "example",
  "button": {
    "disabled": true
  }
}) }}

Disabled with enabled button

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC 
<nhsuk-search-input
    label-options="@(new LabelOptions
    {
        Heading = "Search by NHS number",
        Size = "m",
    })"
    placeholder="NHS number"
    name="example"
    disabled="true"
    button-options="@(new ButtonOptions
    {
        Disabled = false,
    })"
/>
Blazor 
<NhsukSearchInput
    Label="@(new LabelOptions
    {
        Heading = "Search by NHS number",
        Size = "m",
    })"
    Placeholder="NHS number"
    Name="example"
    Disabled="true"
    Button="@(new ButtonOptions
    {
        Disabled = false,
    })"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/search-input/macro.njk" import searchInput %}

{{ searchInput({
  "label": {
    "heading": "Search by NHS number",
    "size": "m"
  },
  "placeholder": "NHS number",
  "name": "example",
  "disabled": true,
  "button": {
    "disabled": false
  }
}) }}

Large

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC 
<nhsuk-search-input
    label-options="@(new LabelOptions
    {
        Heading = "Search by NHS number",
        Size = "l",
    })"
    name="example"
    large="true"
    width="30"
/>
Blazor 
<NhsukSearchInput
    Label="@(new LabelOptions
    {
        Heading = "Search by NHS number",
        Size = "l",
    })"
    Name="example"
    Large="true"
    Width="30"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/search-input/macro.njk" import searchInput %}

{{ searchInput({
  "label": {
    "heading": "Search by NHS number",
    "size": "l"
  },
  "name": "example",
  "large": true,
  "width": 30
}) }}

Large with brand button

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC 
<nhsuk-search-input
    label-options="@(new LabelOptions
    {
        Heading = "Search by NHS number",
        Size = "l",
    })"
    button-options="@(new ButtonOptions
    {
        Variant = "brand",
    })"
    name="example"
    large="true"
    width="30"
/>
Blazor 
<NhsukSearchInput
    Label="@(new LabelOptions
    {
        Heading = "Search by NHS number",
        Size = "l",
    })"
    Button="@(new ButtonOptions
    {
        Variant = "brand",
    })"
    Name="example"
    Large="true"
    Width="30"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/search-input/macro.njk" import searchInput %}

{{ searchInput({
  "label": {
    "heading": "Search by NHS number",
    "size": "l"
  },
  "button": {
    "variant": "brand"
  },
  "name": "example",
  "large": true,
  "width": 30
}) }}

With alternative icon

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC 
<nhsuk-search-input
    label-options="@(new LabelOptions
    {
        Heading = "Search by postcode",
        Size = "m",
    })"
    button-options="@(new ButtonOptions
    {
        Icon = "arrow-right",
    })"
    name="example"
    width="10"
/>
Blazor 
<NhsukSearchInput
    Label="@(new LabelOptions
    {
        Heading = "Search by postcode",
        Size = "m",
    })"
    Button="@(new ButtonOptions
    {
        Icon = "arrow-right",
    })"
    Name="example"
    Width="10"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/search-input/macro.njk" import searchInput %}

{{ searchInput({
  "label": {
    "heading": "Search by postcode",
    "size": "m"
  },
  "button": {
    "icon": "arrow-right"
  },
  "name": "example",
  "width": 10
}) }}

With brand button

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC 
<nhsuk-search-input
    label-options="@(new LabelOptions
    {
        Heading = "Search by NHS number",
        Size = "m",
    })"
    button-options="@(new ButtonOptions
    {
        Variant = "brand",
    })"
    name="example"
    width="20"
/>
Blazor 
<NhsukSearchInput
    Label="@(new LabelOptions
    {
        Heading = "Search by NHS number",
        Size = "m",
    })"
    Button="@(new ButtonOptions
    {
        Variant = "brand",
    })"
    Name="example"
    Width="20"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/search-input/macro.njk" import searchInput %}

{{ searchInput({
  "label": {
    "heading": "Search by NHS number",
    "size": "m"
  },
  "button": {
    "variant": "brand"
  },
  "name": "example",
  "width": 20
}) }}

With brand button text

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC 
<nhsuk-search-input
    label-options="@(new LabelOptions
    {
        Heading = "Search by NHS number",
        Size = "m",
    })"
    button-options="@(new ButtonOptions
    {
        Text = "Search",
        Variant = "brand",
    })"
    name="example"
    width="20"
/>
Blazor 
<NhsukSearchInput
    Label="@(new LabelOptions
    {
        Heading = "Search by NHS number",
        Size = "m",
    })"
    Button="@(new ButtonOptions
    {
        Text = "Search",
        Variant = "brand",
    })"
    Name="example"
    Width="20"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/search-input/macro.njk" import searchInput %}

{{ searchInput({
  "label": {
    "heading": "Search by NHS number",
    "size": "m"
  },
  "button": {
    "text": "Search",
    "variant": "brand"
  },
  "name": "example",
  "width": 20
}) }}

With brand button text only

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC 
<nhsuk-search-input
    label-options="@(new LabelOptions
    {
        Heading = "Product order number",
        Size = "m",
    })"
    button-options="@(new ButtonOptions
    {
        Icon = new ButtonIconOptions { IsFalse = true },
        Text = "Find",
        Variant = "brand",
    })"
    name="example"
    width="20"
/>
Blazor 
<NhsukSearchInput
    Label="@(new LabelOptions
    {
        Heading = "Product order number",
        Size = "m",
    })"
    Button="@(new ButtonOptions
    {
        Icon = new ButtonIconOptions { IsFalse = true },
        Text = "Find",
        Variant = "brand",
    })"
    Name="example"
    Width="20"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/search-input/macro.njk" import searchInput %}

{{ searchInput({
  "label": {
    "heading": "Product order number",
    "size": "m"
  },
  "button": {
    "icon": false,
    "text": "Find",
    "variant": "brand"
  },
  "name": "example",
  "width": 20
}) }}

With error message

Matches upstream

Open on its own page (opens in new tab)

Error: Enter NHS number
Razor Pages and MVC 
<nhsuk-search-input
    label-options="@(new LabelOptions
    {
        Heading = "Search by NHS number",
        Size = "m",
    })"
    error-message="Enter NHS number"
    name="example"
    value="999 123 4567"
    width="20"
/>
Blazor 
<NhsukSearchInput
    Label="@(new LabelOptions
    {
        Heading = "Search by NHS number",
        Size = "m",
    })"
    ErrorMessage="@(new ErrorMessageOptions
    {
        Text = "Enter NHS number",
    })"
    Name="example"
    Value="999 123 4567"
    Width="20"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/search-input/macro.njk" import searchInput %}

{{ searchInput({
  "label": {
    "heading": "Search by NHS number",
    "size": "m"
  },
  "errorMessage": {
    "text": "Enter NHS number"
  },
  "name": "example",
  "value": "999 123 4567",
  "width": 20
}) }}

With error message and hint

Matches upstream

Open on its own page (opens in new tab)

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: Enter NHS number
Razor Pages and MVC 
<nhsuk-search-input
    label-options="@(new LabelOptions
    {
        Heading = "Search by NHS number",
        Size = "m",
    })"
    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"
    name="example"
    value="999 123 4567"
    width="20"
/>
Blazor 
<NhsukSearchInput
    Label="@(new LabelOptions
    {
        Heading = "Search by NHS number",
        Size = "m",
    })"
    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",
    })"
    Name="example"
    Value="999 123 4567"
    Width="20"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/search-input/macro.njk" import searchInput %}

{{ searchInput({
  "label": {
    "heading": "Search by NHS number",
    "size": "m"
  },
  "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"
  },
  "name": "example",
  "value": "999 123 4567",
  "width": 20
}) }}

With error message and hint as strings

Matches upstream

Open on its own page (opens in new tab)

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: Enter NHS number
Razor Pages and MVC 
<nhsuk-search-input
    label-options="@(new LabelOptions
    {
        Heading = "Search by NHS number",
        Size = "m",
    })"
    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"
    name="example"
    value="999 123 4567"
    width="20"
/>
Blazor 
<NhsukSearchInput
    Label="@(new LabelOptions
    {
        Heading = "Search by NHS number",
        Size = "m",
    })"
    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")"
    Name="example"
    Value="999 123 4567"
    Width="20"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/search-input/macro.njk" import searchInput %}

{{ searchInput({
  "label": {
    "heading": "Search by NHS number",
    "size": "m"
  },
  "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",
  "name": "example",
  "value": "999 123 4567",
  "width": 20
}) }}

With error message and hint, without heading

Matches upstream

Open on its own page (opens in new tab)

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: Enter NHS number
Razor Pages and MVC 
<nhsuk-search-input
    label="Search by 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"
    name="example"
    value="999 123 4567"
    width="20"
/>
Blazor 
<NhsukSearchInput
    Label="@(new LabelOptions
    {
        Text = "Search by 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",
    })"
    Name="example"
    Value="999 123 4567"
    Width="20"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/search-input/macro.njk" import searchInput %}

{{ searchInput({
  "label": {
    "text": "Search by 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"
  },
  "name": "example",
  "value": "999 123 4567",
  "width": 20
}) }}

With error message, without heading

Matches upstream

Open on its own page (opens in new tab)

Error: Enter NHS number
Razor Pages and MVC 
<nhsuk-search-input
    label="Search by NHS number"
    error-message="Enter NHS number"
    name="example"
    value="999 123 4567"
    width="20"
/>
Blazor 
<NhsukSearchInput
    Label="@(new LabelOptions
    {
        Text = "Search by NHS number",
    })"
    ErrorMessage="@(new ErrorMessageOptions
    {
        Text = "Enter NHS number",
    })"
    Name="example"
    Value="999 123 4567"
    Width="20"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/search-input/macro.njk" import searchInput %}

{{ searchInput({
  "label": {
    "text": "Search by NHS number"
  },
  "errorMessage": {
    "text": "Enter NHS number"
  },
  "name": "example",
  "value": "999 123 4567",
  "width": 20
}) }}

With error only

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC 
<nhsuk-search-input
    label-options="@(new LabelOptions
    {
        Heading = "Search by NHS number",
        Size = "m",
    })"
    error-message-options="@(true)"
    name="example"
    value="999 123 4567"
    width="20"
/>
Blazor 
<NhsukSearchInput
    Label="@(new LabelOptions
    {
        Heading = "Search by NHS number",
        Size = "m",
    })"
    ErrorMessage="@(true)"
    Name="example"
    Value="999 123 4567"
    Width="20"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/search-input/macro.njk" import searchInput %}

{{ searchInput({
  "label": {
    "heading": "Search by NHS number",
    "size": "m"
  },
  "errorMessage": true,
  "name": "example",
  "value": "999 123 4567",
  "width": 20
}) }}

With hidden label

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC 
<nhsuk-search-input
    label-options="@(new LabelOptions
    {
        Text = "Search by NHS number",
        Classes = "nhsuk-u-visually-hidden",
    })"
    name="example"
    width="20"
/>
Blazor 
<NhsukSearchInput
    Label="@(new LabelOptions
    {
        Text = "Search by NHS number",
        Classes = "nhsuk-u-visually-hidden",
    })"
    Name="example"
    Width="20"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/search-input/macro.njk" import searchInput %}

{{ searchInput({
  "label": {
    "text": "Search by NHS number",
    "classes": "nhsuk-u-visually-hidden"
  },
  "name": "example",
  "width": 20
}) }}

With hint

Matches upstream

Open on its own page (opens in new tab)

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-search-input
    label-options="@(new LabelOptions
    {
        Heading = "Search by NHS number",
        Size = "m",
    })"
    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="20"
/>
Blazor 
<NhsukSearchInput
    Label="@(new LabelOptions
    {
        Heading = "Search by NHS number",
        Size = "m",
    })"
    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="20"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/search-input/macro.njk" import searchInput %}

{{ searchInput({
  "label": {
    "heading": "Search by NHS number",
    "size": "m"
  },
  "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": 20
}) }}

With hint and value

Matches upstream

Open on its own page (opens in new tab)

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-search-input
    label-options="@(new LabelOptions
    {
        Heading = "Search by NHS number",
        Size = "m",
    })"
    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",
    })"
    name="example"
    value="999 123 4567"
    width="20"
/>
Blazor 
<NhsukSearchInput
    Label="@(new LabelOptions
    {
        Heading = "Search by NHS number",
        Size = "m",
    })"
    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",
    })"
    Name="example"
    Value="999 123 4567"
    Width="20"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/search-input/macro.njk" import searchInput %}

{{ searchInput({
  "label": {
    "heading": "Search by NHS number",
    "size": "m"
  },
  "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"
  },
  "name": "example",
  "value": "999 123 4567",
  "width": 20
}) }}

Without button

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC 
<nhsuk-search-input
    label-options="@(new LabelOptions
    {
        Heading = "Search by NHS number",
        Size = "m",
    })"
    button-options="@(new ButtonOptions { IsFalse = true })"
    name="example"
    width="20"
/>
Blazor 
<NhsukSearchInput
    Label="@(new LabelOptions
    {
        Heading = "Search by NHS number",
        Size = "m",
    })"
    Button="@(new ButtonOptions { IsFalse = true })"
    Name="example"
    Width="20"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/search-input/macro.njk" import searchInput %}

{{ searchInput({
  "label": {
    "heading": "Search by NHS number",
    "size": "m"
  },
  "button": false,
  "name": "example",
  "width": 20
}) }}

Without heading

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC 
<nhsuk-search-input label="Search by NHS number" name="example" width="20" />
Blazor 
<NhsukSearchInput Label="@("Search by NHS number")" Name="example" Width="20" />
Nunjucks (upstream) 
{% from "nhsuk/components/search-input/macro.njk" import searchInput %}

{{ searchInput({
  "label": "Search by NHS number",
  "name": "example",
  "width": 20
}) }}

With prefix

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC 
<nhsuk-search-input
    label-options="@(new LabelOptions
    {
        Heading = "Code lookup",
        Size = "m",
    })"
    prefix="SNOMED"
    id="with-prefix"
    name="example"
    value="160245001"
    width="10"
    code="true"
    button-options="@(new ButtonOptions
    {
        Icon = "arrow-right",
        Variant = "brand",
    })"
/>
Blazor 
<NhsukSearchInput
    Label="@(new LabelOptions
    {
        Heading = "Code lookup",
        Size = "m",
    })"
    Prefix="@(new SearchInputPrefixOptions
    {
        Text = "SNOMED",
    })"
    Id="with-prefix"
    Name="example"
    Value="160245001"
    Width="10"
    Code="true"
    Button="@(new ButtonOptions
    {
        Icon = "arrow-right",
        Variant = "brand",
    })"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/search-input/macro.njk" import searchInput %}

{{ searchInput({
  "label": {
    "heading": "Code lookup",
    "size": "m"
  },
  "prefix": {
    "text": "SNOMED"
  },
  "id": "with-prefix",
  "name": "example",
  "value": "160245001",
  "width": 10,
  "code": true,
  "button": {
    "icon": "arrow-right",
    "variant": "brand"
  }
}) }}

With prefix and error message

Matches upstream

Open on its own page (opens in new tab)

Error: Enter a SNOMED code
Razor Pages and MVC 
<nhsuk-search-input
    label-options="@(new LabelOptions
    {
        Heading = "Code lookup",
        Size = "m",
    })"
    prefix="SNOMED"
    error-message="Enter a SNOMED code"
    id="with-prefix"
    name="example"
    width="10"
    code="true"
    button-options="@(new ButtonOptions
    {
        Icon = "arrow-right",
        Variant = "brand",
    })"
/>
Blazor 
<NhsukSearchInput
    Label="@(new LabelOptions
    {
        Heading = "Code lookup",
        Size = "m",
    })"
    Prefix="@(new SearchInputPrefixOptions
    {
        Text = "SNOMED",
    })"
    ErrorMessage="@(new ErrorMessageOptions
    {
        Text = "Enter a SNOMED code",
    })"
    Id="with-prefix"
    Name="example"
    Width="10"
    Code="true"
    Button="@(new ButtonOptions
    {
        Icon = "arrow-right",
        Variant = "brand",
    })"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/search-input/macro.njk" import searchInput %}

{{ searchInput({
  "label": {
    "heading": "Code lookup",
    "size": "m"
  },
  "prefix": {
    "text": "SNOMED"
  },
  "errorMessage": {
    "text": "Enter a SNOMED code"
  },
  "id": "with-prefix",
  "name": "example",
  "width": 10,
  "code": true,
  "button": {
    "icon": "arrow-right",
    "variant": "brand"
  }
}) }}

With secondary button

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC 
<nhsuk-search-input
    label-options="@(new LabelOptions
    {
        Heading = "Search by NHS number",
        Size = "m",
    })"
    button-options="@(new ButtonOptions
    {
        Variant = "secondary",
    })"
    name="example"
    width="20"
/>
Blazor 
<NhsukSearchInput
    Label="@(new LabelOptions
    {
        Heading = "Search by NHS number",
        Size = "m",
    })"
    Button="@(new ButtonOptions
    {
        Variant = "secondary",
    })"
    Name="example"
    Width="20"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/search-input/macro.njk" import searchInput %}

{{ searchInput({
  "label": {
    "heading": "Search by NHS number",
    "size": "m"
  },
  "button": {
    "variant": "secondary"
  },
  "name": "example",
  "width": 20
}) }}

With secondary button text

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC 
<nhsuk-search-input
    label-options="@(new LabelOptions
    {
        Heading = "Search by NHS number",
        Size = "m",
    })"
    button-options="@(new ButtonOptions
    {
        Text = "Search",
        Variant = "secondary",
    })"
    name="example"
    width="20"
/>
Blazor 
<NhsukSearchInput
    Label="@(new LabelOptions
    {
        Heading = "Search by NHS number",
        Size = "m",
    })"
    Button="@(new ButtonOptions
    {
        Text = "Search",
        Variant = "secondary",
    })"
    Name="example"
    Width="20"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/search-input/macro.njk" import searchInput %}

{{ searchInput({
  "label": {
    "heading": "Search by NHS number",
    "size": "m"
  },
  "button": {
    "text": "Search",
    "variant": "secondary"
  },
  "name": "example",
  "width": 20
}) }}

With secondary button text only

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC 
<nhsuk-search-input
    label-options="@(new LabelOptions
    {
        Heading = "Product order number",
        Size = "m",
    })"
    button-options="@(new ButtonOptions
    {
        Icon = new ButtonIconOptions { IsFalse = true },
        Text = "Find",
        Variant = "secondary",
    })"
    name="example"
    width="20"
/>
Blazor 
<NhsukSearchInput
    Label="@(new LabelOptions
    {
        Heading = "Product order number",
        Size = "m",
    })"
    Button="@(new ButtonOptions
    {
        Icon = new ButtonIconOptions { IsFalse = true },
        Text = "Find",
        Variant = "secondary",
    })"
    Name="example"
    Width="20"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/search-input/macro.njk" import searchInput %}

{{ searchInput({
  "label": {
    "heading": "Product order number",
    "size": "m"
  },
  "button": {
    "icon": false,
    "text": "Find",
    "variant": "secondary"
  },
  "name": "example",
  "width": 20
}) }}