Text Field
Text field lets users enter and edit single line text.

Usage

All form fields have a required name property, so that's the only property you have to pass to TextField to start using it. If you need to handle its change events - add an onChange property to it.

Controlled/uncontrolled value

Like when using native inputs in React, TextField can be used as controlled or uncontrolled component. By default, TextField is uncontrolled and lets you define its default value using defaultValue property. In this case all change events will be handled automatically. This approach is helpful when you're pre-filling a form from a data source but you don't need to control the further behavior of the input.

However, it's not possible to control the input value with your product code when using an uncontrolled component. To solve this, React provides a way to define component as controlled and use value property instead. That will give you full control of the component value and will stop handling the value automatically. Therefore, you will have to update it manually using onChange handler.

States

When a field status has to be highlighted, hasError property can be used to guide the user.

TextField can be disabled with disabled flag. Keep in mind, that disabling the field will remove it from the form submit url by default.

Colors

When used on colored backgrounds, you may want to make TextField more subtle. However, you can't just use a specific color for its styles because every theme might have a different color palette. Therefore we're providing and inherit color value that will use the current text color to style the input.

Slots

TextField has slots on both, left and right sides, which you can use for displaying inline content, like text, icons or inline actions.

@gmail.com

Using as a form control

To let user know what data you expect them to type in, add labels or status messages to your fields with the help of FormControl utility. Adding a placeholder should help even further by defining the format of data used in the field.

Note: Don't use placeholders as labels for the fields as users won't see the placeholder when input contains a value.

Data types

TextField can be used with any type of data supported by the browsers.

Accessibility

When using TextField without label - make sure to provide a text description for it. You can either provide the label by using FormControl utility or by passing inputAttributes={{ 'aria-label': 'Your label' }} to the component if you don't want to display it visually.

Properties

NameTypeDefaultRequiredComment
namestring-true
idstring-falseCustom id override
disabledboolean-false
hasErrorboolean-false
placeholderstring-false
startSlotReactNode-false
endSlotReactNode-false
valueboolean-falseControlled value
defaultValueboolean-falseUncontrolled value
onChange({ name, value, event }) => {}-false
classNamestring-falseclassName for the root element
attributesobject-falseAttributes for the root element
inputAttributesobject-falseAttributes for the input element