WUI logo

PasswordInput

Allows user to show and hide text on input.

version

4.2.0

install

yarn add @welcome-ui/password-input

usage

import { PasswordInput } from '@welcome-ui/password-input'

Default #

function () {
const [value, setValue] = React.useState('')
const handleChange = (event) => {
setValue(event.target.value)
}
return <PasswordInput name="password" onChange={handleChange} value={value} />
}

With Field #

function () {
const [value, setValue] = React.useState('')
const handleChange = (event) => {
setValue(event.target.value)
}
return (
<Field label="Password" required>
<PasswordInput name="password2" onChange={handleChange} value={value} />
</Field>
)
}

Properties #

NameType(s)DefaultRequired
autoFocus
Boolean
disabled
Boolean
icon
Element
iconPlacement
"right"
"left"
isClearable
Boolean
name
string
onBlur
(event: FocusEvent<HTMLInputElement, Element>) => void
onChange
(event: ChangeEvent<HTMLInputElement>) => void
onFocus
(event: FocusEvent<HTMLInputElement, Element>) => void
onKeyDown
(event: KeyboardEvent<HTMLInputElement>) => void
placeholder
string
type
string
value
string
size
"sm"
"md"
"lg"
variant
"error"
"focused"
"info"
"success"
"warning"

Packages #

Dependencies #
Peer dependencies #