Homecomponentsinput

TextField

A field to get a single line of plain text.

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

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

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

Ref<HTMLInputElement>

key

Key | null