@velox/form

Form state + validation. Wires the existing field components (TextInput, Select, Checkbox, …) to a useForm hook. Schema-agnostic — any object with a safeParse(values) method works (Zod directly).

Install

npm install @velox/form

Usage

import { useForm, FormField } from '@velox/form'
import { TextInput } from '@velox/react'
import { z } from 'zod'
 
const schema = z.object({ email: z.string().email() })
 
function Login() {
  const form = useForm({ defaultValues: { email: '' }, schema, onSubmit: save })
  return (
    <FormField form={form} name="email" label="Email">
      <TextInput value={form.values.email}
                 onChangeText={(v) => form.setValue('email', v)}
                 onBlur={() => form.setTouched('email')} />
    </FormField>
  )
}

useForm returns { values, errors, touched, submitting, setValue, setTouched, handleSubmit, isValid, reset }.

@velox/markdown @velox/drag-drop