PasswordInput component supports Input and Input.Wrapper components features and all
input element props.
PasswordInput documentation does not include all features supported by the component – see Input documentation to learn about all available features.
Control visibility state with
for example, the props can be used to sync visibility state between two inputs:
To change visibility toggle icon, pass a React component that accepts
reveal prop to
If you do not need visibility toggle button, use TextInput component instead:
rightSection props. These sections are rendered with absolute position 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:
leftSection– React node to render on the corresponding side of input
leftSectionWidth– controls width of the right section and padding on the corresponding side of the input. By default, it is controlled by component
pointer-eventsproperty of the section. By default, all pointer events are enabled. If you want to render a non-interactive element, set it to
noneto pass clicks through to the input.
Note that when
rightSection prop is used, visibility toggle button is not rendered.
disabled prop is set, visibility toggle button is hidden:
Component Styles API
Hover over selectors to highlight corresponding elements
PasswordInput is used without
label prop, it will not be announced properly by screen reader:
aria-label to make the input accessible. In this case label will not be visible, but screen reader will announce it:
label prop is set, input will be accessible it is not required to set
aria-label on the visibility toggle button, use