Select

A compact choice field with a keyboard friendly menu.

npx shadcn@latest add @silicon-ui/select
fieldform
Loading…

Installation

With the shadcn CLI

npx shadcn@latest add @silicon-ui/select

Manually

  1. Install the dependencies.

    npm install @radix-ui/react-select lucide-react motion

  2. Copy these files into your project. Shared files are skipped if you already have them.

    • components/silicon-ui/select/select.tsx
    • components/silicon-ui/select/select.module.css
    • components/silicon-ui/lib/menu-highlight.tsx shared

  3. Install the foundation once per app for the design and motion tokens: npx shadcn@latest add @silicon-ui/silicon-foundation

Usage

Source codetsx
import { Select } from "@/components/silicon-ui/select/select";

API reference

PropTypeDefault
label*string—
options*{ value: string; label: string; disabled?: boolean }[]—
descriptionstring—
placeholderstring"Select an option"
idstring—
classNamestring—

Also accepts the props of ComponentPropsWithoutRef<typeof SelectPrimitive.Root>, except children.

Dependencies

npm
@radix-ui/react-selectlucide-reactmotion
Registry
silicon-motion-tokens