Passwords

import Password from 'frui/fields/Password';

Copy

Props

Passwords accepts all props of a standard HTML Input element. See Moz for standard input attributes.

Name	Type	Required	Notes
className	string	No	Standard HTML class names
defaultValue	string	No	Default value (Uncontrolled)
error	string\|boolean	No	Any error message
name	string	No	Used for react server components.
onChange	Function	No	Event handler when value has changed
onUpdate	Function	No	Update event handler
passRef	LegacyRef	No	Passes ref to html input
style	CSS Object	No	Standard CSS object
value	string	No	Default value (Controlled)

Number fields display commas and can limit decimal length. The value for numbers removes commas.

<Password placeholder="Enter Password..." />

Copy

onUpdate is like onChange except the value is passed instead of the change event.

<Password placeholder="Enter password.." onUpdate={value => alert(value)} />

Copy

The onChange event is triggered when the value has changed. The following arguments are passed to the event handler:

Name	Type	Sample
event	Event Object	see: Change Event

The onUpdate event is triggered when the value has been updated. The following arguments are passed to the event handler:

Name	Type	Sample
value	string	`foobar`

You can pass the error prop to highlight the input field red.

<Password error={string|true} value="Not a password" />

Copy