Form password input

Masks a sensitive value and provides a control for revealing it.

On this page

This docs is LLM-friendly and available as clean Markdown.

Supported browser agents can also use WebMCP to search, read, and open these docs. Learn more

Usage

import { GlFormPasswordInput } from "gitlab-ui-react/form-password-input";
<GlFormPasswordInput aria-label="Password" />

Default

Use a password input for sensitive values that users may need to verify before submitting. The value starts masked and the adjacent button toggles its visibility.

Password input

Read-only and disabled

Use readOnly when a value must remain readable, revealable, copyable, and submitted. Use disabled only when the entire control should be unavailable and excluded from form submission.

Password input states

Accessibility

  • Associate the input with a visible GlFormFieldLabel by using matching htmlFor and id values.
  • Localize revealLabel and hideLabel; each value is both the toggle’s accessible name and tooltip.
  • Use more specific toggle labels for other sensitive values, such as an access token.
  • Prefer readOnly over disabled when keyboard and screen reader users still need to inspect the value.

API

GlFormPasswordInput inherits supported GlFormInput props except type, which the component controls. Its ref points to the underlying input.

Prop Description Default
value Controls the input value.
defaultValue Sets the initial uncontrolled value.
initialVisibility Starts with the value revealed. false
onVisibilityChange Reports the next revealed state after the toggle is activated.
revealLabel Labels the toggle while the value is masked. "Reveal password"
hideLabel Labels the toggle while the value is visible. "Hide password"
disabled Disables the input and visibility toggle. false
inputClassName Adds a class to the inner input instead of the wrapper.
width Constrains the wrapper to a fixed or responsive input width. null