Password input

Examples

<gl-form-group label="Password" label-for="password">
  <gl-form-password-input id="password" value="correct-horse-battery-staple" />
</gl-form-group>

<gl-form-group label="Recovery code" label-for="recovery-code">
  <gl-form-password-input
    id="recovery-code"
    value="8f4c-21ab-90de-77bc"
    initial-visibility
  />
</gl-form-group>

<gl-form-group label="Access token" label-for="access-token">
  <gl-form-password-input id="access-token" value="glpat-9zK2mQ4xR7" readonly />
</gl-form-group>

<gl-form-group label="Password" label-for="password-disabled">
  <gl-form-password-input id="password-disabled" value="not-editable" disabled />
</gl-form-group>

Structure

Guidelines

Use a password input for a value that is sensitive to display — a password, an access token, a recovery code — but that the user still needs to check before submitting or copying.

For any other value, use a text input.

Appearance

Behavior

The value is masked on load and the toggle reveals it. Set initial-visibility to start revealed instead, which suits a value the user is being shown rather than typing, such as a freshly generated token.

The toggle icon indicates the action available rather than the current state: an open eye while the value is masked, a crossed-out eye while it is revealed. The masking itself already shows the current state, so the icon is free to describe what a click does.

The component emits visibility-change with the new visibility whenever the toggle is used.

Read-only and disabled

These are different states, and the distinction matters for a value the user needs to read:

Use readonly to present a value the user can read but not change — a generated token, for example. The toggle stays usable, because revealing a value is a read rather than an edit.

Use disabled only to make the whole control inert. Both the input and the toggle leave the tab order, and the value is not submitted.

Accessibility

• Pair the component with a form group and set label-for so the input has an accessible name. The label prop alone does not provide one.
• The toggle's accessible name changes with the state, from "Reveal password" to "Hide password". Override either with the reveal-label and hide-label props when a more specific term fits the value, such as "Reveal access token".
• Both labels are translatable through the GlFormPasswordInput.revealLabel and GlFormPasswordInput.hideLabel keys.
• Avoid disabled for a value the user needs to read. A disabled input cannot be focused, so keyboard and screen reader users cannot reach it or reveal it. Use readonly instead.

Code reference

GlFormPasswordInput

Attributes that are not props are forwarded to the underlying input, so id, name, autocomplete, required, readonly and the rest behave as they do on a text input.

<script>
export default {
  data() {
    return {
      password: '',
    };
  },
};
</script>

<template>
  <gl-form-group label="New password" label-for="new-password">
    <gl-form-password-input
      id="new-password"
      v-model="password"
      autocomplete="new-password"
    />
  </gl-form-group>
</template>

import { GlFormPasswordInput } from '@gitlab/ui';