Check out our talk at Remix Conf!

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 () => (
  <Form
    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="..."
  />
)