Submitting radio and dropdown inputs in blitz/next.js with prisma2

So I'm creating a quiz app. So far I can create a question with possible answers and submit to my pgdb. I can't figure out how to deal with checkboxes and dropdown select:

This is now:

Question Title: |________________________|

Answer1: |________________________|

Answer2: |________________________|

Answer3: |________________________|

Answer4: |________________________|

This is what I want:

  • Question must have a category.
  • One of the answers must be flagged as correct.

Question Title: |________________________| Category: |---select----|

Answer1: |________________________| ( ) Correct answer

Answer2: |________________________| ( ) Correct answer

Answer3: |________________________| ( ) Correct answer

Answer4: |________________________| ( ) Correct answer

I am using bitz.js with prisma2 and pgsql.

Here is my createQuestion:

import { resolver } from "blitz"
import db from "db"
import * as z from "zod"

const CreateQuestion = z
  .object({
    title: z.string(),
    category: z.array(z.object({ name: z.string() })),
    answers: z.array(z.object({ text: z.string() })),
  })
  .nonstrict()

export default resolver.pipe(resolver.zod(CreateQuestion), resolver.authorize(), async (input) => {
  const question = await db.question.create({
    data: {
     ...input,
     answers: { create: input.answers },
     category: { create: input.categories },
   },
 })

  return question
})

And here is the new question page:

import { Link, useRouter, useMutation, BlitzPage } from "blitz"
import Layout from "app/core/layouts/Layout"
import createQuestion from "app/questions/mutations/createQuestion"
import { QuestionForm, FORM_ERROR } from "app/questions/components/QuestionForm"


const NewQuestionPage: BlitzPage = () => {
  const router = useRouter()
  const [createQuestionMutation] = useMutation(createQuestion)

  return (
    <div>
      <h1>Create New Question</h1>

      <QuestionForm
        submitText="Create Question"
        initialValues={{ answers: [], categories: [] }}
        onSubmit={async (values) => {
          try {
            const question = await createQuestionMutation(values)
            router.push(`/questions/${question.id}`)
          } catch (error) {
            console.error(error)
            return {
              [FORM_ERROR]: error.toString(),
            }
          }
        }}
      />

      <p>
        <Link href="/questions">
          <a>Questions</a>
        </Link>
      </p>
    </div>
  )
}

NewQuestionPage.authenticate = true
NewQuestionPage.getLayout = (page) => <Layout title={"Create New Question"}>{page}</Layout>

export default NewQuestionPage

Finally here que QuestionForm:

import { Form, FormProps } from "app/core/components/Form"
import { LabeledTextField } from "app/core/components/LabeledTextField"
import * as z from "zod"
export { FORM_ERROR } from "app/core/components/Form"

export function QuestionForm<S extends z.ZodType<any, any>>(props: FormProps<S>) {
  return (
    <Form<S> {...props}>
      <div className="flex">
      <LabeledTextField name="title" label="Titulo" placeholder=" " />

      </div>
      <LabeledTextField name="answers.0.text" label="Choice 1" />
      <LabeledTextField name="answers.1.text" label="Choice 2" />
      <LabeledTextField name="answers.2.text" label="Choice 3" />
      <LabeledTextField name="answers.3.text" label="Choice 4" />
      <LabeledTextField name="answers.4.text" label="Choice 5" />
      <input type="checkbox" name="vehicle1" value="Bike"></input>
      <div></div>
    </Form>
  )
}

I am really new to this, can someone help me adding those two extra fields?