Homecomponentsinput

PasswordField

A field for getting sensitive text.

The PasswordField component is used to get user's password.

Open in Playroom

Size

Use size property to set the size of input.

Regular

Small

Open in Playroom

Label

Use label property to set the label.

Password

Open in Playroom

Label tip

Use tip property to add a tooltip next to label.

Password

Open in Playroom

Secondary Label

Use secondaryLabel to add a seconday label.

Password

Open in Playroom

Description

Use description property to add a note below the input.

Password

Password should contain at least 8 characters, one uppercase letter, one lowercase, and number.

Open in Playroom

Disabled

Use disabled property to disable the input.

Password

Open in Playroom

Error

Use errorMessage property to add an error message below the input.

Password

Password should contain at least 8 characters

Open in Playroom

API

onChange

Required

Called when the field's value is changed by the user.

(value: string) => void

name

Required

Name for the field.

string

textAlign

Aligns the text horizontally.

center

end

start

size

Size of the field.

small

regular

disabled

Disables the field.

true

false

data

An object with the data keys and values.

DataAttributeMap

label

Adds a label to the field.

string

ID of the field.

string

placeholder

Placeholder of the text field.

string

prefix

Content to display before the field.

ReactNode

onBlur

Action to perform when the field is blurred.

FocusEventHandler<HTMLInputElement>

onKeyDown

Action to perform when a key is pressed.

KeyboardEventHandler<HTMLInputElement>

value

Value of the text field.

string

required

Indicates the field is required.

true

false

maxLength

Maximum character length for an field.

number

tip

Tooltip shown next to the label.

string

secondaryLabel

Adds a secondary label to the field.

ReactNode

description

Note shown below the field.

string

errorMessage

Displays an error message under the field.

string

ref

Ref<HTMLInputElement>

key

Key | null