Field

A polymorphic input component supporting multiple types with built-in validation, character limits, and error handling.

import { Field } from '@kaynora/ui'

export default function () {
  return (
    <Field label='Full name' />
  )
}

The type prop determines the input type. Supported types include text, textarea, number, email, and password.

import { Field } from '@kaynora/ui'

export default function () {
  return (
    <div style={{
      display: 'flex',
      flexFlow: 'column',
      gap: '15px',
    }}>
      <Field label='Email' type='email' />
      <Field label='Password' type='password' />
      <Field label='Age' type='number' />
      <Field label='Message' type='textarea' height='8rem' />
    </div>
  )
}

The limit prop sets a maximum character count with a counter displayed in the field.

import { Field } from '@kaynora/ui'

export default function () {
  return (
    <Field label='Bio' type='textarea' limit={100} />
  )
}

The errors prop accepts an array of error objects with states and messages that display when conditions are met.

import { Field } from '@kaynora/ui'
import { useState } from 'react'

export default function () {
  const [value, setValue] = useState('')

  return (
    <Field
      label='Username'
      value={value}
      onChange={setValue}
      errors={[
        { failState: value.length < 3 && value.length > 0, message: 'Minimum 3 characters required' }
      ]}
    />
  )
}

<Field />

string

'text' | 'textarea' | 'number' | 'email' | 'password'

string

number

boolean

string

string

{ failState: boolean, message: string }[]

string

string

(value: string) => void

boolean

{
  root: HTMLDivElementProps
  typography: TypographyProps
  input: HTMLElementProps
  counter: HTMLDivElementProps
  errors: HTMLDivElementProps
}