# V autocomplete 19

> Priority selector with icon and description

A shadcn/ui block from the [@cnippet](https://ui.cnippet.dev/) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/cnippet/v-autocomplete-19).

- Page, with a live preview: https://shadcn.exchange/r/cnippet/v-autocomplete-19
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/cnippet/v-autocomplete-19-light-9f6871aa598f91dd.png
- Registry item: https://ui.cnippet.dev/r/v-autocomplete-19.json
- Categories: autocomplete
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://ui.cnippet.dev/r/v-autocomplete-19.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `@cnippet/autocomplete`

## Files

### `registry/default/variants/v-autocomplete-19.tsx`

```tsx
"use client";

import {
  AlertCircleIcon,
  ArrowDownIcon,
  ArrowRightIcon,
  ArrowUpIcon,
  MinusIcon,
} from "lucide-react";
import type { ElementType } from "react";
import {
  Autocomplete,
  AutocompleteEmpty,
  AutocompleteInput,
  AutocompleteItem,
  AutocompleteList,
  AutocompletePopup,
} from "@/registry/default/ui/autocomplete";

type Priority = {
  id: string;
  label: string;
  description: string;
  colorClass: string;
  icon: ElementType;
};

const priorities: Priority[] = [
  {
    colorClass: "text-red-500",
    description: "Requires immediate attention",
    icon: AlertCircleIcon,
    id: "urgent",
    label: "Urgent",
  },
  {
    colorClass: "text-orange-500",
    description: "Should be done soon",
    icon: ArrowUpIcon,
    id: "high",
    label: "High",
  },
  {
    colorClass: "text-yellow-500",
    description: "Normal workflow priority",
    icon: ArrowRightIcon,
    id: "medium",
    label: "Medium",
  },
  {
    colorClass: "text-slate-400",
    description: "Address when time allows",
    icon: ArrowDownIcon,
    id: "low",
    label: "Low",
  },
  {
    colorClass: "text-muted-foreground",
    description: "Not yet prioritized",
    icon: MinusIcon,
    id: "none",
    label: "No priority",
  },
];

export default function Particle() {
  return (
    <div className="flex w-full max-w-xs flex-col gap-1.5">
      <label className="font-medium text-sm">Priority</label>
      <Autocomplete items={priorities}>
        <AutocompleteInput placeholder="Set priority…" showClear showTrigger />
        <AutocompletePopup>
          <AutocompleteEmpty>No priority found.</AutocompleteEmpty>
          <AutocompleteList>
            {(p: Priority) => (
              <AutocompleteItem key={p.id} value={p}>
                <div className="flex items-center gap-2.5">
                  <p.icon className={`size-4 shrink-0 ${p.colorClass}`} />
                  <div className="flex flex-col">
                    <span className="font-medium text-sm">{p.label}</span>
                    <span className="text-muted-foreground text-xs">
                      {p.description}
                    </span>
                  </div>
                </div>
              </AutocompleteItem>
            )}
          </AutocompleteList>
        </AutocompletePopup>
      </Autocomplete>
    </div>
  );
}
```