Live Docs

Navigation

Forms /

stable

Field

Wrapper form group: label + control + helper/error. Layout konsisten satu komponen untuk semua input type.

import { Field } from "@naraya/ui";

Overview

Composition: Field mengatur layout dan accessibility wiring (role="alert" pada error). Konten children adalah input/textarea/select/custom control.

Examples

Default

<Field label={<Label htmlFor="name">Nama lengkap</Label>}>
  <Input id="name" />
</Field>

With helper text

3-20 karakter, huruf kecil, angka, atau underscore.
<Field
  label={<Label htmlFor="handle" required>Username</Label>}
  helper="3-20 karakter, huruf kecil, angka, atau underscore."
>
  <Input id="handle" />
</Field>

With error

Error menggantikan helper, ditampilkan dengan role='alert'.

Format email tidak valid.
<Field
  label={<Label htmlFor="email" required>Email</Label>}
  error="Format email tidak valid."
>
  <Input id="email" error type="email" />
</Field>

Props

PropTypeDefaultDescription
labelReactNode—Label element di atas children.
helperReactNode—Helper text di bawah children. Disembunyikan saat error aktif.
errorReactNode—Error message. Render dengan role='alert'.
requiredbooleanfalseMarker required level Field (cosmetic; gunakan Label required juga).
children*ReactNode—Control element (Input, Textarea, dll).
...restHTMLAttributes<HTMLDivElement>—Atribut div standar.

Tokens Used

--spacing-1

Gap antar label/control/helper

--text-muted

Helper text color

--color-error

Error text color

--font-size-xs

Helper & error size

Accessibility

  • Error pesan render dengan role='alert' otomatis (screen reader announce).
  • Pakai Label dengan htmlFor untuk mengikat ke input id.
  • Helper text bisa ditambah aria-describedby pada input (opsional, jika butuh announce).
  • Required asterisk hanya visual; selalu tambah aria-required atau required pada input asli.