Radio Group
FREERadio group with animated selection and RadioField with label, description and card style.
Playground
Change the props and watch the component and its code update live.
Props
Code
import { RadioField, RadioGroup } from "@/components/ui/radio-group";
<RadioGroup defaultValue="pro">
<RadioField value="free" label="Free" card description="Core components" />
<RadioField value="pro" label="Pro" card description="Every block and template" />
</RadioGroup>Installation
Terminal
npx @bloxa/cli add radio-group
# or: npx shadcn@latest add @bloxa/radio-groupPackages installed automatically: radix-ui
Examples
With label
Cards
API reference
Every component also accepts the props of the element it renders.
RadioGroup
| Prop | Type | Default | Description |
|---|---|---|---|
| value / defaultValue | string | — | Selected value. |
| onValueChange | (value: string) => void | — | Called when the selection changes. |
RadioField
| Prop | Type | Default | Description |
|---|---|---|---|
| value | string | — | Option value. |
| label | ReactNode | — | Clickable label. |
| description | ReactNode | — | Description. |
| card | boolean | false | Card style. |