Colored 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="blue" class="w-fit">
    <Field orientation="horizontal">
      <RadioGroupItem
        value="blue"
        id="color-blue"
        class="border-blue-500 data-checked:border-blue-500 [&_[data-slot=radio-group-indicator]]:text-blue-500"
      />
      <FieldLabel for="color-blue">Blue</FieldLabel>
    </Field>
    <Field orientation="horizontal">
      <RadioGroupItem
        value="green"
        id="color-green"
        class="border-green-500 data-checked:border-green-500 [&_[data-slot=radio-group-indicator]]:text-green-500"
      />
      <FieldLabel for="color-green">Green</FieldLabel>
    </Field>
    <Field orientation="horizontal">
      <RadioGroupItem
        value="yellow"
        id="color-yellow"
        class="border-yellow-500 data-checked:border-yellow-500 [&_[data-slot=radio-group-indicator]]:text-yellow-500"
      />
      <FieldLabel for="color-yellow">Yellow</FieldLabel>
    </Field>
  </RadioGroup>
</template>