Responsive field layout

<script setup lang="ts">
import { Button } from "@/components/ui/button"
import { Field, FieldDescription, FieldGroup, FieldLabel, FieldSeparator } from "@/components/ui/field"
import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
</script>

<template>
  <div class="mx-auto w-full max-w-lg">
    <FieldGroup>
      <Field orientation="responsive">
        <FieldLabel for="resp-first">First Name</FieldLabel>
        <Input id="resp-first" placeholder="First name" />
      </Field>
      <Field orientation="responsive">
        <FieldLabel for="resp-last">Last Name</FieldLabel>
        <Input id="resp-last" placeholder="Last name" />
      </Field>
      <Field orientation="responsive">
        <FieldLabel for="resp-email">Email</FieldLabel>
        <Input id="resp-email" type="email" placeholder="you@example.com" />
      </Field>
      <Field orientation="responsive">
        <FieldLabel for="resp-role">Role</FieldLabel>
        <Select default-value="member">
          <SelectTrigger id="resp-role">
            <SelectValue placeholder="Select role" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="admin">Admin</SelectItem>
            <SelectItem value="member">Member</SelectItem>
            <SelectItem value="viewer">Viewer</SelectItem>
          </SelectContent>
        </Select>
      </Field>
      <FieldSeparator />
      <FieldDescription>
        The invited member will receive an email with a link to join.
      </FieldDescription>
      <div class="flex justify-end gap-2">
        <Button variant="outline">Cancel</Button>
        <Button>Send Invite</Button>
      </div>
    </FieldGroup>
  </div>
</template>