# V select 6

> Basic select

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

- Page, with a live preview: https://shadcn.exchange/r/cnippet/v-select-6
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/cnippet/v-select-6-light-6f79302a7663fb86.png
- Registry item: https://ui.cnippet.dev/r/v-select-6.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-6.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-6.tsx`

```tsx
import {
  Select,
  SelectItem,
  SelectPopup,
  SelectTrigger,
  SelectValue,
} from "@/registry/default/ui/select";

type Currency = {
  code: string;
  label: string;
  symbol: string;
  value: string;
};

const currencies: Currency[] = [
  { code: "USD", label: "US Dollar", symbol: "$", value: "usd" },
  { code: "EUR", label: "Euro", symbol: "€", value: "eur" },
  { code: "GBP", label: "British Pound", symbol: "£", value: "gbp" },
  { code: "JPY", label: "Japanese Yen", symbol: "¥", value: "jpy" },
  { code: "CAD", label: "Canadian Dollar", symbol: "$", value: "cad" },
  { code: "AUD", label: "Australian Dollar", symbol: "$", value: "aud" },
  { code: "INR", label: "Indian Rupee", symbol: "₹", value: "inr" },
  { code: "CHF", label: "Swiss Franc", symbol: "₣", value: "chf" },
];

const placeholder = {
  code: "",
  label: "Select currency",
  symbol: "",
  value: null,
};
const allItems = [placeholder, ...currencies];

export default function Component() {
  return (
    <Select defaultValue={currencies[0]} items={allItems}>
      <SelectTrigger className="w-60">
        <SelectValue />
      </SelectTrigger>
      <SelectPopup>
        {currencies.map((item) => (
          <SelectItem key={item.value} value={item}>
            <span className="flex items-center gap-2">
              <span className="w-6 text-center font-mono text-muted-foreground text-sm">
                {item.symbol}
              </span>
              <span>{item.label}</span>
              <span className="ms-auto text-muted-foreground text-xs">
                {item.code}
              </span>
            </span>
          </SelectItem>
        ))}
      </SelectPopup>
    </Select>
  );
}
```