The foundation for your forms. Write one Zod schema and every input picks up its label, rules and errors.
signup-schema.ts
export const signupSchema = z.object({ fullName: nameField(), email: emailField({ blockDisposable: true }), phone: phoneField({ defaultCountry: "KE" }), password: passwordField({ minScore: 3 }),})signup-form.tsx
<Form schema={signupSchema} onSubmit={createAccount}> <FormText name="fullName" /> <FormEmail name="email" /> <FormPhone name="phone" /> <FormPassword name="password" /> <FormSubmit>Create account</FormSubmit></Form>Use a permanent email address
Very strong
The schema does the wiring
Each input reads its label, rules and errors from the field name and the schema.
- Name presets
- Name a field email and it gets its label, type and autocomplete.
- <FormEmail name="email" />label: Emailtype: emailautocomplete: email
- Checks with plain errors
- Typo hints, disposable domains and length rules, in words people understand.
Did you mean amina@gmail.com?
- Create and edit in one form
- In edit mode, save waits for a change and sends only what changed.
- changed: { role }
- No lost work
- FormLeaveGuard asks before anyone leaves with unsaved changes.
Leave without saving? Your changes will be lost.
22 inputs, one shape
Label, control and error in one line of JSX.
Text
FormTextSingle-line text.FormEmailEmail with typo hints, domain checks and code verification.FormPhoneCountry picker and number, checked for the chosen country.FormPasswordShow toggle and an optional strength meter.FormUrlWeb address. Adds https:// when it is missing.FormTextareaMulti-line text with a character counter.FormRichTextFormatted text, stored as HTML.
Number and date
FormNumberNumbers with min, max and whole-number checks. Empty is null.FormSliderA value, or two, inside a range.FormDateType or pick a date. The calendar blocks what the schema rejects.FormDateTimeDate and time inside a window, saved in UTC.FormDateRangeStart and end dates. The end must come after the start.
Choice
FormSelectOne option from a list of any size.FormCountrySearchable country list with flags, saved as an ISO code.FormMultiSelectSeveral options, shown as chips.FormComboboxSearchable list, with remote search and new entries.FormRadioGroupOne choice, every option visible.FormCheckboxGroupSeveral choices, every option visible.FormCheckboxOne yes or no, like accepting terms.FormSwitchOn or off for a setting.
Drag fields, copy the code
Start from one of 11 templates, set the rules per field, then install the form with one command.
TextTextEmail
Number and dateDate rangeSlider
Full name
Email
Stay dates
Guests
npxshadcn@latest add https://fieldkit.muturi.dev/r/builder/…
Start with one command
Install the core, then add only the inputs you use.
bunx --bun shadcn@latest add https://fieldkit.muturi.dev/r/form.json