The docs didn't have any implementation of a dropdown list with react-hook-form

Maybe you can look at the combobox form implementation and create your own for dropdown

@Siamese Crocodile If you mean a dropdown with an input box as well - then look at the combo-box implementation using cmds like Jarrah said. Otherwise, please clarify your question.

I have a few input fields that take in inputs like first name, last name, email and I also want to add a drop down list that consists of a few items that the user can choose one item from. A combo box without the input box. @Kawakawa

for example, i don't know what to include in the formschema section that represents data from the dropdown. is it a string? or something else?

"use client"

import { zodResolver } from "@hookform/resolvers/zod"
import * as z from "zod"

const formSchema = z.object({
  username: z.string().min(2, {
    message: "Username must be at least 2 characters.",
  }),
})

export function ProfileForm() {
  // 1. Define your form.
  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      username: "",
    },
  })

  // 2. Define a submit handler.
  function onSubmit(values: z.infer<typeof formSchema>) {
    // Do something with the form values.
    // ✅ This will be type-safe and validated.
    console.log(values)
  }
}

ive taken this from the shadcn form's docs

if i were to include a dropdown component in the form, what should the formschema object and the default values look like?

https://ui.shadcn.com/docs/components/select i want to implement this instead of a combobox

okay nvm im stupid. there's literally a section of the docs that implement this component with the Form

One way to allow react hook form to take in data from a dropdown list is to use the Controller component, which allows you to integrate custom components with react hook form. You can pass the name, control, and value props to the Controller, and use the render prop to return the custom dropdown component. You can also use the onChange prop to handle the value change of the dropdown and update the form state accordingly. Here is an example of how you can use Controller with a custom dropdown component:

<Controller
  name="dropdown"
  control={control}
  value={value}
  render={({ field }) => (
    <CustomDropdown
      {...field}
      options={options}
      onChange={(e) => {
        // handle the value change of the dropdown
        const selectedValue = e.target.value;
        // update the form state with the selected value
        field.onChange(selectedValue);
      }}
    />
  )}
/>

You can also use the register function to register the custom dropdown component as a form field, but you need to make sure that the component supports the ref attribute and exposes the value and onChange props. Here is an example of how you can use register with a custom dropdown component²:

<CustomDropdown
  name="dropdown"
  options={options}
  {...register("dropdown")}
/>

For more information on how to use react hook form with custom components, you can check out the official documentation or some of the web search results I found for you. I hope this helps! 😊

Shadcn does all of this

OP you're going to need to make your own component. As I suggested, refer to the combobox implementation for ideas and as a starting point

Or look at the code for this font dropdown...