Inline horizontal 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="viewer" class="mx-auto flex w-auto flex-wrap items-center gap-6">
    <Field orientation="horizontal" class="w-auto">
      <RadioGroupItem value="admin" id="role-admin" />
      <FieldLabel for="role-admin" class="cursor-pointer">Admin</FieldLabel>
    </Field>
    <Field orientation="horizontal" class="w-auto">
      <RadioGroupItem value="editor" id="role-editor" />
      <FieldLabel for="role-editor" class="cursor-pointer">Editor</FieldLabel>
    </Field>
    <Field orientation="horizontal" class="w-auto">
      <RadioGroupItem value="viewer" id="role-viewer" />
      <FieldLabel for="role-viewer" class="cursor-pointer">Viewer</FieldLabel>
    </Field>
  </RadioGroup>
</template>