Field

Menggabungkan label, kontrol, dan teks bantuan menjadi satu baris form yang mudah diakses.

Payment Method

All transactions are secure and encrypted

Name on Card

Card Number

Enter your 16-digit card number

Month

Year

CVV

Billing Address

The billing address associated with your payment method

Same as shipping address

Comments

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

<template>
  <div class="w-full max-w-md">
    <form>
      <FieldGroup>
        <FieldSet>
          <FieldLegend>Payment Method</FieldLegend>
          <FieldDescription>
            All transactions are secure and encrypted
          </FieldDescription>
          <FieldGroup>
            <Field>
              <FieldLabel for="checkout-7j9-card-name-43j">
                Name on Card
              </FieldLabel>
              <Input
                id="checkout-7j9-card-name-43j"
                placeholder="Evil Rabbit"
                required
              />
            </Field>
            <Field>
              <FieldLabel for="checkout-7j9-card-number-uw1">
                Card Number
              </FieldLabel>
              <Input
                id="checkout-7j9-card-number-uw1"
                placeholder="1234 5678 9012 3456"
                required
              />
              <FieldDescription>
                Enter your 16-digit card number
              </FieldDescription>
            </Field>
            <div class="grid grid-cols-3 gap-4">
              <Field>
                <FieldLabel for="checkout-exp-month-ts6">
                  Month
                </FieldLabel>
                <Select default-value="">
                  <SelectTrigger id="checkout-exp-month-ts6">
                    <SelectValue placeholder="MM" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="01">
                      01
                    </SelectItem>
                    <SelectItem value="02">
                      02
                    </SelectItem>
                    <SelectItem value="03">
                      03
                    </SelectItem>
                    <SelectItem value="04">
                      04
                    </SelectItem>
                    <SelectItem value="05">
                      05
                    </SelectItem>
                    <SelectItem value="06">
                      06
                    </SelectItem>
                    <SelectItem value="07">
                      07
                    </SelectItem>
                    <SelectItem value="08">
                      08
                    </SelectItem>
                    <SelectItem value="09">
                      09
                    </SelectItem>
                    <SelectItem value="10">
                      10
                    </SelectItem>
                    <SelectItem value="11">
                      11
                    </SelectItem>
                    <SelectItem value="12">
                      12
                    </SelectItem>
                  </SelectContent>
                </Select>
              </Field>
              <Field>
                <FieldLabel for="checkout-7j9-exp-year-f59">
                  Year
                </FieldLabel>
                <Select default-value="">
                  <SelectTrigger id="checkout-7j9-exp-year-f59">
                    <SelectValue placeholder="YYYY" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="2024">
                      2024
                    </SelectItem>
                    <SelectItem value="2025">
                      2025
                    </SelectItem>
                    <SelectItem value="2026">
                      2026
                    </SelectItem>
                    <SelectItem value="2027">
                      2027
                    </SelectItem>
                    <SelectItem value="2028">
                      2028
                    </SelectItem>
                    <SelectItem value="2029">
                      2029
                    </SelectItem>
                  </SelectContent>
                </Select>
              </Field>
              <Field>
                <FieldLabel for="checkout-7j9-cvv">
                  CVV
                </FieldLabel>
                <Input id="checkout-7j9-cvv" placeholder="123" required />
              </Field>
            </div>
          </FieldGroup>
        </FieldSet>
        <FieldSeparator />
        <FieldSet>
          <FieldLegend>Billing Address</FieldLegend>
          <FieldDescription>
            The billing address associated with your payment method
          </FieldDescription>
          <FieldGroup>
            <Field orientation="horizontal">
              <Checkbox
                id="checkout-7j9-same-as-shipping-wgm"
                :default-value="true"
              />
              <FieldLabel
                for="checkout-7j9-same-as-shipping-wgm"
                class="font-normal"
              >
                Same as shipping address
              </FieldLabel>
            </Field>
          </FieldGroup>
        </FieldSet>
        <FieldSet>
          <FieldGroup>
            <Field>
              <FieldLabel for="checkout-7j9-optional-comments">
                Comments
              </FieldLabel>
              <Textarea
                id="checkout-7j9-optional-comments"
                placeholder="Add any additional comments"
                class="resize-none"
              />
            </Field>
          </FieldGroup>
        </FieldSet>
        <Field orientation="horizontal">
          <Button type="submit">
            Submit
          </Button>
          <Button variant="outline" type="button">
            Cancel
          </Button>
        </Field>
      </FieldGroup>
    </form>
  </div>
</template>

Instalasi

npx shadcn-vue@latest add field

Penggunaan

<script setup lang="ts">
import {
  Field,
  FieldContent,
  FieldDescription,
  FieldError,
  FieldGroup,
  FieldLabel,
  FieldLegend,
  FieldSeparator,
  FieldSet,
  FieldTitle,
} from '@/components/ui/field'
</script>

<template>
  <FieldSet>
    <FieldLegend>Profile</FieldLegend>
    <FieldDescription>This appears on invoices and emails.</FieldDescription>
    <FieldGroup>
      <Field>
        <FieldLabel for="name">
          Full name
        </FieldLabel>
        <Input id="name" autocomplete="off" placeholder="Evil Rabbit" />
        <FieldDescription>This appears on invoices and emails.</FieldDescription>
      </Field>
      <Field>
        <FieldLabel for="username">
          Username
        </FieldLabel>
        <Input id="username" autocomplete="off" aria-invalid />
        <FieldError>Choose another username.</FieldError>
      </Field>
      <Field orientation="horizontal">
        <Switch id="newsletter" />
        <FieldLabel for="newsletter">
          Subscribe to the newsletter
        </FieldLabel>
      </Field>
    </FieldGroup>
  </FieldSet>
</template>

Anatomi

Keluarga komponen Field dirancang untuk menyusun form yang mudah diakses. Susunan satu field pada umumnya seperti ini:

<template>
  <Field>
    <FieldLabel for="input-id">
      Label
    </FieldLabel>
    <!-- Input, Select, Switch, etc. -->
    <FieldDescription>Optional helper text.</FieldDescription>
    <FieldError>Validation message.</FieldError>
  </Field>
</template>

• Field adalah pembungkus inti untuk satu field.
• FieldContent adalah kolom flex yang menyatukan label dan keterangan. Tidak perlu dipakai kalau field Anda tanpa keterangan.
• Bungkus field-field yang berkaitan dengan FieldGroup, dan pakai FieldSet bersama FieldLegend untuk pengelompokan yang bermakna.

Contoh

Input

Username

Choose a unique username for your account.

Password

Must be at least 8 characters long.

<script setup lang="ts">
import {
  Field,
  FieldDescription,
  FieldGroup,
  FieldLabel,
  FieldSet,
} from '@/components/ui/field'
import { Input } from '@/components/ui/input'
</script>

<template>
  <div class="w-full max-w-md">
    <FieldSet>
      <FieldGroup>
        <Field>
          <FieldLabel for="username">
            Username
          </FieldLabel>
          <Input id="username" type="text" placeholder="Max Leiter" />
          <FieldDescription>
            Choose a unique username for your account.
          </FieldDescription>
        </Field>
        <Field>
          <FieldLabel for="password">
            Password
          </FieldLabel>
          <FieldDescription>
            Must be at least 8 characters long.
          </FieldDescription>
          <Input id="password" type="password" placeholder="********" />
        </Field>
      </FieldGroup>
    </FieldSet>
  </div>
</template>

Textarea

Feedback

Share your thoughts about our service.

<script setup lang="ts">
import {
  Field,
  FieldDescription,
  FieldGroup,
  FieldLabel,
  FieldSet,
} from '@/components/ui/field'
import { Textarea } from '@/components/ui/textarea'
</script>

<template>
  <div class="w-full max-w-md">
    <FieldSet>
      <FieldGroup>
        <Field>
          <FieldLabel for="feedback">
            Feedback
          </FieldLabel>
          <Textarea
            id="feedback"
            placeholder="Your feedback helps us improve..."
            :rows="4"
          />
          <FieldDescription>
            Share your thoughts about our service.
          </FieldDescription>
        </Field>
      </FieldGroup>
    </FieldSet>
  </div>
</template>

Select

Department

Select your department or area of work.

<script setup lang="ts">
import {
  Field,
  FieldDescription,
  FieldLabel,
} from '@/components/ui/field'
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select'
</script>

<template>
  <div class="w-full max-w-md">
    <Field>
      <FieldLabel>Department</FieldLabel>
      <Select>
        <SelectTrigger>
          <SelectValue placeholder="Choose department" />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="engineering">
            Engineering
          </SelectItem>
          <SelectItem value="design">
            Design
          </SelectItem>
          <SelectItem value="marketing">
            Marketing
          </SelectItem>
          <SelectItem value="sales">
            Sales
          </SelectItem>
          <SelectItem value="support">
            Customer Support
          </SelectItem>
          <SelectItem value="hr">
            Human Resources
          </SelectItem>
          <SelectItem value="finance">
            Finance
          </SelectItem>
          <SelectItem value="operations">
            Operations
          </SelectItem>
        </SelectContent>
      </Select>
      <FieldDescription>
        Select your department or area of work.
      </FieldDescription>
    </Field>
  </div>
</template>

Slider

Price Range

Set your budget range ($ 200 - 800).

<script setup lang="ts">
import { ref } from 'vue'
import {
  Field,
  FieldDescription,
  FieldTitle,
} from '@/components/ui/field'
import { Slider } from '@/components/ui/slider'

const value = ref([200, 800])
</script>

<template>
  <div class="w-full max-w-md">
    <Field>
      <FieldTitle>Price Range</FieldTitle>
      <FieldDescription>
        Set your budget range ($
        <span class="font-medium tabular-nums">{{ value[0] }}</span> -
        <span class="font-medium tabular-nums">{{ value[1] }}</span>).
      </FieldDescription>
      <Slider
        v-model="value"
        :max="1000"
        :min="0"
        :step="10"
        class="mt-2 w-full"
        aria-label="Price Range"
      />
    </Field>
  </div>
</template>

Fieldset

Address Information

We need your address to deliver your order.

Street Address

City

Postal Code

<script setup lang="ts">
import {
  Field,
  FieldDescription,
  FieldGroup,
  FieldLabel,
  FieldLegend,
  FieldSet,
} from '@/components/ui/field'
import { Input } from '@/components/ui/input'
</script>

<template>
  <div class="w-full max-w-md space-y-6">
    <FieldSet>
      <FieldLegend>Address Information</FieldLegend>
      <FieldDescription>
        We need your address to deliver your order.
      </FieldDescription>
      <FieldGroup>
        <Field>
          <FieldLabel for="street">
            Street Address
          </FieldLabel>
          <Input id="street" type="text" placeholder="123 Main St" />
        </Field>
        <div class="grid grid-cols-2 gap-4">
          <Field>
            <FieldLabel for="city">
              City
            </FieldLabel>
            <Input id="city" type="text" placeholder="New York" />
          </Field>
          <Field>
            <FieldLabel for="zip">
              Postal Code
            </FieldLabel>
            <Input id="zip" type="text" placeholder="90502" />
          </Field>
        </div>
      </FieldGroup>
    </FieldSet>
  </div>
</template>

Checkbox

Show these items on the desktop

Select the items you want to show on the desktop.

Hard disks

External disks

CDs, DVDs, and iPods

Connected servers

Sync Desktop & Documents folders

Your Desktop & Documents folders are being synced with iCloud Drive. You can access them from other devices.

<script setup lang="ts">
import { Checkbox } from '@/components/ui/checkbox'
import {
  Field,
  FieldContent,
  FieldDescription,
  FieldGroup,
  FieldLabel,
  FieldLegend,
  FieldSeparator,
  FieldSet,
} from '@/components/ui/field'
</script>

<template>
  <div class="w-full max-w-md">
    <FieldGroup>
      <FieldSet>
        <FieldLegend variant="label">
          Show these items on the desktop
        </FieldLegend>
        <FieldDescription>
          Select the items you want to show on the desktop.
        </FieldDescription>
        <FieldGroup class="gap-3">
          <Field orientation="horizontal">
            <Checkbox id="finder-pref-9k2-hard-disks-ljj" />
            <FieldLabel
              for="finder-pref-9k2-hard-disks-ljj"
              class="font-normal"
              :default-value="true"
            >
              Hard disks
            </FieldLabel>
          </Field>
          <Field orientation="horizontal">
            <Checkbox id="finder-pref-9k2-external-disks-1yg" />
            <FieldLabel
              for="finder-pref-9k2-external-disks-1yg"
              class="font-normal"
            >
              External disks
            </FieldLabel>
          </Field>
          <Field orientation="horizontal">
            <Checkbox id="finder-pref-9k2-cds-dvds-fzt" />
            <FieldLabel
              for="finder-pref-9k2-cds-dvds-fzt"
              class="font-normal"
            >
              CDs, DVDs, and iPods
            </FieldLabel>
          </Field>
          <Field orientation="horizontal">
            <Checkbox id="finder-pref-9k2-connected-servers-6l2" />
            <FieldLabel
              for="finder-pref-9k2-connected-servers-6l2"
              class="font-normal"
            >
              Connected servers
            </FieldLabel>
          </Field>
        </FieldGroup>
      </FieldSet>
      <FieldSeparator />
      <Field orientation="horizontal">
        <Checkbox id="finder-pref-9k2-sync-folders-nep" :default-value="true" />
        <FieldContent>
          <FieldLabel for="finder-pref-9k2-sync-folders-nep">
            Sync Desktop & Documents folders
          </FieldLabel>
          <FieldDescription>
            Your Desktop & Documents folders are being synced with iCloud
            Drive. You can access them from other devices.
          </FieldDescription>
        </FieldContent>
      </Field>
    </FieldGroup>
  </div>
</template>

Radio

Subscription Plan

Yearly and lifetime plans offer significant savings.

Monthly ($9.99/month)

Yearly ($99.99/year)

Lifetime ($299.99)

<script setup lang="ts">
import {
  Field,
  FieldDescription,
  FieldLabel,
  FieldSet,
} from '@/components/ui/field'
import {
  RadioGroup,
  RadioGroupItem,
} from '@/components/ui/radio-group'
</script>

<template>
  <div class="w-full max-w-md">
    <FieldSet>
      <FieldLabel>Subscription Plan</FieldLabel>
      <FieldDescription>
        Yearly and lifetime plans offer significant savings.
      </FieldDescription>
      <RadioGroup defaultvalue="monthly">
        <Field orientation="horizontal">
          <RadioGroupItem id="plan-monthly" value="monthly" />
          <FieldLabel for="plan-monthly" class="font-normal">
            Monthly ($9.99/month)
          </FieldLabel>
        </Field>
        <Field orientation="horizontal">
          <RadioGroupItem id="plan-yearly" value="yearly" />
          <FieldLabel for="plan-yearly" class="font-normal">
            Yearly ($99.99/year)
          </FieldLabel>
        </Field>
        <Field orientation="horizontal">
          <RadioGroupItem id="plan-lifetime" value="lifetime" />
          <FieldLabel for="plan-lifetime" class="font-normal">
            Lifetime ($299.99)
          </FieldLabel>
        </Field>
      </RadioGroup>
    </FieldSet>
  </div>
</template>

Switch

Multi-factor authentication

Enable multi-factor authentication. If you do not have a two-factor device, you can use a one-time code sent to your email.

<script setup lang="ts">
import {
  Field,
  FieldContent,
  FieldDescription,
  FieldLabel,
} from '@/components/ui/field'
import { Switch } from '@/components/ui/switch'
</script>

<template>
  <div class="w-full max-w-md">
    <Field orientation="horizontal">
      <FieldContent>
        <FieldLabel for="2fa">
          Multi-factor authentication
        </FieldLabel>
        <FieldDescription>
          Enable multi-factor authentication. If you do not have a two-factor
          device, you can use a one-time code sent to your email.
        </FieldDescription>
      </FieldContent>
      <Switch id="2fa" />
    </Field>
  </div>
</template>

Kartu Pilihan

Bungkus komponen Field di dalam FieldLabel untuk membuat kelompok field yang bisa dipilih. Cara ini berlaku untuk komponen RadioItem, Checkbox, dan Switch.

Compute Environment

Select the compute environment for your cluster.

Kubernetes

Run GPU workloads on a K8s configured cluster.

Virtual Machine

Access a VM configured cluster to run GPU workloads.

<script setup lang="ts">
import {
  Field,
  FieldContent,
  FieldDescription,
  FieldGroup,
  FieldLabel,
  FieldSet,
  FieldTitle,
} from '@/components/ui/field'
import {
  RadioGroup,
  RadioGroupItem,
} from '@/components/ui/radio-group'
</script>

<template>
  <div class="w-full max-w-md">
    <FieldGroup>
      <FieldSet>
        <FieldLabel for="compute-environment-p8w">
          Compute Environment
        </FieldLabel>
        <FieldDescription>
          Select the compute environment for your cluster.
        </FieldDescription>
        <RadioGroup default-value="kubernetes">
          <FieldLabel for="kubernetes-r2h">
            <Field orientation="horizontal">
              <FieldContent>
                <FieldTitle>Kubernetes</FieldTitle>
                <FieldDescription>
                  Run GPU workloads on a K8s configured cluster.
                </FieldDescription>
              </FieldContent>
              <RadioGroupItem id="kubernetes-r2h" value="kubernetes" />
            </Field>
          </FieldLabel>
          <FieldLabel for="vm-z4k">
            <Field orientation="horizontal">
              <FieldContent>
                <FieldTitle>Virtual Machine</FieldTitle>
                <FieldDescription>
                  Access a VM configured cluster to run GPU workloads.
                </FieldDescription>
              </FieldContent>
              <RadioGroupItem id="vm-z4k" value="vm" />
            </Field>
          </FieldLabel>
        </RadioGroup>
      </FieldSet>
    </FieldGroup>
  </div>
</template>

Field Group

Tumpuk komponen Field memakai FieldGroup. Tambahkan FieldSeparator untuk memisahkannya.

Responses

Get notified when ChatGPT responds to requests that take time, like research or image generation.

Push notifications

Tasks

Get notified when tasks you've created have updates. Manage tasks

Push notifications

Email notifications

<script setup lang="ts">
import { Checkbox } from '@/components/ui/checkbox'
import {
  Field,
  FieldDescription,
  FieldGroup,
  FieldLabel,
  FieldSeparator,
  FieldSet,
} from '@/components/ui/field'
</script>

<template>
  <div class="w-full max-w-md">
    <FieldGroup>
      <FieldSet>
        <FieldLabel>Responses</FieldLabel>
        <FieldDescription>
          Get notified when ChatGPT responds to requests that take time, like
          research or image generation.
        </FieldDescription>
        <FieldGroup data-slot="checkbox-group">
          <Field orientation="horizontal">
            <Checkbox id="push" :default-value="true" disabled />
            <FieldLabel for="push" class="font-normal">
              Push notifications
            </FieldLabel>
          </Field>
        </FieldGroup>
      </FieldSet>
      <FieldSeparator />
      <FieldSet>
        <FieldLabel>Tasks</FieldLabel>
        <FieldDescription>
          Get notified when tasks you've created have updates.
          <a href="#">Manage tasks</a>
        </FieldDescription>
        <FieldGroup data-slot="checkbox-group">
          <Field orientation="horizontal">
            <Checkbox id="push-tasks" />
            <FieldLabel for="push-tasks" class="font-normal">
              Push notifications
            </FieldLabel>
          </Field>
          <Field orientation="horizontal">
            <Checkbox id="email-tasks" />
            <FieldLabel for="email-tasks" class="font-normal">
              Email notifications
            </FieldLabel>
          </Field>
        </FieldGroup>
      </FieldSet>
    </FieldGroup>
  </div>
</template>

Tata Letak Responsif

Kalau Anda memakai Tailwind CSS v3, Anda perlu memasang @tailwindcss/container-queries.

• Field tegak: orientasi bawaan menumpuk label, kontrol, dan teks bantuan — cocok untuk tata letak yang mengutamakan mobile.
• Field mendatar: isi orientation="horizontal" pada Field agar label dan kontrolnya bersebelahan. Padukan dengan FieldContent supaya keterangannya tetap sejajar.
• Field responsif: isi orientation="responsive" agar susunan kolomnya menyesuaikan otomatis di dalam induk yang sadar ukuran container. Pakai class @container/field-group pada FieldGroup untuk berganti orientasi di breakpoint tertentu.

Profile

Fill in your profile information.

Name

Provide your full name for identification

Message

You can write your message here. Keep it short, preferably under 100 characters.

<script setup lang="ts">
import { Button } from '@/components/ui/button'
import {
  Field,
  FieldContent,
  FieldDescription,
  FieldGroup,
  FieldLabel,
  FieldLegend,
  FieldSeparator,
  FieldSet,
} from '@/components/ui/field'
import { Input } from '@/components/ui/input'
import { Textarea } from '@/components/ui/textarea'
</script>

<template>
  <div class="w-full max-w-4xl">
    <form>
      <FieldSet>
        <FieldLegend>Profile</FieldLegend>
        <FieldDescription>Fill in your profile information.</FieldDescription>
        <FieldSeparator />
        <FieldGroup>
          <Field orientation="responsive">
            <FieldContent>
              <FieldLabel for="name">
                Name
              </FieldLabel>
              <FieldDescription>
                Provide your full name for identification
              </FieldDescription>
            </FieldContent>
            <Input id="name" placeholder="Evil Rabbit" required />
          </Field>
          <FieldSeparator />
          <Field orientation="responsive">
            <FieldContent>
              <FieldLabel for="lastName">
                Message
              </FieldLabel>
              <FieldDescription>
                You can write your message here. Keep it short, preferably
                under 100 characters.
              </FieldDescription>
            </FieldContent>
            <Textarea
              id="message"
              placeholder="Hello, world!"
              required
              class="min-h-[100px] resize-none sm:min-w-[300px]"
            />
          </Field>
          <FieldSeparator />
          <Field orientation="responsive">
            <Button type="submit">
              Submit
            </Button>
            <Button type="button" variant="outline">
              Cancel
            </Button>
          </Field>
        </FieldGroup>
      </FieldSet>
    </form>
  </div>
</template>

Validasi dan Pesan Error

• Tambahkan data-invalid pada Field untuk mengubah seluruh blok menjadi keadaan error.
• Tambahkan aria-invalid pada input-nya sendiri demi teknologi bantu.
• Tempatkan FieldError tepat setelah kontrolnya, atau di dalam FieldContent, supaya pesan error tetap sejajar dengan field-nya.

<template>
  <Field data-invalid>
    <FieldLabel for="email">
      Email
    </FieldLabel>
    <Input id="email" type="email" aria-invalid />
    <FieldError>Enter a valid email address.</FieldError>
  </Field>
</template>

Aksesibilitas

• FieldSet dan FieldLegend menjaga kontrol yang berkaitan tetap satu kelompok bagi pengguna keyboard dan teknologi bantu.
• Field menghasilkan role="group", sehingga kontrol di dalamnya mewarisi pelabelan dari FieldLabel dan FieldLegend.
• Pakai FieldSeparator seperlunya saja, supaya batas antar bagian tetap jelas terbaca pembaca layar.

Referensi API

FieldSet

Wadah yang menghasilkan fieldset bermakna, lengkap dengan pengaturan jarak bawaan.

Prop	Tipe	Bawaan
class	string

<template>
  <FieldSet>
    <FieldLegend>Delivery</FieldLegend>
    <FieldGroup>
      <!-- Fields -->
    </FieldGroup>
  </FieldSet>
</template>

FieldLegend

Elemen legend untuk sebuah FieldSet. Ganti ke varian label agar ukurannya selaras dengan label.

Prop	Type	Default
variant	"legend" | "label"	"legend"
class	string

<FieldLegend variant="label">
Notification Preferences
</FieldLegend>

FieldLegend punya dua varian: legend dan label. Varian label memakai ukuran dan perataan seperti label — berguna kalau FieldSet Anda bersarang.

FieldGroup

Pembungkus tata letak yang menumpuk komponen Field dan mengaktifkan container query untuk orientasi responsif.

Prop	Tipe	Bawaan
class	string

<template>
  <FieldGroup class="@container/field-group flex flex-col gap-6">
    <Field><!-- Fields --></Field>
    <Field><!-- Fields --></Field>
  </FieldGroup>
</template>

Field

Pembungkus inti untuk satu field. Mengatur orientasi, style keadaan tidak valid, dan jarak antar elemen.

Prop	Type	Default
orientation	"vertical" | "horizontal" | "responsive"	"vertical"
class	string
data-invalid	boolean

<Field orientation="horizontal">
  <FieldLabel for="remember">Remember me</FieldLabel>
  <Switch id="remember" />
</Field>

FieldContent

Kolom flex yang menyatukan kontrol dan keterangannya saat label berada di samping kontrol. Tidak perlu dipakai kalau field Anda tanpa keterangan.

Prop	Tipe	Bawaan
class	string

<Field>
  <Checkbox id="notifications" />
  <FieldContent>
    <FieldLabel for="notifications">Notifications</FieldLabel>
    <FieldDescription>Email, SMS, and push options.</FieldDescription>
  </FieldContent>
</Field>

FieldLabel

Label yang style-nya cocok baik untuk input langsung maupun Field yang bersarang di dalamnya.

Prop	Type	Default
class	string
asChild	boolean	false

<FieldLabel for="email">
Email
</FieldLabel>

FieldTitle

Menampilkan judul bergaya label di dalam FieldContent.

Prop	Tipe	Bawaan
class	string

<FieldContent>
  <FieldTitle>Enable Touch ID</FieldTitle>
  <FieldDescription>Unlock your device faster.</FieldDescription>
</FieldContent>

FieldDescription

Slot teks bantuan yang otomatis menyeimbangkan baris panjang pada tata letak mendatar.

Prop	Tipe	Bawaan
class	string

<FieldDescription>
We never share your email with anyone.
</FieldDescription>

FieldSeparator

Pembatas visual antar bagian di dalam FieldGroup. Bisa diisi konten sebaris kalau perlu.

Prop	Tipe	Bawaan
class	string

<FieldSeparator>
Or continue with
</FieldSeparator>

FieldError

Wadah pesan error yang mudah diakses. Bisa diisi langsung, atau menerima array errors — misalnya dari vee-validate.

Prop	Type	Default
errors	Array<{ message?: string } | undefined>
class	string

<FieldError :errors="errors.username" />

Kalau array errors memuat lebih dari satu pesan, komponen ini otomatis menampilkannya sebagai daftar.

FieldError juga menerima issue dari validator mana pun yang menerapkan Standard Schema, termasuk Zod, Valibot, dan ArkType. Teruskan array issues dari hasil validasi skema untuk menampilkan daftar error yang seragam lintas library.