Auto complete

const schema = z.object({
  firstName: z.string(),
  lastName: z.string(),
  nickname: z.string(),
  bio: z.string(),
  role: z.enum(['Designer', 'Dev']),
})

export default () => (
  <SchemaForm schema={schema}>
    {({ Field, Button, Errors }) => (
      <>
        <Field name="firstName" autoComplete="given-name" />
        <Field name="lastName" autoComplete="family-name">
          {({ Label, SmartInput, Errors }) => (
            <>
              <Label />
              <SmartInput />
              <Errors />
            </>
          )}
        </Field>
        <Field name="nickname" autoComplete="nickname">
          {({ Label, Input, Errors }) => (
            <>
              <Label />
              <Input autoComplete="off" />
              <Errors />
            </>
          )}
        </Field>
        <Field name="bio" autoComplete="on">
          {({ Label, Multiline, Errors }) => (
            <>
              <Label />
              <Multiline />
              <Errors />
            </>
          )}
        </Field>
        <Field name="role" autoComplete="organization">
          {({ Label, Select, Errors }) => (
            <>
              <Label />
              <Select />
              <Errors />
            </>
          )}
        </Field>
        <Errors />
        <Button />
      </>
    )}
  </SchemaForm>
)