Skip to main content
All components

ComponentPassword input

19 of 19 upstream examples match. Razor component: <NhsukPasswordInput>

Default

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC 
<nhsuk-password-input
    label-options="@(new LabelOptions
    {
        Heading = "Password",
        Size = "l",
    })"
    name="example"
/>
Blazor 
<NhsukPasswordInput
    Label="@(new LabelOptions
    {
        Heading = "Password",
        Size = "l",
    })"
    Name="example"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/password-input/macro.njk" import passwordInput %}

{{ passwordInput({
  "label": {
    "heading": "Password",
    "size": "l"
  },
  "name": "example"
}) }}

Disabled

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC 
<nhsuk-password-input
    label-options="@(new LabelOptions
    {
        Heading = "Password",
        Size = "l",
    })"
    name="example"
    disabled="true"
/>
Blazor 
<NhsukPasswordInput
    Label="@(new LabelOptions
    {
        Heading = "Password",
        Size = "l",
    })"
    Name="example"
    Disabled="true"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/password-input/macro.njk" import passwordInput %}

{{ passwordInput({
  "label": {
    "heading": "Password",
    "size": "l"
  },
  "name": "example",
  "disabled": true
}) }}

Disabled button

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC 
<nhsuk-password-input
    label-options="@(new LabelOptions
    {
        Heading = "Password",
        Size = "l",
    })"
    name="example"
    button-options="@(new ButtonOptions
    {
        Disabled = true,
    })"
/>
Blazor 
<NhsukPasswordInput
    Label="@(new LabelOptions
    {
        Heading = "Password",
        Size = "l",
    })"
    Name="example"
    Button="@(new ButtonOptions
    {
        Disabled = true,
    })"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/password-input/macro.njk" import passwordInput %}

{{ passwordInput({
  "label": {
    "heading": "Password",
    "size": "l"
  },
  "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-password-input
    label-options="@(new LabelOptions
    {
        Heading = "Password",
        Size = "l",
    })"
    name="example"
    disabled="true"
    button-options="@(new ButtonOptions
    {
        Disabled = false,
    })"
/>
Blazor 
<NhsukPasswordInput
    Label="@(new LabelOptions
    {
        Heading = "Password",
        Size = "l",
    })"
    Name="example"
    Disabled="true"
    Button="@(new ButtonOptions
    {
        Disabled = false,
    })"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/password-input/macro.njk" import passwordInput %}

{{ passwordInput({
  "label": {
    "heading": "Password",
    "size": "l"
  },
  "name": "example",
  "disabled": true,
  "button": {
    "disabled": false
  }
}) }}

With autocomplete attribute

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC 
<nhsuk-password-input
    label-options="@(new LabelOptions
    {
        Heading = "Password",
        Size = "l",
    })"
    id="new-password"
    name="example"
    autocomplete="new-password"
/>
Blazor 
<NhsukPasswordInput
    Label="@(new LabelOptions
    {
        Heading = "Password",
        Size = "l",
    })"
    Id="new-password"
    Name="example"
    Autocomplete="new-password"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/password-input/macro.njk" import passwordInput %}

{{ passwordInput({
  "label": {
    "heading": "Password",
    "size": "l"
  },
  "id": "new-password",
  "name": "example",
  "autocomplete": "new-password"
}) }}

With button double click not prevented

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC 
<nhsuk-password-input
    label-options="@(new LabelOptions
    {
        Heading = "Password",
        Size = "l",
    })"
    name="example"
    button-options="@(new ButtonOptions
    {
        PreventDoubleClick = false,
    })"
/>
Blazor 
<NhsukPasswordInput
    Label="@(new LabelOptions
    {
        Heading = "Password",
        Size = "l",
    })"
    Name="example"
    Button="@(new ButtonOptions
    {
        PreventDoubleClick = false,
    })"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/password-input/macro.njk" import passwordInput %}

{{ passwordInput({
  "label": {
    "heading": "Password",
    "size": "l"
  },
  "name": "example",
  "button": {
    "preventDoubleClick": false
  }
}) }}

With button double click prevented

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC 
<nhsuk-password-input
    label-options="@(new LabelOptions
    {
        Heading = "Password",
        Size = "l",
    })"
    name="example"
    button-options="@(new ButtonOptions
    {
        PreventDoubleClick = true,
    })"
/>
Blazor 
<NhsukPasswordInput
    Label="@(new LabelOptions
    {
        Heading = "Password",
        Size = "l",
    })"
    Name="example"
    Button="@(new ButtonOptions
    {
        PreventDoubleClick = true,
    })"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/password-input/macro.njk" import passwordInput %}

{{ passwordInput({
  "label": {
    "heading": "Password",
    "size": "l"
  },
  "name": "example",
  "button": {
    "preventDoubleClick": true
  }
}) }}

With error message

Matches upstream

Open on its own page (opens in new tab)

Error: Enter a password
Razor Pages and MVC 
<nhsuk-password-input
    label-options="@(new LabelOptions
    {
        Heading = "Password",
        Size = "l",
    })"
    error-message="Enter a password"
    id="with-error-message"
    name="example"
/>
Blazor 
<NhsukPasswordInput
    Label="@(new LabelOptions
    {
        Heading = "Password",
        Size = "l",
    })"
    ErrorMessage="@(new ErrorMessageOptions
    {
        Text = "Enter a password",
    })"
    Id="with-error-message"
    Name="example"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/password-input/macro.njk" import passwordInput %}

{{ passwordInput({
  "label": {
    "heading": "Password",
    "size": "l"
  },
  "errorMessage": {
    "text": "Enter a password"
  },
  "id": "with-error-message",
  "name": "example"
}) }}

With error message and hint

Matches upstream

Open on its own page (opens in new tab)

It probably has some letters, numbers and maybe even some symbols in it
Error: Enter a password
Razor Pages and MVC 
<nhsuk-password-input
    label-options="@(new LabelOptions
    {
        Heading = "Password",
        Size = "l",
    })"
    hint="It probably has some letters, numbers and maybe even some symbols in it"
    error-message="Enter a password"
    id="with-error-message"
    name="example"
/>
Blazor 
<NhsukPasswordInput
    Label="@(new LabelOptions
    {
        Heading = "Password",
        Size = "l",
    })"
    Hint="@(new HintOptions
    {
        Text = "It probably has some letters, numbers and maybe even some symbols in it",
    })"
    ErrorMessage="@(new ErrorMessageOptions
    {
        Text = "Enter a password",
    })"
    Id="with-error-message"
    Name="example"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/password-input/macro.njk" import passwordInput %}

{{ passwordInput({
  "label": {
    "heading": "Password",
    "size": "l"
  },
  "hint": {
    "text": "It probably has some letters, numbers and maybe even some symbols in it"
  },
  "errorMessage": {
    "text": "Enter a password"
  },
  "id": "with-error-message",
  "name": "example"
}) }}

With error message and hint as strings

Matches upstream

Open on its own page (opens in new tab)

It probably has some letters, numbers and maybe even some symbols in it
Error: Enter a password
Razor Pages and MVC 
<nhsuk-password-input
    label-options="@(new LabelOptions
    {
        Heading = "Password",
        Size = "l",
    })"
    hint="It probably has some letters, numbers and maybe even some symbols in it"
    error-message="Enter a password"
    id="with-error-message"
    name="example"
/>
Blazor 
<NhsukPasswordInput
    Label="@(new LabelOptions
    {
        Heading = "Password",
        Size = "l",
    })"
    Hint="@("It probably has some letters, numbers and maybe even some symbols in it")"
    ErrorMessage="@("Enter a password")"
    Id="with-error-message"
    Name="example"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/password-input/macro.njk" import passwordInput %}

{{ passwordInput({
  "label": {
    "heading": "Password",
    "size": "l"
  },
  "hint": "It probably has some letters, numbers and maybe even some symbols in it",
  "errorMessage": "Enter a password",
  "id": "with-error-message",
  "name": "example"
}) }}

With error message and hint, without heading

Matches upstream

Open on its own page (opens in new tab)

It probably has some letters, numbers and maybe even some symbols in it
Error: Enter a password
Razor Pages and MVC 
<nhsuk-password-input
    label-options="@(new LabelOptions
    {
        Heading = "Password",
        Size = "l",
    })"
    hint="It probably has some letters, numbers and maybe even some symbols in it"
    error-message="Enter a password"
    id="with-error-message"
    name="example"
/>
Blazor 
<NhsukPasswordInput
    Label="@(new LabelOptions
    {
        Heading = "Password",
        Size = "l",
    })"
    Hint="@(new HintOptions
    {
        Text = "It probably has some letters, numbers and maybe even some symbols in it",
    })"
    ErrorMessage="@(new ErrorMessageOptions
    {
        Text = "Enter a password",
    })"
    Id="with-error-message"
    Name="example"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/password-input/macro.njk" import passwordInput %}

{{ passwordInput({
  "label": {
    "heading": "Password",
    "size": "l"
  },
  "hint": {
    "text": "It probably has some letters, numbers and maybe even some symbols in it"
  },
  "errorMessage": {
    "text": "Enter a password"
  },
  "id": "with-error-message",
  "name": "example"
}) }}

With error message, without heading

Matches upstream

Open on its own page (opens in new tab)

Error: Enter a password
Razor Pages and MVC 
<nhsuk-password-input
    label-options="@(new LabelOptions
    {
        Heading = "Password",
        Size = "l",
    })"
    error-message="Enter a password"
    id="with-error-message"
    name="example"
/>
Blazor 
<NhsukPasswordInput
    Label="@(new LabelOptions
    {
        Heading = "Password",
        Size = "l",
    })"
    ErrorMessage="@(new ErrorMessageOptions
    {
        Text = "Enter a password",
    })"
    Id="with-error-message"
    Name="example"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/password-input/macro.njk" import passwordInput %}

{{ passwordInput({
  "label": {
    "heading": "Password",
    "size": "l"
  },
  "errorMessage": {
    "text": "Enter a password"
  },
  "id": "with-error-message",
  "name": "example"
}) }}

With error only

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC 
<nhsuk-password-input
    label-options="@(new LabelOptions
    {
        Heading = "Password",
        Size = "l",
    })"
    error-message-options="@(true)"
    id="with-error-only"
    name="example"
/>
Blazor 
<NhsukPasswordInput
    Label="@(new LabelOptions
    {
        Heading = "Password",
        Size = "l",
    })"
    ErrorMessage="@(true)"
    Id="with-error-only"
    Name="example"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/password-input/macro.njk" import passwordInput %}

{{ passwordInput({
  "label": {
    "heading": "Password",
    "size": "l"
  },
  "errorMessage": true,
  "id": "with-error-only",
  "name": "example"
}) }}

With hint

Matches upstream

Open on its own page (opens in new tab)

It probably has some letters, numbers and maybe even some symbols in it
Razor Pages and MVC 
<nhsuk-password-input
    label-options="@(new LabelOptions
    {
        Heading = "Password",
        Size = "l",
    })"
    hint="It probably has some letters, numbers and maybe even some symbols in it"
    id="with-hint-text"
    name="example"
/>
Blazor 
<NhsukPasswordInput
    Label="@(new LabelOptions
    {
        Heading = "Password",
        Size = "l",
    })"
    Hint="@(new HintOptions
    {
        Text = "It probably has some letters, numbers and maybe even some symbols in it",
    })"
    Id="with-hint-text"
    Name="example"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/password-input/macro.njk" import passwordInput %}

{{ passwordInput({
  "label": {
    "heading": "Password",
    "size": "l"
  },
  "hint": {
    "text": "It probably has some letters, numbers and maybe even some symbols in it"
  },
  "id": "with-hint-text",
  "name": "example"
}) }}

Without heading

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC 
<nhsuk-password-input label="Password" id="without-heading" name="example" />
Blazor 
<NhsukPasswordInput Label="@("Password")" Id="without-heading" Name="example" />
Nunjucks (upstream) 
{% from "nhsuk/components/password-input/macro.njk" import passwordInput %}

{{ passwordInput({
  "label": "Password",
  "id": "without-heading",
  "name": "example"
}) }}

With prefix

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC 
<nhsuk-password-input
    label-options="@(new LabelOptions
    {
        Heading = "Secret code",
        Size = "m",
    })"
    prefix="PIN"
    id="with-prefix"
    name="example"
    value="3.14159"
    width="5"
    code="true"
    button-options="@(new ButtonOptions
    {
        Variant = "brand",
    })"
/>
Blazor 
<NhsukPasswordInput
    Label="@(new LabelOptions
    {
        Heading = "Secret code",
        Size = "m",
    })"
    Prefix="@(new InputPrefixOptions
    {
        Text = "PIN",
    })"
    Id="with-prefix"
    Name="example"
    Value="3.14159"
    Width="5"
    Code="true"
    Button="@(new ButtonOptions
    {
        Variant = "brand",
    })"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/password-input/macro.njk" import passwordInput %}

{{ passwordInput({
  "label": {
    "heading": "Secret code",
    "size": "m"
  },
  "prefix": {
    "text": "PIN"
  },
  "id": "with-prefix",
  "name": "example",
  "value": "3.14159",
  "width": 5,
  "code": true,
  "button": {
    "variant": "brand"
  }
}) }}

With prefix and error message

Matches upstream

Open on its own page (opens in new tab)

Error: Enter secret code
Razor Pages and MVC 
<nhsuk-password-input
    label-options="@(new LabelOptions
    {
        Heading = "Secret code",
        Size = "m",
    })"
    prefix="PIN"
    error-message="Enter secret code"
    id="with-prefix"
    name="example"
    width="5"
    code="true"
    button-options="@(new ButtonOptions
    {
        Variant = "brand",
    })"
/>
Blazor 
<NhsukPasswordInput
    Label="@(new LabelOptions
    {
        Heading = "Secret code",
        Size = "m",
    })"
    Prefix="@(new InputPrefixOptions
    {
        Text = "PIN",
    })"
    ErrorMessage="@(new ErrorMessageOptions
    {
        Text = "Enter secret code",
    })"
    Id="with-prefix"
    Name="example"
    Width="5"
    Code="true"
    Button="@(new ButtonOptions
    {
        Variant = "brand",
    })"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/password-input/macro.njk" import passwordInput %}

{{ passwordInput({
  "label": {
    "heading": "Secret code",
    "size": "m"
  },
  "prefix": {
    "text": "PIN"
  },
  "errorMessage": {
    "text": "Enter secret code"
  },
  "id": "with-prefix",
  "name": "example",
  "width": 5,
  "code": true,
  "button": {
    "variant": "brand"
  }
}) }}

With translations

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC 
<nhsuk-password-input
    label-options="@(new LabelOptions
    {
        Heading = "Cyfrinair",
        Size = "l",
    })"
    id="password-translated"
    name="example"
    show-password-text="Datguddia"
    hide-password-text="Cuddio"
    show-password-aria-label="Datgelu cyfrinair"
    hide-password-aria-label="Cuddio cyfrinair"
    password-shown-announcement-text="Mae eich cyfrinair yn weladwy."
    password-hidden-announcement-text="Mae eich cyfrinair wedi'i guddio."
/>
Blazor 
<NhsukPasswordInput
    Label="@(new LabelOptions
    {
        Heading = "Cyfrinair",
        Size = "l",
    })"
    Id="password-translated"
    Name="example"
    ShowPasswordText="Datguddia"
    HidePasswordText="Cuddio"
    ShowPasswordAriaLabel="Datgelu cyfrinair"
    HidePasswordAriaLabel="Cuddio cyfrinair"
    PasswordShownAnnouncementText="Mae eich cyfrinair yn weladwy."
    PasswordHiddenAnnouncementText="Mae eich cyfrinair wedi'i guddio."
/>
Nunjucks (upstream) 
{% from "nhsuk/components/password-input/macro.njk" import passwordInput %}

{{ passwordInput({
  "label": {
    "heading": "Cyfrinair",
    "size": "l"
  },
  "id": "password-translated",
  "name": "example",
  "showPasswordText": "Datguddia",
  "hidePasswordText": "Cuddio",
  "showPasswordAriaLabel": "Datgelu cyfrinair",
  "hidePasswordAriaLabel": "Cuddio cyfrinair",
  "passwordShownAnnouncementText": "Mae eich cyfrinair yn weladwy.",
  "passwordHiddenAnnouncementText": "Mae eich cyfrinair wedi'i guddio."
}) }}

With width

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC 
<nhsuk-password-input
    label-options="@(new LabelOptions
    {
        Heading = "Password",
        Size = "l",
    })"
    id="width-class"
    name="example"
    width="10"
/>
Blazor 
<NhsukPasswordInput
    Label="@(new LabelOptions
    {
        Heading = "Password",
        Size = "l",
    })"
    Id="width-class"
    Name="example"
    Width="10"
/>
Nunjucks (upstream) 
{% from "nhsuk/components/password-input/macro.njk" import passwordInput %}

{{ passwordInput({
  "label": {
    "heading": "Password",
    "size": "l"
  },
  "id": "width-class",
  "name": "example",
  "width": 10
}) }}