Text Input
There are two important components for text input: the base one and the complete. The base one is the Input.Input and Input.TextArea components, which are the basic input and textarea components. The complete one is the Input.TextField and Input.TextAreaField component, which is a wrapper around the base components that adds a label, error message, and other features.
The element has no React internal state. You can use the onValue API to directly get the string value.
This is an error message that is very long and will be truncated
This is an error message that is very long and will be truncated
Variant
There is two main variants: outlined (the default) and underlined.
Size
There are three sizes: small (sm), medium (md) (the default) and large (lg). The size can be set on the input itself or on the wrapper component. The wrapper component will override the size of the input.
Floating label
For both variants, it is possible to have a floating label. The label will be displayed inside the input when it is empty and will move to the top when the input is focused or has a value.
Label position
The label can be positioned on the top (default) or left of the input. That is useless in floating label mode.
Required
When the element is invalid (required, size or pattern not respected), a red mark is put. You can also put the element in invalid state with aria-invalid="true" to force the red mark. A one line space is let freee to show an error message.
This field is required
This field is too long to be show in a unique line, help me to reduce it please, i need a lot of help cause it is hard
Disabled
Read Only
Adornment
You can put an icon on the left or right of the input. The icon can be a string (the name of the icon) or a React component.
TextArea
Except the type, the API for textArea is the same than for the inputs.
Read Only
As normal inputs, the readonly attribute is supported. It is not possible to edit the value of the input, but it is possible to select the text