Atoms
Select
Dropdown select built on Radix UI with keyboard navigation.
shadcn/uiBased on shadcn/ui with Formance brand styling.
Installation#
npx shadcn@latest add @formance/selectInstall the following dependencies:
npm install class-variance-authority lucide-react radix-uiCopy 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>