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(),
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 (
onSubmit={() => {}}
field: {
required: "Fixed!",

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