I'll create a component that uses shadcn/ui's dropdown menu that opens a dialog with a form containing two combobox fields.
This component combines several shadcn/ui components 123:
- A dropdown menu with several options
- When you click "Open Form" in the dropdown, it opens a dialog
Inside the dialog, there's a form with two combobox fields:
- Framework selection (Next.js, React, Vue, etc.)
- Language selection (TypeScript, JavaScript, Python, etc.)
Each combobox uses the Command component from shadcn/ui, which provides a searchable dropdown interface. The form uses React Hook Form with Zod validation to ensure both fields are required.
When you submit the form, it will display a toast notification with the selected values and close the dialog.
can we also add this
"use client"
import { useId, useState } from "react" import { CheckIcon, ChevronDownIcon } from "lucide-react"
import { cn } from "@/lib/utils" import { Button } from "@/components/ui/button" import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, } from "@/components/ui/command" import { Label } from "@/components/ui/label" import { Popover, PopoverContent, PopoverTrigger, } from "@/components/ui/popover"
const frameworks = [ { value: "next.js", label: "Next.js", }, { value: "sveltekit", label: "SvelteKit", }, { value: "nuxt.js", label: "Nuxt.js", }, { value: "remix", label: "Remix", }, { value: "astro", label: "Astro", }, { value: "angular", label: "Angular", }, { value: "vue", label: "Vue.js", }, { value: "react", label: "React", }, { value: "ember", label: "Ember.js", }, { value: "gatsby", label: "Gatsby", }, { value: "eleventy", label: "Eleventy", }, { value: "solid", label: "SolidJS", }, { value: "preact", label: "Preact", }, { value: "qwik", label: "Qwik", }, { value: "alpine", label: "Alpine.js", }, { value: "lit", label: "Lit", }, ]
export default function Component229() { const id = useId() const [open, setOpen] = useState<boolean>(false) const [value, setValue] = useState<string>("")
return ( <div className="*:not-first:mt-2"> <Label htmlFor={id}>Select with search</Label> <Popover open={open} onOpenChange={setOpen}> <PopoverTrigger asChild> <Button id={id} variant="outline" role="combobox" aria-expanded={open} className="bg-white hover:bg-white border-neutral-200 w-full justify-between px-3 font-normal outline-offset-0 outline-none focus-visible:outline-[3px] dark:bg-neutral-950 dark:hover:bg-neutral-950 dark:border-neutral-800" > <span className={cn("truncate", !value && "text-neutral-500 dark:text-neutral-400")}> {value ? frameworks.find((framework) => framework.value === value) ?.label : "Select framework"} </span> <ChevronDownIcon size={16} className="text-neutral-500/80 shrink-0 dark:text-neutral-400/80" aria-hidden="true" /> </Button> </PopoverTrigger> <PopoverContent className="border-neutral-200 w-full min-w-[var(--radix-popper-anchor-width)] p-0 dark:border-neutral-800" align="start" > <Command> <CommandInput className="focus-visible:outline-none" placeholder="Search framework..." /> <CommandList> <CommandEmpty>No framework found.</CommandEmpty> <CommandGroup> {frameworks.map((framework) => ( <CommandItem key={framework.value} value={framework.value} onSelect={(currentValue) => { setValue(currentValue === value ? "" : currentValue) setOpen(false) }} > {framework.label} {value === framework.value && ( <CheckIcon size={16} className="ml-auto" /> )} </CommandItem> ))} </CommandGroup> </CommandList> </Command> </PopoverContent> </Popover> </div> ) }
I'll add this custom select component to our project and incorporate it into the existing page.
I've added the custom select component to the project and updated the page layout to showcase both components:
- First, I created a new component file
components/select-with-search.tsxwith the code you provided, making it a reusable component. Then I updated the main page to display both:
- The new custom select with search at the top
- The original dropdown menu with dialog form below it
The custom select component uses the shadcn/ui Command component 1 for the searchable dropdown functionality, but with custom styling. It provides a clean, minimal look with custom hover and focus states.
Both components demonstrate different ways to implement combobox functionality in your application 2:
- The standalone select with search shows a direct implementation
- The dropdown menu with dialog form shows how to integrate comboboxes within a more complex UI flow