- | defaultValue |
-
- string
- |
- Initial value of the input, only when it is uncontrolled. |
- - |
-
-
- | value |
+ action |
- string
+ {actionTypeString}
|
- Value of the input. If undefined, the component will be uncontrolled and the value will be managed
- internally by the component.
+ Action to be displayed on the right side of the input.
|
- |
- | label |
+ ariaLabel |
string
|
- Text to be placed above the input. Under the hood, this prop also serves as an accessible label for the
- list of suggestions.
+ Specifies a string to be used as the name for the textInput element when no label is
+ provided.
|
- - |
-
-
- | name |
- string
+ 'Text input'
|
- Name attribute of the input element. |
- - |
- | helperText |
-
- string
- |
- Helper text to be placed above the input. |
- - |
-
-
- | placeholder |
+ autocomplete |
string
|
- Text to be put as placeholder of the input. |
- - |
-
-
- | action |
-
- {
- "{ icon: string | (React.ReactNode & React.SVGProps ); onClick: () => void; title?: string }"
- }
-
+ HTML autocomplete attribute. Lets the user specify if any permission the user agent has to
+ provide automated assistance in filling out the input value. Its value must be one of all the possible
+ values of the HTML autocomplete attribute. See{" "}
+ MDN{" "}
+ for further information.
|
- Action to be shown in the input. It has the following properties:
-
- -
- icon: Icon to be placed in the action. It can be either an icon from{" "}
-
- Material Symbols
- {" "}
- (string) or a SVG component.
-
- -
- onClick: Function to be called when the action button is clicked.
-
- -
- title: Text representing advisory information related to the button's action. Under the hood,
- this prop also serves as an accessible label for the component.
-
-
- Note that if the icon is an URL (string), the component's color styling tokens will not be applied to the
- image.
+ 'off'
|
- - |
| clearable |
@@ -121,6 +81,14 @@ const sections = [
false
+
+ | defaultValue |
+
+ string
+ |
+ Initial value of the input, only when it is uncontrolled. |
+ - |
+
| disabled |
@@ -132,61 +100,84 @@ const sections = [
|
- | optional |
-
- boolean
- |
+ error |
- If true, the input will be optional, showing '(Optional)' next to the label. Otherwise, the field will be
- considered required and an error will be passed as a parameter to the onBlur and{" "}
- onChange functions when it has not been filled.
+ string
|
- false
+ If it is a defined value and also a truthy string, the component will change its appearance, showing the
+ error below the input component. If the defined value is an empty string, it will reserve a space below
+ the component for a future error, but it would not change its look. In case of being undefined or null,
+ both the appearance and the space for the error message would not be modified.
|
+ - |
- | readOnly |
+ helperText |
- boolean
+ string
|
+ Helper text to be placed above the input. |
+ - |
+
+
+ | label |
- If true, the component will not be mutable, meaning the user can not edit the control. In addition, the
- clear action will not be displayed even if the flag is set to true and the custom action will not execute
- its onClick event.
+ string
|
- false
+ Text to be placed above the input. Under the hood, this prop also serves as an accessible label for the
+ list of suggestions.
|
+ - |
- | prefix |
+ margin |
- string
+ 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | Margin
+ |
+
+ Size of the margin to be applied to the component. You can pass an object with 'top', 'bottom', 'left' and
+ 'right' properties in order to specify different margin sizes.
|
- Prefix to be placed before the input value. |
- |
- | suffix |
+ maxLength |
- string
+ number
+ |
+
+ Specifies the maximum length allowed by the input. This will be checked both when the input element loses
+ the focus and while typing within it. If the string entered does not comply the maximum length, the{" "}
+ onBlur and onChange functions will be called with the current value and an
+ internal error informing that the value length does not comply the specified range. If a valid length is
+ reached, the error parameter of both events will not be defined.
|
- Suffix to be placed after the input value. |
- |
- | onChange |
+ minLength |
- {"(val: { value: string; error?: string }) => void"}
+ number
|
- This function will be called when the user types within the input element of the component. An object
- including the current value and the error (if the value entered is not valid) will be passed to this
- function. If there is no error, error will not be defined.
+ Specifies the minimum length allowed by the input. This will be checked both when the input element loses
+ the focus and while typing within it. If the string entered does not comply the minimum length, the{" "}
+ onBlur and onChange functions will be called with the current value and an
+ internal error informing that the value length does not comply the specified range. If a valid length is
+ reached, the error parameter of both events will not be defined.
|
- |
+
+ | name |
+
+ string
+ |
+ Name attribute of the input element. |
+ - |
+
| onBlur |
@@ -200,36 +191,30 @@ const sections = [
| - |
- | error |
+ onChange |
- string
+ {"(val: { value: string; error?: string }) => void"}
|
- If it is a defined value and also a truthy string, the component will change its appearance, showing the
- error below the input component. If the defined value is an empty string, it will reserve a space below
- the component for a future error, but it would not change its look. In case of being undefined or null,
- both the appearance and the space for the error message would not be modified.
+ This function will be called when the user types within the input element of the component. An object
+ including the current value and the error (if the value entered is not valid) will be passed to this
+ function. If there is no error, error will not be defined.
|
- |
- | suggestions |
+ optional |
- {"string[] | ((value: string) => Promise )"}
+ boolean
|
- These are the options to be displayed as suggestions. It can be either an array or a function:
-
- -
- Array: List of options that will be filtered by the user's input.
-
- -
- Function: This function will be called when the user changes the value. It will receive the new
- value as a parameter and should return a promise that resolves to an array with the filtered options.
-
-
+ If true, the input will be optional, showing '(Optional)' next to the label. Otherwise, the field will be
+ considered required and an error will be passed as a parameter to the onBlur and{" "}
+ onChange functions when it has not been filled.
+ |
+
+ false
|
- - |
| pattern |
@@ -246,58 +231,41 @@ const sections = [
- |
- | minLength |
-
- number
- |
+ placeholder |
- Specifies the minimum length allowed by the input. This will be checked both when the input element loses
- the focus and while typing within it. If the string entered does not comply the minimum length, the{" "}
- onBlur and onChange functions will be called with the current value and an
- internal error informing that the value length does not comply the specified range. If a valid length is
- reached, the error parameter of both events will not be defined.
+ string
|
+ Text to be put as placeholder of the input. |
- |
- | maxLength |
-
- number
- |
+ prefix |
- Specifies the maximum length allowed by the input. This will be checked both when the input element loses
- the focus and while typing within it. If the string entered does not comply the maximum length, the{" "}
- onBlur and onChange functions will be called with the current value and an
- internal error informing that the value length does not comply the specified range. If a valid length is
- reached, the error parameter of both events will not be defined.
+ string
|
+ Prefix to be placed before the input value. |
- |
- | autocomplete |
+ readOnly |
- string
+ boolean
|
- HTML autocomplete attribute. Lets the user specify if any permission the user agent has to
- provide automated assistance in filling out the input value. Its value must be one of all the possible
- values of the HTML autocomplete attribute. See{" "}
- MDN{" "}
- for further information.
+ If true, the component will not be mutable, meaning the user can not edit the control. In addition, the
+ clear action will not be displayed even if the flag is set to true and the custom action will not execute
+ its onClick event.
|
- 'off'
+ false
|
- | margin |
-
- 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | Margin
- |
+ ref |
- Size of the margin to be applied to the component. You can pass an object with 'top', 'bottom', 'left' and
- 'right' properties in order to specify different margin sizes.
+ {"React.Ref"}
|
+ Reference to the component. |
- |
@@ -311,35 +279,54 @@ const sections = [
- | tabIndex |
+ suffix |
- number
+ string
|
+ Suffix to be placed after the input value. |
+ - |
+
+
+ | suggestions |
- Value of the tabindex attribute.
+ {"string[] | ((value: string) => Promise )"}
|
- 0
+ These are the options to be displayed as suggestions. It can be either an array or a function:
+
+ -
+ Array: List of options that will be filtered by the user's input.
+
+ -
+ Function: This function will be called when the user changes the value. It will receive the new
+ value as a parameter and should return a promise that resolves to an array with the filtered options.
+
+
|
+ - |
- | ref |
+ tabIndex |
- {"React.Ref"}
+ number
+ |
+
+ Value of the tabindex attribute.
+ |
+
+ 0
|
- Reference to the component. |
- - |
- | ariaLabel |
+ value |
string
|
- Specifies a string to be used as the name for the textInput element when no label is
- provided.
+ Value of the input. If undefined, the component will be uncontrolled and the value will be managed
+ internally by the component.
|
- 'Text input' |
+ - |
@@ -372,15 +359,13 @@ const sections = [
},
];
-const TextInputCodePage = () => {
- return (
-