RadioCard

import { RadioCard } from '@k8ordo/ui';
import { useState } from 'react';

const options = [
  { value: 'starter', label: 'Starter', description: '...' },
  { value: 'pro', label: 'Pro', description: '...' },
  { value: 'team', label: 'Team', description: '...' },
];

const [value, setValue] = useState('pro');

<p id="plan-label">Choose a plan</p>
<RadioCard
  disabled={false}
  invalid={false}
  aria-labelledby="plan-label"
  onChange={(value) => setValue(value)}
  options={options}
  value={value}
/>

const options = [
  { value: 'starter', label: 'Starter', description: '...' },
  { value: 'pro', label: 'Pro', description: '...' },
  { value: 'team', label: 'Team', description: '...' },
];

<p id="plan-default-label">Choose a plan</p>
<RadioCard
  defaultValue="starter"
  disabled={false}
  invalid={false}
  aria-labelledby="plan-default-label"
  options={options}
/>

const [submitted, setSubmitted] = useState<string | null>(null);

<Form
  action={(formData) => {
    const plan = formData.get('plan');
    setSubmitted(typeof plan === 'string' ? plan : null);
  }}
>
  <p id="plan-form-label">Choose a plan</p>
  <RadioCard
    defaultValue="pro"
    disabled={false}
    invalid={false}
    aria-labelledby="plan-form-label"
    name="plan"
    options={options}
  />
  <Button type="submit">Submit</Button>
</Form>