Input

Props

Name	Type	Description
allowedSymbols	PredefinedAllowedSymbols \| RegExp type PredefinedAllowedSymbols = 'numbers'	Put `numbers` to allow numbers only or a RegExp to use your own pattern
defaultValue	string \| null	Default value
forbiddenSymbols	PredefinedForbiddenSymbols \| RegExp type PredefinedForbiddenSymbols = 'numbers'	Put `numbers` to forbid numbers only or a RegExp to use your own pattern
hasClearButton	boolean	Whether or not to show a clear button inside the input element. Default is `false`
isDisabled	boolean	Disable the component
letterCase	'lower' \| 'upper'
maxLength	number	Max number of characters
onBlur	(event: BlurEvent) => void interface BlurEvent extends React.FocusEvent<HTMLInputElement> { component: { value: string, name?: string, isValid: boolean, }, }	The event has a new field `component` which has all component data
onChange	(event: ChangeEvent) => void type ChangeEvent = TypeEvent \| ClearEvent \| ResetEvent	The event has a new field `component` which has all component data. Event type depends on the way the value is changed.
	interface TypeEvent extends React.ChangeEvent<HTMLInputElement> { component: { value: string, name?: string, }, }	`TypeEvent` appears when the value is changed by typing.
	interface ClearEvent extends React.MouseEvent<HTMLInputElement> { component: { value: string, name?: string, }, }	`ClearEvent` appears when the value is changed by clicking clear button.
	interface ResetEvent { currentTarget?: undefined, component: { value: string, name?: string, }, }	`ResetEvent` appears when the value is changed by resetting value via `form` api
onEnterPress	interface EnterPressEvent extends React.KeyboardEvent<HTMLInputElement> { component: { value: string, name?: string, }, }	Enter press handler
onFocus	interface FocusEvent extends React.FocusEvent<HTMLInputElement> { component: { value: string, name?: string, isValid: boolean, }, }	Focus handler
placeholder	string	Placeholder
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.Input
  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.Input
  onChange={({ component }) => console.log(component.value)}
  form='input_form'
  name='input'
  isRequired
  requiredMessage='Please enter something'
  validator={(val) => val.length > 3}
  invalidMessage='No less than 4 symbols'
  _w-48
/>
<br />
<L.Button
  form='input_form'
  onClick={({ form }) => console.log(form)}
>
  Click me
</Button>
</>

Customization props

Name	Type
inputRender	CustomRender<InputProps, InputState, React.InputHTMLAttributes<HTMLInputElement>>,
invalidMessageRender	CustomRender<ValidationProps, ValidationState, InvalidMessageProps>,
wrapperRender	CustomRender<InputProps, InputState, DivProps>
	interface CustomRender<P, S, E> { (props: RenderEvent<P, S, E>): React.ReactNode, } interface RenderEvent<P = {}, S = {}, E = {}> { Element: React.ElementType, componentProps: P, componentState: S, elementProps: E, }

() => {
  const [value, setValue] = React.useState('')

  return (
    <L.Input
      onChange={({ component }) => setValue(component.value)}
      value={value}
      placeholder='4 symbols and more plz'
      inputRender={({ Element, elementProps }) => {
        return (
          <>
            <Element {...elementProps} />
            <L.Icon
              icon='check'
              shouldRender={value.length >= 4}
              stroke='green'
              _mr-2
            />
          </>
        )
      }}
      _w-60
    />
  )
}

Theme

Theme prop	CSS class name
closeIcon	ld-input-clear-icon
icon	ld-input-icon
iconLeft	ld-icon-left
iconRight	ld-icon-right
input	ld-input-element
inputWrapper	ld-input-element-wrapper
inputWrapperDisabled	ld-disabled
inputWrapperFocused	ld-focused
inputWrapperInvalid	ld-danger
inputWrapperRequired	ld-required
wrapper	ld-input-wrapper


<L.Input
  form='themeInputForm'
  name='input'
  isRequired
  onChange={({ component }) => console.log(component.value)}
  _w-48
  theme={{
    inputWrapperRequired: 'border-orange-300'
  }}
/>