Input

Input UI Component

Input

Textarea

MaskedInput

API

Input

PropertyDescriptionTypeDefault
addonAfterThe label text displayed after (on the right side of) the input field.string\ReactNode
addonBeforeThe label text displayed before (on the left side of) the input field.string\ReactNode
allowClearAllow to remove input content with clear iconboolean
counterLimitMaximum input length, if provided counter will be shownnumber-
defaultValueThe initial input contentstring
descriptioninput descriptionstring-
disabledWhether the input is disabled.booleanfalse
errorTextError message, if provided input will be set in error statestring-
errorIf provided input will be set in error state, without error messageboolean-
handleInputRefThe callback function that is triggered when Component is mounted.function(ref)-
idThe ID for inputstring
labelInput labelstring-
onChangeCallback when user inputfunction(e)
onPressEnterThe callback function that is triggered when Enter key is pressed.function(e)
prefixThe prefix icon for the Input.string\ReactNode
resetMarginWhether input should have margin resetboolean-
resize'resize' CSS property passed to the input componentnone / both / horizontal / vertical / initial / inherit-
sizeThe size of the input box. Note: in the context of a form, the large size is used. Available: large default smallstringdefault
suffixThe suffix icon for the Input.string\ReactNode
tooltipTooltip contentReactNode-
tooltipConfigConfig of tooltipTooltipProps-
typeThe type of input, see: MDN(use Input.TextArea instead of type="textarea")stringtext
valueThe input content valuestring

MaskedInput

Same as Input api with additional props:

PropertyDescriptionTypeDefault
maskThe masking pattern to be applied to the inputstring (https://github.com/insin/inputmask-core#pattern)-
placeholderCharCustomized placeholder character used to fill in editable parts of the pattern.string'_'
formatCharactersCustomized format character definitions for use in the pattern.Object (https://github.com/insin/inputmask-core#formatcharacters)-

InputGroup

PropertyDescriptionTypeDefault
compactWhether use compact stylebooleanfalse
sizeThe size of Input.Group specifies the size of the included Input fields. Available: large default smallstringdefault