Card radio group with descriptions

<script setup lang="ts">
import { Field, FieldContent, FieldDescription, FieldLabel, FieldTitle } from "@/components/ui/field"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
</script>

<template>
  <RadioGroup default-value="plus" class="w-full max-w-xs">
    <FieldLabel for="plus-plan">
      <Field orientation="horizontal">
        <FieldContent>
          <FieldTitle>Plus</FieldTitle>
          <FieldDescription>For individuals and small teams.</FieldDescription>
        </FieldContent>
        <RadioGroupItem value="plus" id="plus-plan" />
      </Field>
    </FieldLabel>
    <FieldLabel for="pro-plan">
      <Field orientation="horizontal">
        <FieldContent>
          <FieldTitle>Pro</FieldTitle>
          <FieldDescription>For growing businesses.</FieldDescription>
        </FieldContent>
        <RadioGroupItem value="pro" id="pro-plan" />
      </Field>
    </FieldLabel>
  </RadioGroup>
</template>