Field

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

Installation

pnpm dlx kliping@latest add field

Usage

vue

<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>

Anatomy

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

vue

<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.

Examples

Input

Textarea

Select

Slider

Fieldset

Address Information

We need your address to deliver your order.

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.

Radio

Subscription Plan

Yearly and lifetime plans offer significant savings.

Monthly ($9.99/month)

Yearly ($99.99/year)

Lifetime ($299.99)

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.

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.

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

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.

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.

vue

<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>

Accessibility

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.

Requirements

Semua dipasang otomatis oleh kliping add; tabel ini untuk Anda yang memasang manual atau memeriksa project.

Requirement	Value
Project	Vue 3.5+, Tailwind CSS v4, alias `@` — disiapkan `kliping init`
npm packages	`class-variance-authority@^0.7.1`
Kliping items	`label`, `separator`
Files	`components/ui/field/field.vue` `components/ui/field/field-content.vue` `components/ui/field/field-description.vue` `components/ui/field/field-error.vue` `components/ui/field/field-group.vue` `components/ui/field/field-label.vue` `components/ui/field/field-legend.vue` `components/ui/field/field-separator.vue` `components/ui/field/field-set.vue` `components/ui/field/field-title.vue` `components/ui/field/index.ts`

Anatomy

Susunan bagiannya seperti dipakai di contoh-contoh di atas. Impor semua bagian dari satu tempat, lalu susun begini:

vue

<FieldGroup>
  <Field>
    <FieldLabel />
    <FieldDescription />
    <FieldError />
    <FieldContent>
      <FieldLabel />
      <FieldDescription />
      <FieldError />
    </FieldContent>
  </Field>
  <FieldSet>
    <FieldLegend />
    <FieldDescription />
    <FieldGroup>
      <Field>
        <FieldLabel />
        <FieldDescription />
        <FieldContent>
          <FieldLabel />
          <FieldDescription />
        </FieldContent>
      </Field>
    </FieldGroup>
    <FieldLabel>
      <Field>
        <FieldContent>
          <FieldTitle />
          <FieldDescription />
        </FieldContent>
      </Field>
    </FieldLabel>
    <FieldError />
  </FieldSet>
  <FieldSeparator />
  <FieldError />
  <FieldGroup>
    <FieldSet>
      <FieldLegend />
      <FieldDescription />
      <FieldGroup>
        <Field>
          <FieldLabel />
        </Field>
      </FieldGroup>
    </FieldSet>
    <FieldError />
  </FieldGroup>
</FieldGroup>
<FieldSet>
  <FieldLegend />
  <FieldDescription />
  <FieldGroup>
    <Field>
      <FieldLabel />
      <FieldDescription />
      <FieldContent>
        <FieldLabel />
        <FieldDescription />
        <FieldError />
      </FieldContent>
    </Field>
    <FieldSeparator />
  </FieldGroup>
  <FieldLabel />
  <Field>
    <FieldLabel />
  </Field>
  <FieldSeparator />
  <FieldError />
</FieldSet>
<Field>
  <FieldLabel />
  <FieldDescription />
  <FieldTitle />
  <FieldContent>
    <FieldLabel />
    <FieldDescription />
  </FieldContent>
  <FieldError />
</Field>

API Reference

FieldSet

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

Slot	Props
`#default`	—

Data attribute	Value
`[data-slot]`	`"field-set"`

vue

<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	Description
`variant?`	`"label" \| "legend"`	—	The visual style.

Slot	Props
`#default`	—

Data attribute	Value
`[data-slot]`	`"field-legend"`
`[data-variant]`	`"label" \| "legend"`

vue

<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.

Slot	Props
`#default`	—

Data attribute	Value
`[data-slot]`	`"field-group"`

vue

<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	Description
`orientation?`	`"vertical" \| "horizontal" \| "responsive"`	—	The layout direction.

Slot	Props
`#default`	—

Data attribute	Value
`[data-slot]`	`"field"`
`[data-orientation]`	`"vertical" \| "horizontal" \| "responsive"`

vue

<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.

Slot	Props
`#default`	—

Data attribute	Value
`[data-slot]`	`"field-content"`

vue

<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.

Slot	Props
`#default`	—

Data attribute	Value
`[data-slot]`	`"field-label"`

vue

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

FieldTitle

Menampilkan judul bergaya label di dalam FieldContent.

Slot	Props
`#default`	—

Data attribute	Value
`[data-slot]`	`"field-label"`

vue

<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.

Slot	Props
`#default`	—

Data attribute	Value
`[data-slot]`	`"field-description"`
`[data-orientation]`	set at runtime
`[data-variant]`	set at runtime

vue

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

FieldSeparator

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

Slot	Props
`#default`	—

Data attribute	Value
`[data-slot]`	`"field-separator"`
`[data-content]`	set at runtime

vue

<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	Description
`errors?`	`(string \| { message: string; })[]`	—	Messages to show, deduplicated; one renders as text, several as a list. Ignored when the slot is used.

Slot	Props
`#default`	—

Data attribute	Value
`[data-slot]`	`"field-error"`

vue

<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.

CSS Variables

Token tema yang dibaca komponen ini — ubah nilainya di CSS global (:root dan .dark, lihat Theming) untuk mengubah tampilannya tanpa menyentuh komponennya: --background, --destructive, --muted-foreground, --primary, --radius.

Credits

PreviousEmpty Next File Upload

Field

Installation ​

Usage ​

Anatomy ​

Examples ​

Input ​

Textarea ​

Select ​

Slider ​

Fieldset ​

Checkbox ​

Radio ​

Switch ​

Kartu Pilihan ​

Field Group ​

Tata Letak Responsif ​

Validasi dan Pesan Error ​

Accessibility ​

Requirements ​

Anatomy ​

API Reference ​

FieldSet ​

FieldLegend ​

FieldGroup ​

Field ​

FieldContent ​

FieldLabel ​

FieldTitle ​

FieldDescription ​

FieldSeparator ​

FieldError ​

CSS Variables ​

Credits ​

Installation

Usage

Anatomy

Examples

Input

Textarea

Select

Slider

Fieldset

Checkbox

Radio

Switch

Kartu Pilihan

Field Group

Tata Letak Responsif

Validasi dan Pesan Error

Accessibility

Requirements

Anatomy

API Reference

FieldSet

FieldLegend

FieldGroup

Field

FieldContent

FieldLabel

FieldTitle

FieldDescription

FieldSeparator

FieldError

CSS Variables

Credits