Email, URL, color, and range

Email and URL

z.email() and z.url() are inferred as specialized email and URL inputs. The older z.string().email() still validates email but is inferred as a plain string. Setting type email on a plain string does not change its native input type in the 1.0.0 renderer; use the specialized constructor.

Color and range

Set type color on a string field to display the browser color picker. Add a schema rule if values must match a particular color format.

Set type range on a string field with min, max, and step for a slider. Its value remains a string. A z.number() field always uses the number renderer, including when type is range; use a custom component for a numeric slider.

Usage

Use your form instance from useForm. See the initial setup.

const schema = z.object({
  email: z.email(),
  website: z.url(),
  color: z.string(),
  volume: z.string(),
});

<ErlForm
  form={form}
  schema={schema}
  fieldConfig={{
    color: { type: "color" },
    volume: { type: "range", min: 0, max: 100 },
  }}
/>

Input variants do not change the Zod data type. See also Textarea and Password.