Capture password data from user
PasswordInput component supports Input and Input.Wrapper component features and all input element props. The PasswordInput documentation does not include all features supported by the component – see the Input documentation to learn about all available features.
Set loading prop to display a loading indicator. By default, the loader is displayed on the right side of the input. You can change the position with the loadingPosition prop to 'left' or 'right' . This is useful for async operations like API calls, searches, or validations:
PasswordInput can be used with uncontrolled forms the same way as a native input[type="password"] . Set the name attribute to include password input value in FormData object on form submission. To control the initial value in uncontrolled forms, use the defaultValue prop.
Example usage of uncontrolled PasswordInput with FormData :
Control the visibility state with the visible and onVisibilityChange props. For example, the props can be used to sync visibility state between two inputs:
To change the visibility toggle icon, pass a React component that accepts the reveal prop to visibilityToggleIcon :
Password strength meter example with the Progress and Popover components:
If you do not need the visibility toggle button, use the TextInput component instead:
PasswordInput supports leftSection and rightSection props. These sections are rendered with absolute positioning inside the input wrapper. You can use them to display icons, input controls, or any other elements.
You can use the following props to control sections styles and content:
Note that when the rightSection prop is used, the visibility toggle button is not rendered.
When the disabled prop is set, the visibility toggle button is hidden:
PasswordInput supports the Styles API ; you can add styles to any inner element of the component with the classNames prop. Follow the Styles API documentation to learn more.
Component Styles API
Hover over selectors to highlight corresponding elements
If PasswordInput is used without the label prop, it will not be announced properly by screen readers:
Set aria-label to make the input accessible. In this case the label will not be visible, but screen readers will announce it:
If the label prop is set, the input will be accessible and it is not required to set aria-label :
To set aria-label on the visibility toggle button, use the visibilityToggleButtonProps prop:
By default, the visibility toggle button is excluded from the tab order ( tabindex="-1" ). This mimics the native browser password reveal control and keeps the form flow uninterrupted: pressing Tab moves focus to the next field rather than to the toggle button. The toggle remains operable with a mouse, touch and assistive technologies that navigate by element rather than by tab order.
If your users expect to reach the toggle with Tab , set the visibilityToggleFocusable prop. The button then receives tabindex="0" and can be activated with Enter or Space :
To apply this behavior to every PasswordInput in your application, set the prop in the theme :