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.
Import
import { TextInput } from '@dynatrace/strato-components-preview/forms';
Use cases
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 the 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 a 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, you need to add
either the aria-label prop or the tooltipText prop to provide a text
description for the button.
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 the input read-only
The TextInput can be set to read-only by simply adding the readOnly prop.
Validate
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 the error messages and connect the
TextInput's error state and message to that of the form. 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.
Props
TextInputProps
Signature:
export declare type TextInputProps = <, | | | | | | | | | | | | | | | | | | | | | | | | > & & ( | ) & {
/** Handler that is called when the value changes. */
onChange?: (value: , event: <>) => ;
/**
* Maps to the native input type. Use this to enhance the semantics
* of the native input, change default keyboards on mobile or support browser
* autocompletion for specific types.
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types
*
* @defaultValue
*/
type?: | | | | | ;
};TextInputUncontrolledProps
| Name | Type | Default | Description |
|---|---|---|---|
defaultValue? | - | The default value of the input. |
TextInputControlledProps
| Name | Type | Default | Description |
|---|---|---|---|
value? | - | The value of the input. |
TextInput.Prefix, TextInput.Suffix
You can use the TextInput.Prefix component to render custom content in front
of the input, or the TextInput.Suffix component if you need to render content
after it.
TextInputContentProps
| Name | Type | Default | Description |
|---|---|---|---|
children | - | Elements to be displayed in the Prefix slot. |
TextInput.Button
You can use the TextInput.Button component to render a button inside the
TextInput.Prefix or TextInput.Suffix component.
TextInputButtonProps
, , , | Name | Type | Default | Description |
|---|---|---|---|
children | - | Elements to be displayed in the BaseInput Button slot, preferably an icon or a similar visual element | |
disabled? | false | If a button is disabled e.g. it cannot be interacted with. By default, it inherits the disabled prop of the BaseInput, but can be overwritten. | |
tooltipText? | - | If specified, a tooltip is rendered with this text, which describes what the button does. Please also consider translating the text in an internationalized context and use a short text description for the tooltip. The positioning and placing of the according tooltip will be handled by the component. | |
onClick? | - | Called when the button is interacted with. |