Invalid 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="email" class="w-fit">
    <Field orientation="horizontal" data-invalid="true">
      <RadioGroupItem value="email" id="invalid-r1" aria-invalid="true" />
      <FieldLabel for="invalid-r1">Email only</FieldLabel>
    </Field>
    <Field orientation="horizontal" data-invalid="true">
      <RadioGroupItem value="sms" id="invalid-r2" aria-invalid="true" />
      <FieldLabel for="invalid-r2">SMS only</FieldLabel>
    </Field>
  </RadioGroup>
</template>