Skip to main content

Typesafe Props

Typesafety on component props​

Based on your component mapping, @ts-react/form knows which field should receive which props:

const mapping = [
  [z.string(), TextField] as const,
  [z.boolean(), CheckBoxField] as const,
] as const;

//...
const Schema = z.object({
  name: z.string(),
  password: z.string(),
  over18: z.boolean(),
})
//...
<MyForm
  props={{
    name: {
      // TextField props
    },
    over18: {
      // CheckBoxField props
    }
  }}
/>

Required props​

@ts-react/form is also aware of which props are required, so it will make sure you always pass required props to your components:

Required Props

Here we get an error because <Component/> requires the prop required, and we didn't pass it.

return (
  <Form
    schema={FormSchema}
    onSubmit={() => {}}
    props={{
      field: {
        required: "Fixed!",
      },
    }}
  />
);

Fixed! We get all the same typesafety of writing out the full jsx.