Command Menu

Search documentation, components, and switch theme.

Atoms

Radio Group

A set of checkable buttons where only one can be checked at a time.

shadcn/ui
Docs

Installation#

npx shadcn@latest add @formance/radio-group

Install the following dependencies:

npm install radix-ui lucide-react

Copy and paste the following code into your project.

Update the import paths to match your project setup.

Usage#

import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'
<RadioGroup defaultValue="ledger">
  <div className="flex items-center gap-2">
    <RadioGroupItem value="ledger" id="ledger" />
    <Label htmlFor="ledger">Ledger</Label>
  </div>
  <div className="flex items-center gap-2">
    <RadioGroupItem value="payments" id="payments" />
    <Label htmlFor="payments">Payments</Label>
  </div>
</RadioGroup>