Combobox Multiple
A searchable dropdown menu that supports selecting multiple options and creating multiple new options on the fly. Also see Combobox Single
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
You can either copy/paste the code into your project directly or use Sly CLI to install the package.
npx @sly-cli/sly@latest add jacobparis/ui combobox-multipleMulti-select
Set mode="multiple" to enable multi-select.
Submit the combobox in a form and handle the form submission in your action function.
export async function action({ request }: ActionFunctionArgs) {
const formData = await request.formData()
// Save them wherever you want
const genreIds = formData.getAll("genreId")
}
Multi-select + create
To allow the user to create items, add these props
createName="newGenreName"- The FormData key for the new itemscreateLabel="Name:"- The label shown in the dropdown and in the input when the user has selected new items.
Submit the combobox in a form and handle the form submission in your action function.
export async function action({ request }: ActionFunctionArgs) {
const formData = await request.formData()
// User selected these and they already exist
const genreIds = formData.getAll("genreId")
// User selected these and they don't exist
const newGenreNames = formData.getAll("newGenreName")
const newGenreIds = await Promise.all(newGenreNames.map(async name => {
const genre = await db.genre.create({
data: { name },
})
return genre.id
}))
// Now these all exist, save them wherever you want
const allGenreIds = [...genreIds, ...newGenreIds]
}
Hey there! I'm a developer, designer, and digital nomad building cool things with Remix, and I'm also writing Moulton, the Remix Community Newsletter
About once per month, I send an email with:
- New guides and tutorials
- Upcoming talks, meetups, and events
- Cool new libraries and packages
- What's new in the latest versions of Remix
Stay up to date with everything in the Remix community by entering your email below.