FormField.vue

<script setup lang="ts">
const sizes = ['xs', 'sm', 'md', 'lg', 'xl'] as const

const agentName = ref('orchestrator-7')
const sessionId = ref('')
const leaseTimeout = ref('')
const runtimeUrl = ref('')
const traceLevel = ref('')
const tagsValue = ref('')
</script>

<template>
  <div class="flex flex-col gap-8">
    <GallerySection title="Basic usage">
      <div class="flex w-full max-w-sm flex-col gap-4">
        <UFormField label="Agent name" name="agent-name" description="Unique identifier for this runtime agent.">
          <UInput v-model="agentName" placeholder="e.g. orchestrator-7" class="w-full" />
        </UFormField>

        <UFormField label="Session ID" name="session-id" hint="Optional">
          <UInput v-model="sessionId" placeholder="sess_01JXYZ…" class="w-full" />
        </UFormField>
      </div>
    </GallerySection>

    <GallerySection title="Required">
      <div class="flex w-full max-w-sm flex-col gap-4">
        <UFormField label="Runtime URL" name="runtime-url" required description="WebSocket endpoint for the ARCP runtime.">
          <UInput v-model="runtimeUrl" placeholder="wss://runtime.example.com" class="w-full" />
        </UFormField>

        <UFormField label="Lease timeout (s)" name="lease-timeout" required>
          <UInput v-model="leaseTimeout" type="number" placeholder="30" class="w-full" />
        </UFormField>
      </div>
    </GallerySection>

    <GallerySection title="With error">
      <div class="flex w-full max-w-sm flex-col gap-4">
        <UFormField
          label="Trace level"
          name="trace-level"
          error="Trace level must be one of: debug, info, warn, error."
        >
          <UInput v-model="traceLevel" placeholder="verbose" class="w-full" />
        </UFormField>

        <UFormField
          label="Event tags"
          name="event-tags"
          error="Maximum 5 tags per event."
          description="Comma-separated labels attached to emitted events."
        >
          <UInput v-model="tagsValue" placeholder="job, runtime, trace" class="w-full" />
        </UFormField>
      </div>
    </GallerySection>

    <GallerySection title="With help text">
      <div class="flex w-full max-w-sm flex-col gap-4">
        <UFormField
          label="Job concurrency"
          name="job-concurrency"
          description="Number of jobs the agent may run in parallel."
          help="Increasing this value may exhaust available lease slots."
        >
          <UInput placeholder="4" type="number" class="w-full" />
        </UFormField>
      </div>
    </GallerySection>

    <GallerySection title="Sizes">
      <div class="flex w-full max-w-sm flex-col gap-4">
        <UFormField
          v-for="s in sizes"
          :key="s"
          :label="`Size ${s}`"
          :size="s"
          :name="`size-${s}`"
          :hint="s"
        >
          <UInput :size="s" :placeholder="`Agent ID (${s})`" class="w-full" />
        </UFormField>
      </div>
    </GallerySection>

    <GallerySection title="Orientation: horizontal">
      <div class="flex w-full max-w-md flex-col gap-4">
        <UFormField
          label="Enable tracing"
          name="enable-tracing"
          orientation="horizontal"
          description="Emit structured trace events for every job step."
        >
          <USwitch />
        </UFormField>

        <UFormField
          label="Auto-renew leases"
          name="auto-renew"
          orientation="horizontal"
          description="Automatically renew job leases before they expire."
        >
          <USwitch default-value />
        </UFormField>
      </div>
    </GallerySection>

    <GallerySection title="Realistic — New runtime form">
      <div class="flex w-full max-w-sm flex-col gap-5">
        <UFormField label="Runtime name" name="rt-name" required description="Human-readable label shown in the dashboard.">
          <UInput placeholder="prod-us-east-1" icon="i-material-symbols-memory-outline" class="w-full" />
        </UFormField>

        <UFormField label="Endpoint URL" name="rt-endpoint" required description="WebSocket base URL the agent will connect to.">
          <UInput placeholder="wss://runtime.acme.io" icon="i-material-symbols-link" class="w-full" />
        </UFormField>

        <UFormField
          label="Max concurrent jobs"
          name="rt-concurrency"
          hint="1 – 256"
          help="Higher values require a Business or Enterprise plan."
        >
          <UInput type="number" placeholder="8" icon="i-material-symbols-layers-outline" class="w-full" />
        </UFormField>

        <UFormField label="Environment" name="rt-env" description="Target environment tag attached to every dispatched job.">
          <USelect
            :items="['production', 'staging', 'development']"
            placeholder="Select environment"
            class="w-full"
          />
        </UFormField>

        <UFormField label="Verbose tracing" name="rt-tracing" orientation="horizontal" description="Stream trace events to the session log.">
          <USwitch />
        </UFormField>

        <div class="flex justify-end gap-2 pt-2">
          <UButton variant="ghost" color="neutral">Cancel</UButton>
          <UButton icon="i-material-symbols-rocket-launch-outline">Register runtime</UButton>
        </div>
      </div>
    </GallerySection>
  </div>
</template>