Radio group with legend and description

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

<template>
  <FieldSet class="w-full max-w-xs">
    <FieldLegend>Battery Level</FieldLegend>
    <FieldDescription>Choose your preferred battery level.</FieldDescription>
    <RadioGroup default-value="medium">
      <Field orientation="horizontal">
        <RadioGroupItem value="high" id="battery-high" />
        <FieldLabel for="battery-high">High</FieldLabel>
      </Field>
      <Field orientation="horizontal">
        <RadioGroupItem value="medium" id="battery-medium" />
        <FieldLabel for="battery-medium">Medium</FieldLabel>
      </Field>
      <Field orientation="horizontal">
        <RadioGroupItem value="low" id="battery-low" />
        <FieldLabel for="battery-low">Low</FieldLabel>
      </Field>
    </RadioGroup>
  </FieldSet>
</template>