Input label with optional badge

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

<template>
  <Field class="max-w-xs">
    <div class="flex items-center justify-between gap-2">
      <FieldLabel for="middle-name">Middle Name</FieldLabel>
      <Badge variant="warning-outline" size="sm">Optional</Badge>
    </div>
    <Input id="middle-name" placeholder="Alexander" />
  </Field>
</template>