'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.21st.dev/assets/mirror/57/5784730cb797110eca99d0f52f7adfe2c5b24597027701e506c00382560e0008.png' },
{ value: '2', label: 'China', flag: 'https://cdn.21st.dev/assets/mirror/7f/7f3a8c8e120046482aa86e6e15f3cddeb50dd33d4d9e703fdeeea26223f2ef08.png' },
{ value: '3', label: 'Monaco', flag: 'https://cdn.21st.dev/assets/mirror/ce/ce22402297523848c6f3a2e6800e73a0ff870e36251c2ca57838bd2a98c531c3.png' },
{ value: '4', label: 'Serbia', flag: 'https://cdn.21st.dev/assets/mirror/6a/6a1a5db364366b224d52b045251fd08c3c5e9801d74ab41644f4afda2a63e397.png' },
{ value: '5', label: 'Romania', flag: 'https://cdn.21st.dev/assets/mirror/f9/f9a0b715ca5d02c4c7dd6d52b410f2eba21da73e9eeafeba8ab69fc5ea6c0deb.png' },
{ value: '6', label: 'Mayotte', flag: 'https://cdn.21st.dev/assets/mirror/81/81872b9c13db9d7a3567969955eebd72a3e2f7661f36c666da0913b0d17bd8d4.png' },
{ value: '7', label: 'Iraq', flag: 'https://cdn.21st.dev/assets/mirror/0b/0bc282a106acc3cb98183f24c5af3adb048ab45ce3145ae625b67777d4c821eb.png' },
{ value: '8', label: 'Syria', flag: 'https://cdn.21st.dev/assets/mirror/d5/d54e1011089682acd2cba94cba0fd9c15719b49b5d319554164ece64bed03f74.png' },
{ value: '9', label: 'Korea', flag: 'https://cdn.21st.dev/assets/mirror/14/1452b3432be9f2dbcbb7b36b7c399a9ac65ed731950cc783920bda9ba5cfe77c.png' },
{ value: '10', label: 'Zimbabwe', flag: 'https://cdn.21st.dev/assets/mirror/92/92c4c12ba5d47eeda2fdf53f2ce2d7bf6b00004d42ec75919b6c977e911b6a2c.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
Part of ShadcnStudio — browse the full library on 21st.dev.