Fields with input groups

<script setup lang="ts">
import { Field, FieldDescription, FieldGroup, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"
import { InputGroup, InputGroupAddon, InputGroupInput, InputGroupText } from "@/components/ui/input-group"
</script>

<template>
  <div class="mx-auto w-full max-w-xs">
    <FieldGroup>
      <Field>
        <FieldLabel for="profile-name">
          Full Name <span class="text-destructive">*</span>
        </FieldLabel>
        <Input
          id="profile-name"
          placeholder="Enter your full name"
          required
        />
        <FieldDescription>
          This name will be displayed on your public profile.
        </FieldDescription>
      </Field>
      <Field>
        <FieldLabel for="profile-username">Username</FieldLabel>
        <InputGroup>
          <InputGroupAddon>
            <InputGroupText>@</InputGroupText>
          </InputGroupAddon>
          <InputGroupInput id="profile-username" placeholder="username" />
        </InputGroup>
        <FieldDescription class="text-success">
          Username is available.
        </FieldDescription>
      </Field>
      <Field data-invalid="true">
        <FieldLabel for="profile-email">Email Address</FieldLabel>
        <InputGroup>
          <InputGroupInput id="profile-email" placeholder="email" />
          <InputGroupAddon align="inline-end">
            <InputGroupText>@gmail.com</InputGroupText>
          </InputGroupAddon>
        </InputGroup>
        <FieldDescription>
          Please enter a valid email address.
        </FieldDescription>
      </Field>
    </FieldGroup>
  </div>
</template>