Disabled radio group

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

<template>
  <RadioGroup default-value="comfortable" class="w-fit">
    <Field orientation="horizontal">
      <RadioGroupItem value="default" id="disabled-r1" />
      <FieldLabel for="disabled-r1">Default</FieldLabel>
    </Field>
    <Field orientation="horizontal" data-disabled="true">
      <RadioGroupItem value="comfortable" disabled id="disabled-r2" />
      <FieldLabel for="disabled-r2">Comfortable</FieldLabel>
    </Field>
    <Field orientation="horizontal">
      <RadioGroupItem value="compact" id="disabled-r3" />
      <FieldLabel for="disabled-r3">Compact</FieldLabel>
    </Field>
  </RadioGroup>
</template>