shadcn.io is an independent project built on shadcn/ui
The popup opens on an alert icon, Failed to load, and Could not fetch data. Retry clears that and shows Option 1, Option 2, and Option 3.
Use it when options come from the network, so a failed request does not look like an empty list. A slow success is a Skeleton, not an error. In Solid, Ark UI does not retry the request.
Installation
Anatomy
Usage
<Combobox collection={_listCollection.collection()} onInputValueChange={handleInputValueChange} onValueChange={handleValueChange} positioning={{
getAnchorElement: () => triggerRef
}} selectionBehavior="clear" value={value()}>
<ComboboxTrigger class={cn(buttonVariants({
variant: "outline"
}), "w-[200px] justify-between")} ref={triggerRef}>
{value()[0] ?? "Select option..."}
</ComboboxTrigger>
<ComboboxContent>
<ComboboxInput class="w-full" placeholder="Search..." showTrigger={false} />
{hasError() ? <div class="flex flex-col items-center gap-3 p-4 text-center">
<AlertCircleIcon aria-hidden="true" class="size-8 text-destructive" />
<div>
<p class="font-medium text-sm">Failed to load</p>
<p class="text-muted-foreground text-xs">
Could not fetch data
</p>
</div>
<Button class="w-full" onClick={handleRetry} size="sm" variant="outline">
<RefreshCwIcon aria-hidden="true" data-icon="inline-start" />
Retry
</Button>
</div> : <>
<ComboboxEmpty>No results found.</ComboboxEmpty>
<ComboboxList>
{_listCollection.collection().items.map(item => <ComboboxItem item={item}>
{item}
</ComboboxItem>)}
</ComboboxList>
</>}
</ComboboxContent>
</Combobox>FAQ
How does the error state start?
The demo keeps an error flag that starts on, so the error block is what you see the first time the list opens.
What does the error block contain?
An AlertCircleIcon at size-8 in text-destructive, Failed to load, Could not fetch data in muted text, and a small outline Button with a RefreshCwIcon that says Retry.
What does Retry do?
It clears the error flag, and the list of Option 1, Option 2 and Option 3 takes the block's place. In an app, run the request again from here and show the error block again if it fails.
What appears after a retry?
The normal list: search filters it, a pick shows on the button, and No results found. covers a search that matches nothing.
API Reference
Combobox
Sets collection={_listCollection.collection()}, onInputValueChange={handleInputValueChange}, onValueChange={handleValueChange}, positioning, getAnchorElement and cn. The rest is on the Combobox page.
Button
Sets onClick={handleRetry}, size="sm" and variant="outline". The rest is on the Button page.
