Labels and options

In this example, we add custom labels, placeholders, options, and multiline to some of our fields. The rest is inferred from the schema.

const schema = z.object({
  name: z.string().min(1),
  roleId: z.number().int(),
  bio: z.string().min(1),
})

export default () => (
  <SchemaForm
    schema={schema}
    autoFocus="name"
    labels={{ roleId: 'Role' }}
    placeholders={{ name: 'Your name', bio: 'Your story' }}
    options={{
      roleId: [
        { name: 'Designer', value: 1 },
        { name: 'Dev', value: 2 },
      ],
    }}
    multiline={['bio']}
    pendingButtonLabel="..."
  />
)