# V select 15

> Sort Order with Icons

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

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

## Install

```bash
npx shadcn@latest add https://ui.cnippet.dev/r/v-select-15.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/select`

## Files

### `registry/default/variants/v-select-15.tsx`

```tsx
"use client";

import type { LucideIcon } from "lucide-react";
import {
  ArrowDownAZIcon,
  ArrowUpAZIcon,
  CalendarArrowDownIcon,
  CalendarArrowUpIcon,
  SparklesIcon,
} from "lucide-react";
import {
  Select,
  SelectItem,
  SelectPopup,
  SelectTrigger,
  SelectValue,
} from "@/registry/default/ui/select";

type SortItem = { Icon: LucideIcon; label: string; value: string };

const sortOptions: SortItem[] = [
  { Icon: SparklesIcon, label: "Relevance", value: "relevance" },
  { Icon: ArrowDownAZIcon, label: "Name A–Z", value: "name-asc" },
  { Icon: ArrowUpAZIcon, label: "Name Z–A", value: "name-desc" },
  { Icon: CalendarArrowDownIcon, label: "Newest first", value: "date-desc" },
  { Icon: CalendarArrowUpIcon, label: "Oldest first", value: "date-asc" },
];

const placeholder = { label: "Sort by", value: null };
const allItems = [placeholder, ...sortOptions];

export default function Particle() {
  return (
    <Select defaultValue={sortOptions[0]} items={allItems}>
      <SelectTrigger className="w-44">
        <SelectValue />
      </SelectTrigger>
      <SelectPopup>
        {sortOptions.map((item) => {
          const { Icon, label, value } = item;
          return (
            <SelectItem key={value} value={item}>
              <span className="flex items-center gap-2">
                <Icon aria-hidden="true" className="size-4" />
                {label}
              </span>
            </SelectItem>
          );
        })}
      </SelectPopup>
    </Select>
  );
}
```