Form context
Read field and form state to build your own controls.
Installation
- 1
Add the shadcn/ui components
bunx --bun shadcn@latest add field - 2
Install the packages
bun add @tanstack/react-form zod - 3
Copy the Form context files
Usage
Terminal
import { FormFieldFrame, useFieldRules, useFormField } from "@/components/form/form"
function MyInput() { const { field, controlProps } = useFormField<string>() const rules = useFieldRules("text") return ( <input {...controlProps} value={field.state.value} onChange={(event) => field.handleChange(event.target.value)} /> )}
<FormFieldFrame name="nickname" label="Nickname"> <MyInput /></FormFieldFrame>API reference
Exports
PropDescription
useFormField<T>() => { field, id, labelId, descriptionId, errorId, isInvalid, required, controlProps }Read the current FormField. controlProps holds id, name, onBlur, aria-invalid, aria-required and aria-describedby for your control.useFieldRules(kind?) => FieldRules | undefinedRead the rules the schema helper stored for this field, such as min, max or disablePast.useFormChanges() => { hasChanges, isSubmitting }Whether any value differs from the defaults, and whether the form is submitting.useFormState() => { schema, mode, message, uploads }The schema, create or edit mode, the current form-level error, and image upload progress while submitting.fieldContextReact.ContextContext for a single field.formContextReact.ContextContext for the whole form.useFieldContext<T>() => FieldApi<T>Read the field inside FormField.useFormContext() => FormApiRead the form inside Form.toFieldErrors(errors: Array<unknown>) => Array<{ message?: string }>Turns TanStack errors into the shape FieldError expects. Keeps strings and objects with a string message, drops the rest.