Combobox

A searchable dropdown menu that supports creating new options on the fly. For multi-selection, see Combobox Multiple

This is a form component, so wrap it in a <Form> and its data will be submitted along with the rest of the form. This page submits to local storage, which you can clear by opening the browser's developer console and running localStorage.clear().

Installation

Single select

The default settings only allow selecting one item and only from the provided options.

export async function action({ request }: ActionFunctionArgs) {
  const formData = await request.formData()

  // Save it wherever you want
  const genreId = formData.get("genreId")
}
            

Single-select + create

If you want the user to be able to add their own items, add these props

• createName="newGenreName" - The FormData key for the new item
• createLabel="Name:" - The label shown in the dropdown and in the input when the user has selected a new item

export async function action({ request }: ActionFunctionArgs) {
  const formData = await request.formData()

  let genreId = formData.get("genreId")
  
  // If this exists, the user created a new item
  const newGenreName = formData.get("newGenreName")
  if (newGenreName) {
    const genre = await db.genre.create({
      data: { name: newGenreName },
    })

    genreId = genre.id
  }

  // Now save the genreId wherever you want
}