Input

Props

NameTypeDescription
allowedSymbols
PredefinedAllowedSymbols | RegExp type PredefinedAllowedSymbols = 'numbers'

Put numbers to allow numbers only or a RegExp to use your own pattern

defaultValuestring | nullDefault value
forbiddenSymbols
PredefinedForbiddenSymbols | RegExp type PredefinedForbiddenSymbols = 'numbers'

Put numbers to forbid numbers only or a RegExp to use your own pattern

hasClearButtonbooleanWhether or not to show a clear button inside the input element. Default is false
isDisabledbooleanDisable the component
letterCase'lower' | 'upper'
maxLengthnumberMax 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
placeholderstringPlaceholder
valuestring | nullComponent 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

NameTypeDescription
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

NameType
inputRenderCustomRender<InputProps, InputState, React.InputHTMLAttributes<HTMLInputElement>>,
invalidMessageRenderCustomRender<ValidationProps, ValidationState, InvalidMessageProps>,
wrapperRenderCustomRender<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 propCSS class name
closeIconld-input-clear-icon
iconld-input-icon
iconLeftld-icon-left
iconRightld-icon-right
inputld-input-element
inputWrapperld-input-element-wrapper
inputWrapperDisabledld-disabled
inputWrapperFocusedld-focused
inputWrapperInvalidld-danger
inputWrapperRequiredld-required
wrapperld-input-wrapper

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