Components

Password input

Help users to create and enter passwords.

See the GOV.UK Design System documentation on password inputs for more information on when to use this component.

Must be at least 10 characters

<script setup lang="ts">
import { ref } from 'vue'
const password = ref('')
  
const length = computed(() => {
  return `${password.value.length} character${password.value.length > 1 ? 's' : ''}` 
})  
</script>

<template>
  <gv-password-input label="Password" v-model="password">
    <template #hint>
      Must be at least 10 characters
    </template>
  </gv-password-input>
  <gv-inset-text v-if="password" aria-live="polite">
    Your password is {{ length }} long
  </gv-inset-text>
</template>

Changing the autocomplete type

By default, the input will have autocomplete="current-password". For screens where the user is entering a new password, pass autocomplete="new-password" to avoid the browser autocompleting the user's current password.

The GOV.UK Design System recommends not including a 'confirm password' field.

<gv-password-input autocomplete="new-password" label="New password"/>

Observing the password visibility

You can bind a boolean value with v-model:password-visible to keep track of the visibility of the password.

Your password is not visible

<script setup lang="ts">
import { ref } from 'vue'
const passwordVisible = ref(null)
</script>

<template>
  <gv-password-input label="Password" v-model:password-visible="passwordVisible" />
  <gv-inset-text aria-live="polite">
    Your password is {{ passwordVisible ? '' : 'not ' }}visible
  </gv-inset-text>
</template>

Props

Name	Type	Description
modelValue	string	The value of the input. In most cases you should use v-model instead of setting this prop directly.
id	string	The ID of the input. If you don't provide an ID, one will be generated automatically.
name	string	The name of the input, which is submitted with the form data.
describedBy	string	One or more element IDs to add to the aria-describedby attribute, used to provide additional descriptive information for screenreader users.
autocomplete	string	Attribute to identify input purpose, for example new-password. See autofill for full list of values that can be used. Defaults to 'current-password'.
disabled	boolean	If true, input will be disabled.
showPasswordText	string	Button text when the password is hidden. Defaults to 'Show'.
hidePasswordText	string	Button text when the password is visible. Defaults to 'Hide'.
showPasswordAriaLabel	string	Button text exposed to assistive technologies, like screen readers, when the password is hidden. Defaults to 'Show password'.
hidePasswordAriaLabel	string	Button text exposed to assistive technologies, like screen readers, when the password is visible. Defaults to 'Hide password'.
passwordShownAnnouncementText	string	Announcement made to screen reader users when their password has become visible in plain text. Defaults to 'Your password is visible'.
passwordHiddenAnnouncementText	string	Announcement made to screen reader users when their password has been obscured and is not visible. Defaults to 'Your password is hidden'.
passwordVisible	boolean	Sets whether the password is visible. Use v-model:password-visible to keep track of the visibility. Defaults to false.
formGroupClass	string|array|object	Classes to add to the form group. You can bind a string, an array or an object, as with normal Vue class bindings.
label	string	Text to use within the label. If content is provided in the default slot, this prop will be ignored.
labelIsPageHeading	boolean	Whether the label also acts as the heading for the page. Defaults to false.
labelClass	string|array|object	Classes to add to the label tag. You can bind a string, an array or an object, as with normal Vue class bindings.
hint	string	Text to use within the hint. If content is provided in the hint slot, this prop will be ignored.
hintClass	string|array|object	Classes to add to the hint span tag. You can bind a string, an array or an object, as with normal Vue class bindings.
buttonClass	string|array|object	Classes to add to the button. You can bind a string, an array or an object, as with normal Vue class bindings.
errorMessage	string	Text to use within the error message. If content is provided in the error-message slot, this prop will be ignored.
errorMessageClass	string|array|object	Classes to add to the error message <p> tag. You can bind a string, an array or an object, as with normal Vue class bindings.
errorMessageVisuallyHiddenText	string	A visually hidden prefix used before the error message. Defaults to 'Error'.
beforeInput	string	Text to add before the input. If content is provided in the before-input slot, this prop will be ignored.
afterInput	string	Text to add after the input. If content is provided in the after-input slot, this prop will be ignored.

Slots

Name	Description
label	The content of the label. If content is provided in this slot, the label prop will be ignored.
hint	The content of the hint. If content is provided in this slot, the hint prop will be ignored.
error-message	The content of the error message. If content is provided in this slot, the errorMessage prop will be ignored.
before-input	Content to add before the input. If content is provided in this slot, the beforeInput prop will be ignored.
after-input	Content to add after the input. If content is provided in this slot, the aftereInput prop will be ignored.