Prism

Homecomponentsinput

Alpha

This component is in development. There could be breaking changes made to it in a non-major release of Prism. Please use with caution.

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

name

Required

Name for the field.

string

onChange

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

((value: string) => void)

ID of the 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>

size

Size of the field.

small

regular

textAlign

Aligns the text horizontally.

center

end

start

disabled

Disables the field.

true

false

data

An object with the data keys and values.

DataAttributeMap

label

Adds a label to the field.

string

placeholder

Placeholder of the text field.

string

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

Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}

Ref<HTMLInputElement>

key

Key | null