Atoms

Radio Group Stacked

A stacked radio group with labels and descriptions for form selections.

FormanceCustom component built for Formance products.

Installation#

npx shadcn@latest add @formance/radio-group-stacked

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 { RadioGroupStacked, RadioGroupStackedItem } from '@/components/ui/radio-group-stacked'

<RadioGroupStacked defaultValue="sandbox">
  <RadioGroupStackedItem
    value="sandbox"
    label="Sandbox"
    description="A safe environment for testing transactions and integrations."
  />
  <RadioGroupStackedItem
    value="production"
    label="Production"
    description="Your live environment processing real transactions."
  />
</RadioGroupStacked>

Examples#

With Action#

Use the action prop to render any component in the top-right corner, aligned with the label.

Compound Components

Compose the pieces you need:

<RadioGroupStacked />Root container with stacked layout and negative spacing.

<RadioGroupStackedItem />Individual stacked item with label, description, and indicator.

Command Menu