Field types

The input that field() returns carries these attributes. Spread it onto the control as it is.

z.string() becomes a text field. .min(), .max() and .regex() become minlength, maxlength and pattern.

z.object({
  handle: z.string().min(3).max(20).regex(/^[a-z0-9_]+$/),
});

// handle.input
// { name: 'handle', type: 'text', required: true,
//   minLength: 3, maxLength: 20, pattern: '^[a-z0-9_]+$' }

z.email() and z.url() become type="email" and type="url", and the browser checks the format.

bio: z.string().min(1).optional(),
bio: z.string().max(200),

The z.iso formats become the browser’s date and time controls. The value arrives as an ISO string.

z.object({
  day: z.iso.date(),
  start: z.iso.time(),
  doors: z.iso.datetime({ local: true }),
});

For a Date, use z.coerce.date(), which derives a text field. z.date() cannot accept a string, so formFields refuses it.

Write a numeric field with z.coerce.number(). It becomes type="number", and .min() and .max() become min and max.

z.object({
  seats: z.coerce.number().int().min(1).max(500),
  price: z.coerce.number().multipleOf(0.01).optional(),
});

// seats.input → { type: 'number', required: true, step: 1, min: 1, max: 500 }
// price.input → { type: 'number', step: 0.01 }

step is 1 after .int(), the given value after .multipleOf(), and any otherwise, which allows decimals.

An empty numeric field submits nothing; it is not 0. Add .optional() to allow a blank.

Spread a z.enum() field’s input onto a <select>. Put an option with an empty value first, so that required means “choose one”.

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

<select {...format.input}>
  <option value="">Choose a format</option>
  <option value="talk">Talk</option>
  <option value="workshop">Workshop</option>
</select>

With .optional(), the empty option can be submitted as it is.

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

{['talk', 'workshop'].map((option) => (
  <label key={option}>
    <input
      defaultChecked={state.values?.format === option}
      name={format.input.name}
      required={format.input.required}
      type="radio"
      value={option}
    />
    {option}
  </label>
))}

z.boolean() becomes a checkbox. An unchecked box arrives as false, so it is never required.

When the box must be checked, as with agreeing to terms, use z.literal(true).

z.object({
  newsletter: z.boolean(),
  terms: z.literal(true, 'Agree to the terms to continue'),
});

z.object({
  inStock: z.stringbool().default(false),
});

// inStock.input → { name: 'inStock', type: 'checkbox', value: 'true' }

z.array(z.enum()) becomes a group of checkboxes sharing one name. The checked ones arrive as an array, and none checked is [].

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

{['react', 'css', 'a11y'].map((option) => (
  <label key={option}>
    <input
      defaultChecked={Array.isArray(checked) && checked.includes(option)}
      name={tags.input.name}
      type="checkbox"
      value={option}
    />
    {option}
  </label>
))}

A lower bound such as .min(2) has no HTML attribute, so the browser does not check it. Declare the minChecked rule to check it there too.

z.file() becomes a file control, and .mime() becomes accept.

z.object({
  slides: z.file().mime(['application/pdf']).max(10_000_000),
});

// slides.input → { name: 'slides', type: 'file', required: true,
//                  accept: 'application/pdf' }

accept only narrows what the file picker offers; the browser never checks the type. Type and size are checked on the server alone.

After a failed submission, the chosen file does not come back: browsers do not let a file control be given a value.

Mark a field with input: "password" in the schema’s metadata, and it becomes a type="password" field.

password: z.string().min(8).meta({ input: 'password' }),

A password field never sends what was typed back after a failed submission.

password: z.string().check(z.minLength(8), z.meta({ input: 'password' })),