Mokri

Preview

Basic Plan

Perfect for individuals

Pro Plan

Best for teams

Installation

<> import.ts

import { RadioCard } from "@/components/ui/radio-card"

Code

<> component.tsx

import { RadioCard } from "@/components/ui/radio-card"

<RadioCard
  title="Plan Name"
  description="Plan description"
  value="plan"
  checked={selected === "plan"}
  onChange={setSelected}
/>

API Reference

RadioCard

A card-style radio button for selecting options.

<> import.ts

import { RadioCard } from "@/components/ui/radio-card"

Props

Prop	Type	Default	Description
`name`	`string`	—	Name attribute for the radio group
`value`	`string`	—	Value of the radio option
`label`	`string`	—	Label text for the radio card
`description`	`string`	—	Description text for the radio card
`checked`	`boolean`	`false`	Whether the radio card is checked
`onChange`	`(value: string) => void`	—	Change handler for the radio card
`disabled`	`boolean`	`false`	Whether the radio card is disabled
`className`	`string`	`""`	Additional CSS classes

Examples

Example 1

<> example.tsx

// Basic radio card
<RadioCard 
  name="plan" 
  value="basic" 
  label="Basic Plan"
  description="Perfect for individuals"
/>

Example 2

<> example.tsx

// Radio card group
<div className="space-y-3">
  <RadioCard 
    name="plan" 
    value="basic" 
    label="Basic Plan"
    description="Perfect for individuals"
  />
  <RadioCard 
    name="plan" 
    value="pro" 
    label="Pro Plan"
    description="Great for teams"
  />
  <RadioCard 
    name="plan" 
    value="enterprise" 
    label="Enterprise Plan"
    description="For large organizations"
  />
</div>

Example 3

<> example.tsx

// Controlled radio card
<RadioCard 
  name="choice" 
  value="option1" 
  label="Option 1"
  description="First option"
  checked={selectedValue === 'option1'}
  onChange={setSelectedValue}
/>