Command Menu

Search documentation, components, and switch theme.

Atoms

Select

Dropdown select built on Radix UI with keyboard navigation.

shadcn/ui
Docs

Installation#

npx shadcn@latest add @formance/select

Install the following dependencies:

npm install class-variance-authority lucide-react radix-ui

Copy and paste the following code into your project.

Update the import paths to match your project setup.

Usage#

import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
<Select>
  <SelectTrigger>
    <SelectValue placeholder="Select a service" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="ledger">Ledger</SelectItem>
    <SelectItem value="payments">Payments</SelectItem>
    <SelectItem value="wallets">Wallets</SelectItem>
  </SelectContent>
</Select>

Examples#

Scrollable#