# Select with clear button

> Select with clear button

A shadcn/ui block from the [@reui](https://reui.io) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/reui/c-select-21).

- Page, with a live preview: https://shadcn.exchange/r/reui/c-select-21
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/reui/c-select-21-light-5ebdc3031d6b3e95.png
- Registry item: https://reui.io/r/new-york-v4/c-select-21.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://reui.io/r/new-york-v4/c-select-21.json
```

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

## Dependencies

- npm packages: `cn`
- Registry items: `field`, `select`

## Files

### `c-select-21.tsx`

```tsx
"use client"

import { useState } from "react"

import { cn } from "cn"
import { Field } from "@/components/ui/field"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"

const frameworks = [
  { label: "Select framework", value: null },
  { value: "next", label: "Next.js" },
  { value: "svelte", label: "SvelteKit" },
  { value: "nuxt", label: "Nuxt.js" },
  { value: "remix", label: "Remix" },
  { value: "astro", label: "Astro" },
]

export function Pattern() {
  const [value, setValue] = useState<string | null>(null)

  const handleClear = (e: React.MouseEvent) => {
    e.stopPropagation()
    setValue(null)
  }

  return (
    <Field className="max-w-xs">
      <Select value={value} onValueChange={setValue} items={frameworks}>
        <SelectTrigger className={cn(value && "[&>svg:last-child]:hidden!")}>
          <SelectValue />
          {value && (
            <div
              role="button"
              onClick={handleClear}
              className="text-muted-foreground hover:text-foreground flex size-4 items-center justify-center rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none"
            >
              <IconPlaceholder
                lucide="XIcon"
                tabler="IconX"
                hugeicons="MultiplicationSignIcon"
                phosphor="XIcon"
                remixicon="RiCloseLine"
                className="size-4"
              />
              <span className="sr-only">Clear selection</span>
            </div>
          )}
        </SelectTrigger>
        <SelectContent alignItemWithTrigger={false}>
          {frameworks.slice(1).map((framework) => (
            <SelectItem key={framework.value} value={framework.value}>
              {framework.label}
            </SelectItem>
          ))}
        </SelectContent>
      </Select>
    </Field>
  )
}
```