Go Main page
Go Main page

Web components

cover

components

Input

v.1.0.0 | Saturn

Import

1
import { Input } from '@kubit-ui-web/react-components';

Props

Let's delve into the versatility of the input component by examining all its avalaible props.

Uncontrolled

PropertyTypeDefaultDescription
variant
Required
String-Variant to add styles
idString-Id of the input
overrideStylesInputStylesProps-Styles that need to be overridden on the basic input
errorBoolean-Specifies if the input element has error or not
disabledBoolean-Specifies if the input element is disabled or not
valueString or Number-Value of the input
errorExecutionERROR_EXECUTION-When error handling occurs
internalErrorExecutionINTERNAL_ERROR_EXECUTIONonChangeOnBlurWhen internal error handling occurs
keyValidationString-Key validation to use in validationValue hook
regexString-Custom regex instead of maskType
onInternalErrors
(errors: string) => void
-Function that is called when an internal error occurs
onError(error: boolean) => void-Function that is called when an error occurs
nameString-Specifies the name of the input element
typeInputTypeTypeTEXTThe type attribute specifies the type of input element to display. If the type attribute is not specified, the default type is text
truncateBooleanfalseIndicates if text value is truncated when is too big
disableArrowUpDownInputNumberBooleanfalseDisable arrows up and down when input type is number
placeholderString-Placeholder Input
autocompleteAUTOCOMPLETE_TYPEundefinedSpecifies whether an input field should have autocomplete on or off. Autocomplete allows the browser to predict the value.
disableCopyAndPasteBooleanfalseDisable copying and pasting
maxLengthNumber-Defines the maximum number of characters the user can enter into an input. This must be an integer value 0 or higher
minLengthNumber-Defines the minimum number of characters the user can enter into an input. This must be an integer value 0 or higher. If no minlength is specified, or an invalid value is specified, the input has no minimum length.
minNumber-Specifies the minimum value for an input field. The min and max attributes work with the following input types: number, range, date, datetime-local, month, time and week.
maxNumber-Specifies the maximum value for an input field. The min and max attributes work with the following input types: number, range, date, datetime-local, month, time and week.
ignoreKeysString-Keys ignores in the onKeyDown function
inputModeInputModeTypetextInputMode for the input
formatNumberFormatNumber-Configuration for add thousand separators in input using Intl.NumberFormat (default locale `en-US`) (the HTML input element with type="number" does not support thousand separators). Internally we modify the type from input to text when the `formatNumber` prop exists. The value returned by the event is of type string.
localeString-Language of the specified date in the user agents timezone
leftContentString or JSX.Element-Prefix content
leftExtraStylesCSSProp-Styles needed for prefix content
rightContentString or JSX.Element-Suffix content
rightExtraStylesCSSProp-Styles needed for prefix content
topExtraStylesCSSProp-Styles needed for top content
bottomExtraStylesCSSProp-Styles needed for bottom content
centerExtraStylesCSSProp-Styles needed for center content
extraAriaLabelledByString''Allow to extend input "aria-labelledby"
aria-labelString-Aria label of the input
aria-labelledbyString-Aria labelledby of the input
aria-describedbyString-Aria describedby of the input
aria-invalidBoolean-Aria invalid of the input
aria-disabledBoolean-Aria disabled of the input
aria-expandedBoolean-Indicates if a popover is expanded or collapsed. (Used for inputSearch and inputDropdown components)
aria-haspopupAriaHasPopupType-Indicates that the combobox opens a dialog.
aria-controlsString-Identifies the element (or elements) whose contents or presence are controlled by the element on which this attribute is set. (Used for inputSearch component)
roleROLES-Prop used for accesibility to asign a rol
maskString-Mask input, is made with #, Example: ##-##-##.
maskTypeMASK_TYPE-Type of the mask
onFocusFocusEventHandler-Function that is called when focus on the component
onBlurFocusEventHandler-Function that is called when blur the component
onChangeChangeEventHandler-Function that is called when writting on the component
onKeyDownKeyboardEventHandler-Function that is triggered anytime the user presses a key on their keyboard
onClickMouseEventHandler-Function that is called when click on the component
errorMessageInputErrorMessageType-In the error state, the field is accompanied by a description of the problem to help resolve it.
errorIconIElementOrIcon-In the error state, the field is accompanied by an error mbIcon and a description of the problem to help resolve it.
errorAriaLiveTypeAriaLiveOptionTypePOLITEError message aria-live type
helpMessageInputHelpMessageType-Classic help text to give some more idea or condition about what is requested.
informationAssociatedValueInputInformationAssociatedValueType-In some cases, when the user enters data in the input, a (non-clickable) block with related information is displayed below, such as the name of the bank related to the account number.
informationAssociatedButtonString-Add button for associated information
textCounterReactNode-Element that allows to know the proximity to reach the limit of characters established for that input. The maximum number of characters will depend on the need of the flow, it should be customizable by property.
requiredBoolean-Required input option
labelInputLabelType-Text of the input label. Indicates the information requested from the user.
additionalInfoReactNode-This element is displayed to the right of the label secondary.
secondaryLabelReactNode-This element is displayed to the right of the label when the input is not mandatory to filled.
titleInputTitleType-Input title
loadingBoolean-Show or not loader in input
loaderILoader-Loader component of the input
icon
Deprecated
IElementOrIcon-The input can contain an icon to help contextualize the user in relation to the information that is requested.
iconPosition
Deprecated
InputIconPositionRIGHTSet icon position
rightIconIElemenOrIcon-Icon to show on the right side of the input.
leftIconIElemenOrIcon-Icon to show on the left side of the input.
dataTestIdString-Test id of the input. Internal components will concatenate from this test id
ctvInputStylesProps-Modify styles for the default version of the component

Controlled

PropertyTypeDefaultDescription
variant
Required
String-Variant to add styles
idString-Id of the input
overrideStylesInputStylesProps-Styles that need to be overridden on the basic input
nameString-Specifies the name of the input element
typeInputTypeTypeTEXTThe type attribute specifies the type of input element to display. If the type attribute is not specified, the default type is text
truncateBooleanfalseIndicates if text value is truncated when is too big
disableArrowUpDownInputNumberBooleanfalseDisable arrows up and down when input type is number
placeholderString-Placeholder Input
autocompleteAUTOCOMPLETE_TYPEundefinedSpecifies whether an input field should have autocomplete on or off. Autocomplete allows the browser to predict the value.
disableCopyAndPasteBooleanfalseDisable copying and pasting
maxLengthNumber-Defines the maximum number of characters the user can enter into an input. This must be an integer value 0 or higher
minLengthNumber-Defines the minimum number of characters the user can enter into an input. This must be an integer value 0 or higher. If no minlength is specified, or an invalid value is specified, the input has no minimum length.
minNumber-Specifies the minimum value for an input field. The min and max attributes work with the following input types: number, range, date, datetime-local, month, time and week.
maxNumber-Specifies the maximum value for an input field. The min and max attributes work with the following input types: number, range, date, datetime-local, month, time and week.
ignoreKeysString-Keys ignores in the onKeyDown function
inputModeInputModeTypetextInputMode for the input
formatNumberFormatNumber-Configuration for add thousand separators in input using Intl.NumberFormat (default locale `en-US`) (the HTML input element with type="number" does not support thousand separators). Internally we modify the type from input to text when the `formatNumber` prop exists. The value returned by the event is of type string.
localeString-Language of the specified date in the user agents timezone
leftContentString or JSX.Element-Prefix content
leftExtraStylesCSSProp-Styles needed for prefix content
rightContentString or JSX.Element-Suffix content
rightExtraStylesCSSProp-Styles needed for prefix content
topExtraStylesCSSProp-Styles needed for top content
bottomExtraStylesCSSProp-Styles needed for bottom content
centerExtraStylesCSSProp-Styles needed for center content
extraAriaLabelledByString''Allow to extend input "aria-labelledby"
aria-labelString-Aria label of the input
aria-labelledbyString-Aria labelledby of the input
aria-describedbyString-Aria describedby of the input
aria-invalidBoolean-Aria invalid of the input
aria-disabledBoolean-Aria disabled of the input
aria-expandedBoolean-Indicates if a popover is expanded or collapsed. (Used for inputSearch and inputDropdown components)
aria-haspopupAriaHasPopupType-Indicates that the combobox opens a dialog.
aria-controlsString-Identifies the element (or elements) whose contents or presence are controlled by the element on which this attribute is set. (Used for inputSearch component)
roleROLES-Prop used for accesibility to asign a rol
maskString-Mask input, is made with #, Example: ##-##-##.
maskTypeMASK_TYPE-Type of the mask
onFocusFocusEventHandler-Function that is called when focus on the component
onBlurFocusEventHandler-Function that is called when blur the component
onChangeChangeEventHandler-Function that is called when writting on the component
onKeyDownKeyboardEventHandler-Function that is triggered anytime the user presses a key on their keyboard
onClickMouseEventHandler-Function that is called when click on the component
errorMessageInputErrorMessageType-In the error state, the field is accompanied by a description of the problem to help resolve it.
errorIconIElementOrIcon-In the error state, the field is accompanied by an error mbIcon and a description of the problem to help resolve it.
errorAriaLiveTypeAriaLiveOptionTypePOLITEError message aria-live type
helpMessageInputHelpMessageType-Classic help text to give some more idea or condition about what is requested.
informationAssociatedValueInputInformationAssociatedValueType-In some cases, when the user enters data in the input, a (non-clickable) block with related information is displayed below, such as the name of the bank related to the account number.
informationAssociatedButtonString-Add button for associated information
textCounterReactNode-Element that allows to know the proximity to reach the limit of characters established for that input. The maximum number of characters will depend on the need of the flow, it should be customizable by property.
requiredBoolean-Required input option
labelInputLabelType-Text of the input label. Indicates the information requested from the user.
additionalInfoReactNode-This element is displayed to the right of the label secondary.
secondaryLabelReactNode-This element is displayed to the right of the label when the input is not mandatory to filled.
titleInputTitleType-Input title
loadingBoolean-Show or not loader in input
loaderILoader-Loader component of the input
icon
Deprecated
IElementOrIcon-The input can contain an icon to help contextualize the user in relation to the information that is requested.
iconPosition
Deprecated
InputIconPositionRIGHTSet icon position
rightIconIElemenOrIcon-Icon to show on the right side of the input.
leftIconIElemenOrIcon-Icon to show on the left side of the input.
dataTestIdString-Test id of the input. Internal components will concatenate from this test id
ctvInputStylesProps-Modify styles for the default version of the component