TextInput

Use the TextInput component to request a small amount of information, such as a name or an email address. To let users input larger amounts of text, use a TextArea instead.

OverviewPropertiesUsage

Import

import { TextInput } from '@dynatrace/strato-components/forms';

Demo

This is the simplest version of the TextInput, which is uncontrolled and therefore handles its state internally. You can also set a specific initial value using the defaultValue prop.

Control state

The TextInput can also be controlled, meaning that you can handle the state. To do so, you need to use the onChange prop to provide a handler that is called when the internal state of the TextInput changes. You also need to assign the value from the state to the TextInput by setting the value prop.

Add prefix or suffix

You can add a prefix or a suffix to the TextInput, which can render an icon or a TextInput.Button with a click handler. When using the TextInput.Button that renders an icon or any similar element without any text, use the tooltipText prop to provide a text description for the button. The component automatically uses this text as aria-label while the tooltip is closed and links to the tooltip element via aria-labelledby once the tooltip opens, ensuring a valid accessible name at all times. You can also set aria-label directly, but this skips the automatic aria-labelledby wiring.

Variants

The TextInput can be styled differently using the variant prop. The default visual representation is default, but can also be set to minimal.

Make input read-only

The TextInput can be set to read-only by simply adding the readOnly prop.

Validation

This example shows how you can validate the TextInput using the react-hook-form package, which handles error messages. For connecting the form with the TextInput and validating, you need to register the field with custom error messages and use the useForm hook from react-hook-form. Also, by using the controlState prop, you can override error messages and connect the error state and message of a TextInput to the form's validation state. This shows a hint in case of an error and applies proper styling to the component. The minLength and maxLength can be set on the TextInput as props, as well as when registering the field, to restrict the message length and show custom messages if it doesn't match. You can also use the pattern prop to provide a RegEx that defines which characters are allowed.