Komponen / Form & input

FormField

Label + kontrol + teks bantuan/error. Selalu dipakai untuk isian form agar label, tanda wajib, dan pesan error konsisten serta terhubung.

React · BetaFigma · siapFigma Sumber

Dasar

Tandai field wajib (*) atau opsional — pilih yang lebih jarang di form itu agar tidak ramai.

Nomor PO Customer

Sesuai dokumen PO dari customer.

Tipe PO

Catatan internal(opsional)

import { FormField, Input, Select } from '@divistant/circca-react';

export default function Example() {
  return (
    <div className="grid max-w-md gap-4">
      <FormField label="Nomor PO Customer" required helperText="Sesuai dokumen PO dari customer.">
        <Input placeholder="PO/2026/0001" />
      </FormField>
      <FormField label="Tipe PO" required>
        <Select
          options={[
            { value: 'lisensi-jasa', label: 'Lisensi + Jasa' },
            { value: 'lisensi', label: 'Lisensi saja' },
            { value: 'jasa', label: 'Jasa saja' },
          ]}
        />
      </FormField>
      <FormField label="Catatan internal" optional>
        <Input />
      </FormField>
    </div>
  );
}

Validasi

Pesan error menggantikan teks bantuan dan membuat kontrol invalid. Jelaskan apa yang salah dan cara memperbaikinya.

import { useState } from 'react';
import { Button, FormField, Input } from '@divistant/circca-react';

export default function Example() {
  const [npwp, setNpwp] = useState('01.234.567');
  const [submitted, setSubmitted] = useState(false);
  const valid = npwp.replace(/\D/g, '').length === 16;
  return (
    <form
      className="grid max-w-md gap-4"
      onSubmit={e => {
        e.preventDefault();
        setSubmitted(true);
      }}
    >
      <FormField
        label="NPWP"
        required
        helperText="16 digit, sesuai kartu NPWP."
        error={submitted && !valid ? 'NPWP harus 16 digit. Periksa kembali angka yang dimasukkan.' : undefined}
      >
        <Input value={npwp} onChange={e => setNpwp(e.target.value)} inputMode="numeric" />
      </FormField>
      <div>
        <Button type="submit" variant="primary">Simpan</Button>
      </div>
    </form>
  );
}

Read-only & nonaktif

Read-only untuk dokumen yang sudah submit (teks tetap terbaca penuh); disabled untuk isian yang tidak berlaku.

Nomor BAST

Dokumen sudah disubmit — hanya bisa dibaca.

Distributor

Terisi otomatis dari PO distributor.

import { FormField, Input } from '@divistant/circca-react';

export default function Example() {
  return (
    <div className="grid gap-4 sm:grid-cols-2">
      <FormField label="Nomor BAST" readOnly helperText="Dokumen sudah disubmit — hanya bisa dibaca.">
        <Input defaultValue="BAST/2026/09/014" />
      </FormField>
      <FormField label="Distributor" disabled helperText="Terisi otomatis dari PO distributor.">
        <Input placeholder="—" />
      </FormField>
    </div>
  );
}