Advanced · Level 17: Design SystemAdvanced70 menitBahasa Indonesia

Form Components

Menyusun field reusable dari label, input, hint, error, dan state tanpa menyembunyikan semantic HTML yang dibutuhkan browser.

StatusMemuat progres

ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

Membedakan layout field dari native input control yang menerima value dan event
Menghubungkan label, hint, error, dan input dengan id yang dapat dibaca browser
Mendesain props field agar disabled, error, dan help text jelas bagi consumer
Menghindari generic input yang menyembunyikan type atau validation behavior penting

ReactFormsLabelsValidation UXAccessibility

Isi lesson

6 blok

1.
Mulai dari hubungan label, control, hint, dan errorBelum selesaiWajib
2.
Text field dengan label, hint, dan errorBelum selesaiWajib
3.
Coding practiceBelum selesaiWajib
4.
Cek pemahamanBelum selesaiWajib
5.
Jangan membuat satu Input untuk setiap kemungkinanBelum selesaiOpsional
6.
RingkasanBelum selesaiWajib

Mulai dari hubungan label, control, hint, dan error

Wajib

Product form yang nyaman tidak dimulai dari wrapper bernama Input dengan puluhan props. Mulailah dari struktur yang harus benar pada setiap field: label mengidentifikasi control, hint menjelaskan format atau dampak, error menjelaskan perbaikan, dan input mempertahankan type serta state native-nya. Jika pola itu berulang pada profile, invite, atau settings, component kecil dapat menjaga token dan relationship accessibility tanpa menghapus context domain.

Pisahkan tanggung jawabnya. FormField dapat mengatur label, hint, dan error; input atau select tetap bertanggung jawab pada value, disabled, type, dan event. Practice ini memakai CourseTextField agar anatomy terlihat dalam satu file. Di product nyata, jangan menyembunyikan type=email, required, autoComplete, atau nama field hanya demi API yang tampak singkat. Consumer perlu tetap memahami data yang dikirim browser.

Bagian ini memengaruhi progres lesson.

Text field dengan label, hint, dan error

Wajib

tsx

type CourseTextFieldProps = {
  id: string;
  label: string;
  hint?: string;
  error?: string;
  value: string;
  onChange: (nextValue: string) => void;
};

export function CourseTextField({ id, label, hint, error, value, onChange }: CourseTextFieldProps) {
  const hintId = id + "-hint";
  const errorId = id + "-error";

  return (
    <div className="form-field">
      <label htmlFor={id}>{label}</label>
      {hint ? <p id={hintId}>{hint}</p> : null}
      <input
        id={id}
        type="email"
        value={value}
        aria-invalid={Boolean(error)}
        aria-describedby={error ? errorId : hint ? hintId : undefined}
        onChange={(event) => onChange(event.target.value)}
      />
      {error ? <p id={errorId} role="alert">{error}</p> : null}
    </div>
  );
}

label memakai htmlFor yang sama dengan id input. Hint atau error aktif menjadi aria-describedby sehingga user mendapat context tambahan saat masuk ke control. aria-invalid tidak menggantikan pesan error; ia hanya menandai bahwa value perlu diperbaiki. Schema dan submit flow tetap milik form owner.

Bagian ini memengaruhi progres lesson.

Coding practice

WajibDibuka di workspace khusus

Build course text field

Buat CourseTextField dengan label, hint/error relationship, input email native, dan disabled state.

Tujuan awal: Fokus di tab TSX.

Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.

Tombol selesai aktif setelah semua validasi wajib lolos.

5 cek otomatis4 checklist

Belum selesaiBuka practice

Cek pemahaman

WajibJawab dulu

Cek pemahaman singkat

Mengapa error text tidak cukup hanya diberi warna merah?

Progres lesson naik setelah jawaban benar.

Kesalahan umum

Opsional

Jangan membuat satu Input untuk setiap kemungkinan

Input universal dengan mode, size, isPassword, prefix, suffix, tooltip, dan banyak boolean menyamarkan semantics serta membuat kombinasi state sulit diuji. Mulai dari field yang jelas. Buat component khusus hanya saat consumer, interaction, atau accessibility requirement memang berbeda.

Opsional, tidak menghambat penyelesaian lesson.

Ringkasan

Wajib

Field reusable tetap mempertahankan label, control native, hint, dan error yang dapat dibaca user.
id, htmlFor, aria-describedby, dan aria-invalid menjaga relationship field saat UI tumbuh.
Error perlu menjelaskan perbaikan, bukan hanya menandai warna state.
Component field tidak perlu mengambil alih schema atau setiap jenis input sekaligus.
Berikutnya, prinsip anatomy dan state yang sama diterapkan pada table data.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Mulai dari hubungan label, control, hint, dan error.

Memuat progres Review module