MaskedInput

Props

Name	Type	Description
defaultValue	string \| null	Default value
isDisabled	boolean	Disable the component
mask	string	# — number (0-9) l — latin alphabet letter (a-Z), will be lowercased L — latin alphabet letter (a-Z), will be uppercased c — cyrillic alphabet letter (а-Я), will be lowercased C — cyrillic alphabet letter (а-Я), will be uppercased x - any symbol w - a number (0-9) or latin alphabet symbol (a-Z) z - a number (0-9) or latin alphabet symbol (a-Z) or cyrillic alphabet symbol Some examples "+52 (###) ###-##-##" // +52 (123) 456-78-90 (phone number) "#### #### #### ####" // 1234 5678 9012 3456 (bank card number) "LL#########LL" // CA123456789NL (international post tracking number)
onBlur	(event: BlurEvent) => void	Blur handler
onChange	(event: ChangeEvent<T>) => void	Value change handler
onEnterPress	(event: EnterPressEvent) => void	Enter press handler
onFocus	(event: FocusEvent) => void	Focus handler
placeholder	string	Placeholder
placeholderChar	string	_ by default
shouldRender	boolean	Pass `false` if you don't want the component to appear
value	string \| null	Component value
_[className]	[x: string]: unknown	E.g.: `_w-48` adds a css class `w-48` to the component's outer wrapper.


<L.MaskedInput
  mask='+52 (###) ###-##-##'
  onChange={({ component }) => console.log(component.value)}
  _w-48
/>

Validation components' props

Name	Type	Description
form	string	Form name
name	string	Component name
isRequired	boolean	If you don't want the field to be empty
isValid	boolean	Controlled valid state
invalidMessage	ReactNode	Text to show when the value does not match requirements
requiredMessage	ReactNode	Text to show when the field is not filled
shouldValidateUnmounted	boolean	The field can still affect form submission even if it is not rendered
validator	Validator \| PredefinedValidator \| RegExp \| ValidatorObject[]
	interface Validator { (value: any): boolean, }	A validator is a function that takes a value and returns true or false depending on the logic it contains E.g. `(value) => value.length > 4`
	type PredefinedValidator = \| 'creditCardNumber' \| 'email' \| 'url'	See predefined validators
	interface ValidatorObject { validator: PredefinedValidator \| RegExp \| Validator, invalidMessage?: string, }	`ValidatorObject` is useful wnen you need to validate a value against several validators and show inividual messages for each. Just use an array of validator objects. E.g. [ { validator: (value) => value.length > 4, invalidMessage: 'More than 4 sympols please' }, { validator: /^\w+$/, invalidMessage: 'Only a-z, A-Z, 0-9 and _ are allowed' } ]

<>
<L.MaskedInput
  mask='LL#########LL'
  onChange={({ component }) => console.log(component.value)}
  form='mi_form'
  name='mi'
  isRequired
  requiredMessage='Please enter something'
  validator={(val) => val.length > 3}
  invalidMessage='No less than 4 symbols'
  _w-48
/>
<br />
<L.Button
  form='mi_form'
  onClick={({ form }) => console.log(form)}
>
  Click me
</Button>
</>

Customization props

Name	Type
inputRender invalidMessageRender wrapperRender	({ Element, elementprops, componentProps, componentState }): React.ReactNode	Customization


<L.MaskedInput
  mask='#### #### #### ####'
  onChange={({ component }) => console.log(component.value)}
  _w-48
/>