Field component · Kition Tessera

When to use

Every form control with a visible label.

Examples

Validation

Enter an email address.

field.tsx

import { useState } from 'react'
import { Field, TextInput } from '@kition/tessera-ui'

export default function Demo() {
  const [email, setEmail] = useState('not-an-email')
  const valid = /^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(email)
  return (
    <Field label="Email" hint="We only use it to sign you in." error={valid ? undefined : 'Enter an email address.'}>
      {({ id, describedBy, invalid }) => (
        <TextInput id={id} aria-describedby={describedBy} invalid={invalid} size="md" value={email} onChange={(event) => setEmail(event.target.value)} />
      )}
    </Field>
  )
}

Props

Field

A label, a control, and its help or error, wired together for screen readers.

Prop	Type	Default	Description
`label`required	`ReactNode`	—
`hint`	`ReactNode`	—	Help under the control; replaced by `error` when there is one.
`error`	`ReactNode`	—
`children`required	`ReactNode \| ((ids: { id: string; describedBy: string \| undefined; invalid: boolean }) => ReactNode)`	—	The control. Given a function, it receives the ids to put on it (`id`, `aria-describedby`).
`className`	`string`	—