Radio button

import { useId } from 'react';
import { Radio } from '@base-ui/react/radio';
import { RadioGroup } from '@base-ui/react/radio-group';

const PLANS = [
  { value: 'free', name: 'Free', price: '$0', detail: 'One project' },
  { value: 'pro', name: 'Pro', price: '$12/mo', detail: 'Unlimited projects' },
  { value: 'team', name: 'Team', price: '$30/mo', detail: 'Shared billing' }
];

export function PlanPicker() {
  const labelId = useId();

  // Arrow keys move the selection between plans, like native radios.
  return (
    <RadioGroup
      name='plan'
      defaultValue='pro'
      aria-labelledby={labelId}
      className='flex w-80 flex-col gap-2'
    >
      <p id={labelId} className='text-sm font-medium'>
        Choose a plan
      </p>
      {PLANS.map((plan) => (
        <label
          key={plan.value}
          className='flex cursor-pointer items-center gap-3 rounded-xl border p-4 transition-colors has-[[data-checked]]:border-blue-600 has-[[data-checked]]:bg-blue-500/10'
        >
          <Radio.Root
            value={plan.value}
            className='flex size-5 shrink-0 items-center justify-center rounded-full border bg-background outline-none focus-visible:ring-2 focus-visible:ring-ring data-checked:border-blue-600'
          >
            {/* The dot scales in from 0 on a curve that overshoots a touch, like a small spring. */}
            <Radio.Indicator className='size-2.5 rounded-full bg-blue-600 transition-transform duration-200 ease-[cubic-bezier(0.34,1.56,0.64,1)] data-ending-style:scale-0 data-starting-style:scale-0' />
          </Radio.Root>
          <span className='flex-1'>
            <span className='block text-sm font-medium'>{plan.name}</span>
            <span className='text-sm text-muted-foreground'>{plan.detail}</span>
          </span>
          <span className='text-sm font-medium tabular-nums'>{plan.price}</span>
        </label>
      ))}
    </RadioGroup>
  );
}