UI component
FormField
FormField is a context-aware field wrapper. It reads form state from the enclosing Form, auto-detects text vs checkbox binding from the value type, and either clones a single React element child with bindings + chrome props or invokes a render-prop with a full field-args object.
Installation
Install the package in your app.
pnpm add @rapidset/rapidkitUsage
Import components from the package entrypoint.
import { FormField } from '@rapidset/rapidkit';Examples
Preview the component and copy the snippet.
Two ways to bind a field
Pass an element child for primitives, or a render-prop for custom editors.
API Reference
Commonly used props at a glance.
| Prop | Description |
|---|---|
| name | Selects which form value, error, and touched state this field reads and writes. |
| label | Forwards a visible label to the wrapped input primitive. |
| required | Forwards the required asterisk and required attribute to the wrapped input. |
| description | Renders a small descriptive line above the wrapped field. |
| as | Overrides binding detection; defaults to auto, which selects checkbox for boolean values and text otherwise. |
| showUntouchedError | Surfaces validation errors before the field has been touched. |
| children | Accepts either a single React element (clone-injected with bindings) or a render-prop that receives the full field args. |
Accessibility
FormField defers all chrome to the wrapped input primitive, so labels, error text, required markers, and helper text stay attached to the underlying control via its existing aria wiring.
Integration notes
For text and checkbox inputs use the element-child API; for custom editors (rich text, dropdown libraries) use the render-prop API to bind value / onChange / onBlur / error manually.