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 TextField is used to get user input in a text field.

Label

Open in Playroom

Size

Use size property to set the size of field.

Regular

Small

Open in Playroom

Label

Use label property to set the label.

User name

Open in Playroom

Label tip

Use tip property to add a tooltip next to label.

User name

Open in Playroom

Secondary Label

Use secondaryLabel property to set the secondary label.

Credit card

Open in Playroom

Description

Use description property to add a note below the field.

User name

We will use this name in future communications

Open in Playroom

Disabled

Use disabled property to disable the field.

User name

Open in Playroom

Error

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

Display name

Only letters

Open in Playroom

Prefix & Suffix

Use prefix and suffix properties to add some content within the field on the left and right sides.

EUR

http://

.com

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

suffix

Content to display after the field.

ReactNode

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