Input

TextInputs are used to allow users to enter information like names, numbers, urls, email addresses or passwords.

Example

0/255

Usage

NameTypeDescription
defaultValuestringThe default value to put into the component, without making it controlled
requiredboolIndicates that this field is requiredDefault: false
iconenumIcon shown on the left of the input field (See Icon component for all possible values) *
name (required)stringThe name of this input field
labelstringThe label of the input
typeenumType, can be: 'tel', 'number', 'text', 'url', 'email'Default: 'text'
onChangefuncCalled, when the user changes something
valuestringThe value, makes this component a controlled component
linesnumberCan only be used with type=text. Increase to enable multi-line inputDefault: 1
patternstringRegular expression to validate against
minLengthnumberMin number of characters that must be provided
maxLengthnumberMax number of characters that can be provided
onInputReffuncCalled with the input field a referenceDefault: =>
badInputstringError message for bad input
customErrorstringError message for customError
patternMismatchstringError message for patternMismatch
rangeOverflowstringError message for rangeOverflow
rangeUnderflowstringError message for rangeUnderflow
stepMismatchstringError message for stepMismatch
tooLongstringError message for tooLong
tooShortstringError message for tooShort
typeMismatchstringError message for typeMismatch
valueMissingstringError message for valueMissing