PasswordInput
Usage
Use PasswordInput when you need to capture password from user.
Component provides option to toggle password visibility, if you do not want this feature, use TextInput component with type="password"
.
Controlled
Change visibility toggle icon
You can change visibility toggle icon with visibilityToggleIcon
prop.
Pass react component that accepts reveal
and size
props:
Controlled visibility toggle
Control visibility state with visible
and onVisibilityChange
props, for example, the props can be used to sync visibility state between two inputs:
Strength meter example
Password strength meter example with Progress and Popover components:
Focus behavior
You can control focus behavior with toggleTabIndex
.
If prop is 0
then toggle control will be focusable with tab key:
Invalid state and error
Disabled state
In disabled state button to toggle password visibility id not displayed:
With icon
Get input ref
Accessibility
Provide aria-label
in case you use component without label for screen reader support:
PasswordInput component props
Name | Type | Description |
---|---|---|
defaultVisible | boolean | Determines whether input content should be visible (uncontrolled) |
description | ReactNode | Input description, displayed after label |
descriptionProps | Record<string, any> | Props spread to description element |
disabled | boolean | Disabled input state |
error | ReactNode | Displays error message after input |
errorProps | Record<string, any> | Props spread to error element |
icon | ReactNode | Adds icon on the left side of input |
iconWidth | Width<string | number> | Width of icon section |
inputContainer | (children: ReactNode) => ReactNode | Input container component, defaults to React.Fragment |
inputWrapperOrder | ("input" | "label" | "error" | "description")[] | Controls order of the Input.Wrapper elements |
label | ReactNode | Input label, displayed before input |
labelProps | Record<string, any> | Props spread to label element |
onVisibilityChange | (visible: boolean) => void | Called when visibility changes |
placeholder | string | |
radius | number | "xs" | "sm" | "md" | "lg" | "xl" | Key of theme.radius or any valid CSS value to set border-radius, theme.defaultRadius by default |
required | boolean | Sets required on input element |
size | "xs" | "sm" | "md" | "lg" | "xl" | Input size |
toggleTabIndex | 0 | -1 | Toggle button tabIndex, set to 0 to make button focusable with tab key |
type | HTMLInputTypeAttribute | Input element type |
variant | Variants<"unstyled" | "default" | "filled"> | Defines input appearance, defaults to default in light color scheme and filled in dark |
visibilityToggleIcon | FC<{ reveal: boolean; size: string | number; }> | Provide your own visibility toggle icon |
visibilityToggleLabel | string | aria-label for visibility toggle button |
visible | boolean | Determines whether input content should be visible (controlled) |
withAsterisk | boolean | Determines whether required asterisk should be rendered, overrides required prop, does not add required attribute to the input |
wrapperProps | Record<string, any> | Props passed to root element (InputWrapper component) |
PasswordInput component Styles API
Name | Static selector | Description |
---|---|---|
wrapper | .asuikit-PasswordInput-wrapper | Root Input element |
icon | .asuikit-PasswordInput-icon | Input icon wrapper on the left side of the input, controlled by icon prop |
input | .asuikit-PasswordInput-input | Main input element |
rightSection | .asuikit-PasswordInput-rightSection | Input right section, controlled by rightSection prop |
root | .asuikit-PasswordInput-root | Root element |
label | .asuikit-PasswordInput-label | Label element styles, defined by label prop |
error | .asuikit-PasswordInput-error | Error element styles, defined by error prop |
description | .asuikit-PasswordInput-description | Description element styles, defined by description prop |
required | .asuikit-PasswordInput-required | Required asterisk element styles, defined by required prop |
visibilityToggle | .asuikit-PasswordInput-visibilityToggle | Visibility toggle button |
innerInput | .asuikit-PasswordInput-innerInput | Actual input element |