Components
Loading preview...
Here is Combobox component
@ShadcnStudio
npx shadcn@latest add https://21st.dev/r/ShadcnStudio/combobox'use client'
import { useId, useState } from 'react'
import { CheckIcon, ChevronDownIcon } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { Command, CommandEmpty, CommandInput, CommandItem, CommandList } from '@/components/ui/command'
import { Label } from '@/components/ui/label'
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
const countries = [
{ value: '1', label: 'India', flag: 'https://cdn.shadcnstudio.com/ss-assets/flags/india.png' },
{ value: '2', label: 'China', flag: 'https://cdn.shadcnstudio.com/ss-assets/flags/china.png' },
{ value: '3', label: 'Monaco', flag: 'https://cdn.shadcnstudio.com/ss-assets/flags/monaco.png' },
{ value: '4', label: 'Serbia', flag: 'https://cdn.shadcnstudio.com/ss-assets/flags/serbia.png' },
{ value: '5', label: 'Romania', flag: 'https://cdn.shadcnstudio.com/ss-assets/flags/romania.png' },
{ value: '6', label: 'Mayotte', flag: 'https://cdn.shadcnstudio.com/ss-assets/flags/mayotte.png' },
{ value: '7', label: 'Iraq', flag: 'https://cdn.shadcnstudio.com/ss-assets/flags/iraq.png' },
{ value: '8', label: 'Syria', flag: 'https://cdn.shadcnstudio.com/ss-assets/flags/syria.png' },
{ value: '9', label: 'Korea', flag: 'https://cdn.shadcnstudio.com/ss-assets/flags/korea.png' },
{ value: '10', label: 'Zimbabwe', flag: 'https://cdn.shadcnstudio.com/ss-assets/flags/zimbabwe.png' }
]
const ComboboxCountryFlagDemo = () => {
const id = useId()
const [open, setOpen] = useState<boolean>(false)
const [value, setValue] = useState<string>('')
return (
<div className='w-full max-w-xs space-y-2'>
<Label htmlFor={id}>Options with flag and search</Label>
<Popover open={open} onOpenChange={setOpen}>
<PopoverTrigger asChild>
<Button
id={id}
variant='outline'
role='combobox'
aria-expanded={open}
className='bg-background hover:bg-background border-input w-full justify-between px-3 font-normal outline-offset-0 outline-none focus-visible:outline-[3px]'
>
{value ? (
<span className='flex min-w-0 items-center gap-2'>
<img src={countries.find(item => item.label === value)?.flag} alt={value} className='h-4 w-5' />
<span className='truncate'>{value}</span>
</span>
) : (
<span className='text-muted-foreground'>Select country</span>
)}
<ChevronDownIcon size={16} className='text-muted-foreground/80 shrink-0' aria-hidden='true' />
</Button>
</PopoverTrigger>
<PopoverContent className='border-input w-full min-w-[var(--radix-popper-anchor-width)] p-0' align='start'>
<Command>
<CommandInput placeholder='Search country...' />
<CommandList>
<CommandEmpty>No country found.</CommandEmpty>
{countries.map(country => (
<CommandItem
key={country.value}
value={country.label}
onSelect={currentValue => {
setValue(currentValue)
setOpen(false)
}}
>
<img src={country.flag} alt={`${country.label} flag`} className='h-4 w-5' />
{country.label}
{value === country.value && <CheckIcon size={16} className='ml-auto' />}
</CommandItem>
))}
</CommandList>
</Command>
</PopoverContent>
</Popover>
</div>
)
}
export default ComboboxCountryFlagDemo