Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Error State with Retry Combobox for React

A combobox that opens on Failed to load and Could not fetch data, with Retry to show the options.

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 React, Base UI does not retry the request.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

Anatomy

Combobox anatomy: control, input, trigger, content, item, item indicator

Usage

<Combobox items={options}>
  <ComboboxTrigger
    render={
      <Button className="w-[200px] justify-between" variant="outline" />
    }
  >
    <ComboboxValue placeholder="Select option..." />
  </ComboboxTrigger>
  <ComboboxContent>
    <ComboboxInput placeholder="Search..." showTrigger={false} />
    {hasError ? (
      <div className="flex flex-col items-center gap-3 p-4 text-center">
        <AlertCircleIcon
          aria-hidden="true"
          className="size-8 text-destructive"
        />
        <div>
          <p className="font-medium text-sm">Failed to load</p>
          <p className="text-muted-foreground text-xs">
            Could not fetch data
          </p>
        </div>
        <Button
          className="w-full"
          onClick={handleRetry}
          size="sm"
          variant="outline"
        >
          <RefreshCwIcon aria-hidden="true" data-icon="inline-start" />
          Retry
        </Button>
{/* The rest of the file is under Installation. */}

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.

What does the button show before a choice?

Select option.... The error lives inside the popup, so the field itself doesn't look broken until it's opened.

How is the error announced?

The icon is decorative and hidden. The text and the Retry button are in the popup, so they're read when someone moves into it. To announce the failure as it happens, put the message in a live region.

API Reference

Combobox

Sets items={options}, placeholder="Select option...", placeholder="Search...", showTrigger={false} and value={item}. The rest is on the Combobox page.

Button

Sets variant="outline", onClick={handleRetry} and size="sm". The rest is on the Button page.

All 42 combobox examples