FieldElementProps

Props to spread onto a field element for integration with HonoX form handling.

Definition

• FieldElementProps
  • name string
  • autofocus boolean
  • ref ((element: FieldElement | null) => (() => void) | undefined)
  • onFocus () => void
  • onChange (event: Event) => void
  • onBlur () => void

Explanation

onFocus marks the field as touched and runs the configured 'touch' validation, while onBlur runs the configured 'blur' validation. Neither handler uses the event object, so both are typed as () => void and can be passed to native elements or custom components with different focus event types.

The ref callback registers the field element, which enables methods like focus to control it. It returns a cleanup function that hono/jsx calls when it removes the element, which is how the field unregisters it.

Since hono/jsx types its event handlers with native DOM events, onChange receives a native Event. In addition, hono/jsx maps onChange to the native input event, so the field input is updated on every keystroke and not only when the element loses focus.