Field with select control

<script setup lang="ts">
import { Field, FieldDescription, FieldGroup, FieldLabel } from "@/components/ui/field"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
</script>

<template>
  <div class="mx-auto w-full max-w-xs">
    <FieldGroup>
      <Field>
        <FieldLabel for="plan-selection">Subscription Plan</FieldLabel>
        <Select default-value="pro">
          <SelectTrigger id="plan-selection">
            <SelectValue placeholder="Select a plan" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="free">Free - Basic features</SelectItem>
            <SelectItem value="pro">Pro - Advanced tools</SelectItem>
            <SelectItem value="enterprise">
              Enterprise - Custom solutions
            </SelectItem>
          </SelectContent>
        </Select>
        <FieldDescription>
          Choose the plan that best fits your needs.
        </FieldDescription>
      </Field>
      <Field>
        <FieldLabel for="billing-cycle">Billing Cycle</FieldLabel>
        <Select default-value="yearly">
          <SelectTrigger id="billing-cycle">
            <SelectValue placeholder="Select billing cycle" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="monthly">Monthly billing</SelectItem>
            <SelectItem value="yearly">Yearly billing (Save 20%)</SelectItem>
          </SelectContent>
        </Select>
        <FieldDescription>
          Billing cycles can be changed at any time.
        </FieldDescription>
      </Field>
    </FieldGroup>
  </div>
</template>