With @k8ordo/ui

Give FormControl only what it uses: the label, the error, invalid and required. It creates the id and the aria-* links itself.

const title = form.field('title');

<FormControl
  errorText={title.error}
  invalid={title.invalid}
  label="Title"
  required={title.required}
  renderInput={(props) => <TextField {...props} {...title.input} />}
/>

Spread input after the props FormControl hands over. Nothing has to be taken out first: TextField renders the date and time types too, and Textarea drops the type a <textarea> does not have.

Every field keeps its value in the DOM, so a reset restores the submitted values and isDirty reads them. A value a component changes in code — a stepper, a chosen option — arrives as an input event, the way typing does.

For each kind of schema, the components that fit and what to pass besides {...props} {...input}:

• z.string(), z.email(), z.url(), z.iso.*(): TextField or Textarea, with nothing else to pass.
• A password: PasswordInput, whose show/hide toggle keeps working under a spread type.
• z.coerce.number(): NumberField or Slider, which take string bounds and step="any" as they are.
• z.enum([…]): Select, Radio or RadioCard. Pass options, and labelAs="legend" on FormControl for radios.
• z.boolean(), z.literal(true): Checkbox or Switch, with a label and no FormControl.
• z.array(z.enum([…])): CheckboxGroup.Root, CheckboxCard or Autocomplete, with defaultValue from state.values.
• z.file(): FileField.Root, holding a FileField.Trigger and a FileField.ItemList.

Radio and RadioCard take the spread as it is. Unlike a hand-written radio, they read defaultValue as the selected option and put required on every radio.

For required to mean anything on a Select, put { value: '', label: '…' } first in options. A <select> without an empty option always has a choice selected.

A checkbox group echoes as an array. input carries only the name, so pass what was checked back as defaultValue.

const tags = form.field('tags');
const checked = state.values?.tags;

<FormControl
  errorText={tags.error}
  invalid={tags.invalid}
  label="Tags"
  labelAs="legend"
  renderInput={(props) => (
    <CheckboxCard
      {...props}
      {...tags.input}
      defaultValue={Array.isArray(checked) ? checked : []}
      options={options}
    />
  )}
/>

minChecked reaches Autocomplete too. It submits through a hidden <select multiple> that is there even with nothing selected, so the rule has an element to mark, and focus sent there after a failure goes on to the text input.

NumberField renders type="text" to format and step the value, so the browser does not check min and max. It reports an out-of-range value itself with setCustomValidity, in @k8ordo/ui’s wording rather than zod’s — the one place the client’s text is not zod’s own.

A regex on a field drawn as a Textarea reaches the markup as pattern, but a <textarea> ignores it. The check runs on the server only, and dropped cannot list it, since the derivation does not know which element renders the field.

FileField submits what FileField.ItemList shows: removing a file there removes it from the submission, and a reset empties the list.

form.formError fits Alert, which passes id and tabIndex through to its element, so spreading form.formError.props lets it take focus.

{form.formError.message !== undefined && (
  <Alert
    {...form.formError.props}
    message={form.formError.message}
    tone="error"
  />
)}

Alert has role="alert", so a screen reader may read the message twice: once when it appears, once when focus lands on it. It is the same trade an error summary with an alert role makes.