Skip to content

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

Free

Error State with Retry Combobox for Vue

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

UI library: Ark 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 Vue, Ark UI does not retry the request.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

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

Usage

<Combobox
  :collection="collection"
  @input-value-change="handleInputValueChange"
  @value-change="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" />
    <div v-if="hasError" 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" @click="handleRetry" size="sm" variant="outline">
        <RefreshCwIcon aria-hidden="true" data-icon="inline-start" />Retry
      </Button>
    </div>
    <template v-else>
      <ComboboxEmpty>No results found.</ComboboxEmpty>
<!-- 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 collection="collection", input-value-change="handleInputValueChange", value-change="handleValueChange", positioning, getAnchorElement and class. The rest is on the Combobox page.

Button

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

All 42 combobox examples