Password API

API documentation for Password component

Password#

Props#

Defines valid properties in Password component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: PasswordInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: PasswordInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<PasswordPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: PasswordInstance) => ReactNode)	null	The children to render.
onValueChange	(event: PasswordChangeEvent) => void	null	Callback fired when the password value changes.
value	string	null	The controlled value of the password input.
defaultValue	string	null	The default value for uncontrolled mode.
strengthOptions	PasswordStrengthLevel[]	null	Custom strength levels for password calculation.
appendTo	HTMLElement \| "body" \| "self"	body	DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The 'self' value is used to render a component where it is located.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

State#

Defines valid state in Password component.

name	type	default	description
value	string	null	Current password value.
strength	PasswordStrengthResult	null	Current password strength result.
overlayVisible	boolean	null	Whether the overlay is visible.
levelsCount	number	null	Number of strength levels.
showClearIcon	boolean	null	Whether the clear icon should be shown.
unmasked	boolean	null	Whether the password is unmasked (visible).
focused	boolean	null	Whether the input is focused.
inputType	"text" \| "password"	null	The current input type (password or text).

Exposes#

Defines the methods and properties exposed by Password component.

name	type	default	description
state	usePasswordState	null	The state of the usePassword.
inputRef	RefObject<{ elementRef: RefObject<HTMLInputElement> }>	null	Input ref for accessing the input element.
overlayRef	RefObject<HTMLDivElement>	null	Overlay ref for accessing the overlay element.
portalRef	RefObject<{ containerRef: { current: { elementRef: RefObject<HTMLDivElement> } } }>	null	Portal ref for accessing the portal container element.
testRequirement	(test: (value: string, strength: PasswordStrengthResult) => boolean) => boolean	null	Test a requirement against the current password.
calculatePasswordStrength	(password: string, levels: PasswordStrengthLevel[]) => PasswordStrengthResult	null	Calculate password strength for a given password and levels.
onInputClick	() => void	null	Handle input click event.
onInputChange	(event: ChangeEvent<HTMLInputElement>) => void	null	Handle input change.
onFocus	() => void	null	Handle input focus event.
onBlur	() => void	null	Handle input blur event.
onOverlayEnter	() => void	null	Callback when overlay enters (for positioning).
changeVisibleState	(isVisible: boolean) => void	null	Change the visibility state of the overlay.
onClearClick	(event: MouseEvent<HTMLButtonElement>) => void	null	Handle clear button click.
onMaskToggle	() => void	null	Toggle password mask visibility.

Events#

PasswordChangeEvent

Event fired when the password's value state changes.

name	type	description
value	string	The new password value.
originalEvent	ChangeEvent	The original DOM event.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of Password component.

name	type	default	description
root	PasswordPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.
pcInputText	PasswordPassThroughType<InputHTMLAttributes<HTMLInputElement>>	null	Used to pass attributes to the input's DOM element.
portal	PasswordPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the portal's DOM element.
panel	PasswordPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the panel's DOM element.
strength	PasswordPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the strength's DOM element.
meter	PasswordPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the meter's DOM element.
clearIcon	PasswordPassThroughType<SVGAttributes<SVGElement>>	null	Used to pass attributes to the clear icon's DOM element.

Types#

Instance

Instance of Password component.

values
ComponentInstance<PasswordProps, PasswordState, PasswordExposes>

PasswordInput#

Props#

Defines valid properties in PasswordInputcomponent.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: PasswordInputInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: PasswordInputInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<PasswordInputPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: PasswordInputInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by PasswordInputcomponent.

name	type	default	description
password	PasswordInstance	null	Instance of the Password component.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of PasswordInputcomponent.

name	type	default	description
root	PasswordInputPassThroughType<HTMLAttributes<HTMLInputElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of PasswordInputcomponent.

values
ComponentInstance<PasswordInputProps, PasswordInputState, PasswordInputExposes>

PasswordStrength#

Props#

Defines valid properties in PasswordStrength component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: PasswordStrengthInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: PasswordStrengthInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<PasswordStrengthPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: PasswordStrengthInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by PasswordStrength component.

name	type	default	description
password	PasswordInstance	null	Instance of the Password component.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of PasswordStrength component.

name	type	default	description
root	PasswordStrengthPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of PasswordStrength component.

values
ComponentInstance<PasswordStrengthProps, PasswordStrengthState, PasswordStrengthExposes>

PasswordMeter#

Props#

Defines valid properties in PasswordMeter component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: PasswordMeterInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: PasswordMeterInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<PasswordMeterPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: PasswordMeterInstance) => ReactNode)	null	The children to render.
index	number	null	The index of the meter.
active	boolean	false	Whether this meter is active/filled.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by PasswordMeter component.

name	type	default	description
password	PasswordInstance	null	Instance of the Password component.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of PasswordMeter component.

name	type	default	description
root	PasswordMeterPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of PasswordMeter component.

values
ComponentInstance<PasswordMeterProps, PasswordMeterState, PasswordMeterExposes>

PasswordPortal#

Props#

Defines valid properties in PasswordPortalcomponent.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: PasswordPortalInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: PasswordPortalInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<PasswordPortalPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: PasswordPortalInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by PasswordPortalcomponent.

name	type	default	description
password	PasswordInstance	null	Instance of the Password component.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of PasswordPortalcomponent.

name	type	default	description
root	PasswordPortalPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.
panel	PasswordPortalPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the panel's DOM element.

Types#

Instance

Instance of PasswordPortalcomponent.

values
ComponentInstance<PasswordPortalProps, PasswordPortalState, PasswordPortalExposes>

PasswordClearIcon#

Props#

Defines valid properties in PasswordClearIcon component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: PasswordClearIconInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: PasswordClearIconInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<PasswordClearIconPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: PasswordClearIconInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by PasswordClearIcon component.

name	type	default	description
password	PasswordInstance	null	The Password component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of PasswordClearIcon component.

name	type	default	description
root	PasswordClearIconPassThroughType<HTMLAttributes<HTMLSpanElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of PasswordClearIcon component.

values
ComponentInstance<PasswordClearIconProps, PasswordClearIconState, PasswordClearIconExposes>

usePassword#

Props#

Props for the usePassword hook.

name	type	default	description
value	string	null	The controlled value of the password input.
defaultValue	string	null	The default value for uncontrolled mode.
strengthOptions	PasswordStrengthLevel[]	null	Custom strength levels for password calculation.
appendTo	HTMLElement \| "body" \| "self"	body	DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The 'self' value is used to render a component where it is located.
onValueChange	(event: usePasswordChangeEvent) => void	null	Callback fired when the password value changes.

State#

Defines valid state in usePassword.

name	type	default	description
value	string	null	Current password value.
strength	PasswordStrengthResult	null	Current password strength result.
overlayVisible	boolean	null	Whether the overlay is visible.
levelsCount	number	null	Number of strength levels.
showClearIcon	boolean	null	Whether the clear icon should be shown.
unmasked	boolean	null	Whether the password is unmasked (visible).
focused	boolean	null	Whether the input is focused.
inputType	"text" \| "password"	null	The current input type (password or text).

Exposes#

Defines the methods and properties exposed by usePassword.

name	type	default	description
state	usePasswordState	null	The state of the usePassword.
inputRef	RefObject<{ elementRef: RefObject<HTMLInputElement> }>	null	Input ref for accessing the input element.
overlayRef	RefObject<HTMLDivElement>	null	Overlay ref for accessing the overlay element.
portalRef	RefObject<{ containerRef: { current: { elementRef: RefObject<HTMLDivElement> } } }>	null	Portal ref for accessing the portal container element.
testRequirement	(test: (value: string, strength: PasswordStrengthResult) => boolean) => boolean	null	Test a requirement against the current password.
calculatePasswordStrength	(password: string, levels: PasswordStrengthLevel[]) => PasswordStrengthResult	null	Calculate password strength for a given password and levels.
onInputClick	() => void	null	Handle input click event.
onInputChange	(event: ChangeEvent<HTMLInputElement>) => void	null	Handle input change.
onFocus	() => void	null	Handle input focus event.
onBlur	() => void	null	Handle input blur event.
onOverlayEnter	() => void	null	Callback when overlay enters (for positioning).
changeVisibleState	(isVisible: boolean) => void	null	Change the visibility state of the overlay.
onClearClick	(event: MouseEvent<HTMLButtonElement>) => void	null	Handle clear button click.
onMaskToggle	() => void	null	Toggle password mask visibility.

Events#

usePasswordChangeEvent

Event object for value change callback.

name	type	description
value	string	The new password value.
originalEvent	E	The original DOM event.

Types#

Instance

Instance of usePassword headless.

values
HeadlessInstance<usePasswordProps, usePasswordState, usePasswordExposes>