Password input

Adapted

Default

A default password input lets users enter a password and toggle its visibility.

Show code

<div
  class="govuk-form-group govuk-password-input"
  data-module="govuk-password-input"
>
  <label class="govuk-label" for="password">Password</label>
  <div class="govuk-input__wrapper govuk-password-input__wrapper">
    <input
      class="govuk-input govuk-password-input__input govuk-js-password-input-input"
      id="password"
      type="password"
      spellcheck="false"
      autocomplete="current-password"
      autocapitalize="none"
      name="password"
    >
    <button
      type="button"
      class="govuk-button govuk-button--secondary govuk-password-input__toggle govuk-js-password-input-toggle"
      data-module="govuk-button"
      aria-controls="password"
      aria-label="Show password"
      hidden
    >
      Show
    </button>
  </div>
</div>

---
import { FormGroup, InputLabel, PasswordInput } from "@i-dot-ai-npm/component-library-astro";
---

<FormGroup class="govuk-password-input" data-module="govuk-password-input">
  <InputLabel for="password">Password</InputLabel>
  <PasswordInput id="password" name="password" />
</FormGroup>

import { FormGroup, InputLabel, PasswordInput } from "@i-dot-ai-npm/component-library-react";

export default function Example() {
  return (
    <FormGroup className="govuk-password-input" data-module="govuk-password-input">
      <InputLabel htmlFor="password">Password</InputLabel>
      <PasswordInput id="password" name="password" />
    </FormGroup>
  );
}

<script>
  import { FormGroup, InputLabel, PasswordInput } from "@i-dot-ai-npm/component-library-svelte";
</script>

<FormGroup class="govuk-password-input" data-module="govuk-password-input">
  <InputLabel for="password">Password</InputLabel>
  <PasswordInput id="password" name="password" />
</FormGroup>

import { FormGroup, InputLabel, PasswordInput } from "@i-dot-ai-npm/component-library-solid";

export default function Example() {
  return (
    <FormGroup class="govuk-password-input" data-module="govuk-password-input">
      <InputLabel for="password">Password</InputLabel>
      <PasswordInput id="password" name="password" />
    </FormGroup>
  );
}

When to use this component

Use this component whenever you need users to create or enter a password.

Before using this component, you should also read the guidance on the Ask users for passwords pattern and Creating user accounts pattern.

When not to use this component

Do not use this component to ask for any information other than a password.

Use a Text input component to ask for other security information, such as:

• multi-factor authentication codes
• answers to security questions
• other personally identifiable information

Also see the Confirm a phone number pattern.