shadcn.io is an independent project built on shadcn/ui
Until a currency is picked, the button has a destructive border and Please select a currency shows under it. USD, EUR, GBP, JPY, and CAD are the list. Picking one clears the border and the message.
Use it in a form where the combobox cannot be left empty. A whole form of rules belongs on a Field, not on this one message. In React, Ark UI does not require a currency. The demo adds the error.
Installation
Anatomy
Usage
<div className="flex flex-col gap-2">
<Combobox
collection={collection}
invalid={Boolean(error)}
onInputValueChange={handleInputValueChange}
onValueChange={handleValueChange}
positioning={{ getAnchorElement: () => triggerRef.current }}
selectionBehavior="clear"
value={value}
>
<ComboboxTrigger
className={cn(
buttonVariants({ variant: "outline" }),
"w-[200px] justify-between",
error && "border-destructive"
)}
ref={triggerRef}
>
{value[0] ?? "Select currency..."}
</ComboboxTrigger>
<ComboboxContent>
<ComboboxInput
className="w-full"
placeholder="Search currency..."
showTrigger={false}
/>
<ComboboxEmpty>No currency found.</ComboboxEmpty>
<ComboboxList>
{collection.items.map((item) => (
<ComboboxItem item={item} key={item}>
{item}
{/* The rest of the file is under Installation. */}FAQ
When does the error show?
Whenever no currency is selected. The message is worked out from the value on every render, so there's no separate error state to keep in sync.
How does the button show the error?
It gets border-destructive while the value is empty, and the message is a text-destructive text-xs paragraph below.
invalid on Combobox marks the field invalid too.
How do I clear the message?
Pick any currency. The value is no longer empty, so the border and the message go away.
Which currencies are listed?
USD, EUR, GBP, JPY and CAD. The search box says Search currency..., and No currency found. shows when nothing matches.
API Reference
Combobox
Sets collection={collection}, invalid={Boolean(error)}, onInputValueChange={handleInputValueChange}, onValueChange={handleValueChange}, positioning and getAnchorElement. The rest is on the Combobox page.
