TextField
An enhanced customizable TextField with validation support
(code example)
info
This component extends TextInput props.
tip
This component support margin, color, typography modifiers.
Usage#
<TextField placeholder={'Placeholder'} floatingPlaceholder onChangeText={onChangeText} enableErrors validate={['required', 'email', (value) => value.length > 6]} validationMessage={['Field is required', 'Email is invalid', 'Password is too short']} showCharCounter maxLength={30}/>API#
centered#
Whether to center the TextField - container and label
boolean
charCounterStyle#
Pass custom style to character counter text
TextStyle
color#
Input color
ColorType
containerProps#
Container props of the whole component
Omit<ViewProps, 'style'>
containerStyle#
Container style of the whole component
ViewStyle
enableErrors#
Should support showing validation error message
boolean
fieldStyle#
Internal style for the field container to style the field underline, outline and fill color
ViewStyle | (context: FieldContextType, props) => ViewStyle
floatOnFocus#
Should placeholder float on focus or when start typing
boolean
floatingPlaceholder#
Pass to add floating placeholder support
boolean
floatingPlaceholderColor#
The floating placeholder color
ColorType
floatingPlaceholderStyle#
Custom style for the floating placeholder
TextStyle
formatter#
Custom formatter for the input value (used only when input if not focused)
(value) => string | undefined
hint#
A hint text to display when focusing the field
string
label#
Field label
string
labelColor#
Field label color. Either a string or color by state map ({default, focus, error, disabled, readonly})
ColorType
labelProps#
Pass extra props to the label Text element
TextProps
labelStyle#
Custom style for the field label
TextStyle
leadingAccessory#
Pass to render a leading element
ReactElement
onChangeValidity#
Callback for when field validity has changed
(isValid: boolean) => void
onValidationFailed#
Callback for when field validated and failed
(failedValidatorIndex: number) => void
placeholder#
The placeholder for the field
string
placeholderTextColor#
Placeholder text color
ColorType
preset#
Predefined preset to use for styling the field
'default' | null | string
readonly#
A UI preset for read only state
boolean
recorderTag#
Recorder Tag
'mask' | 'unmask'
retainValidationSpace#
Keep the validation space even if there is no validation message
boolean
showCharCounter#
Should show a character counter (works only with maxLength)
boolean
showMandatoryIndication#
Whether to show a mandatory field indication
boolean
trailingAccessory#
Pass to render a trailing element
ReactElement
useGestureHandlerInput#
Use react-native-gesture-handler instead of react-native for the base TextInput
boolean
validate#
A single or multiple validator. Can be a string (required, email) or custom function.
Validator | Validator[]
validateOnBlur#
Should validate when losing focus of TextField
boolean
validateOnChange#
Should validate when the TextField value changes
boolean
validateOnStart#
Should validate when the TextField mounts
boolean
validationMessage#
The validation message to display when field is invalid (depends on validate)
string | string[]
validationMessagePosition#
The position of the validation message (top/bottom)
ValidationMessagePosition
validationMessageStyle#
Custom style for the validation message
TextStyle