Checkbox group with badge

<script setup lang="ts">
import { Badge } from "@/components/reui/badge"
import { Checkbox } from "@/components/ui/checkbox"
import { Field, FieldLabel } from "@/components/ui/field"
</script>

<template>
  <Field class="w-auto">
    <Field orientation="horizontal">
      <Checkbox id="checkbox-badge-1" />
      <div class="flex items-center gap-3">
        <FieldLabel for="checkbox-badge-1">AI-powered suggestions</FieldLabel>
        <Badge class="rounded-full uppercase" size="sm">New</Badge>
      </div>
    </Field>
    <Field orientation="horizontal">
      <Checkbox id="checkbox-badge-2" />
      <div class="flex items-center gap-3">
        <FieldLabel for="checkbox-badge-2">Beta feature access</FieldLabel>
        <Badge variant="secondary" class="rounded-full uppercase" size="sm">Beta</Badge>
      </div>
    </Field>
  </Field>
</template>