Advanced · Level 17: Design SystemAdvanced65 menitBahasa Indonesia

Tabs and Select

Memilih tabs atau native select berdasarkan bentuk content dan interaction tanpa membuat custom control terlalu awal.

StatusMemuat progres

ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

Membedakan tabs untuk section content sejajar dari select untuk satu value atau filter
Menjelaskan tablist, tab, tabpanel, active state, serta keyboard expectation
Membuat wrapper native select dengan label eksplisit
Menunda custom select atau combobox sampai requirement product membutuhkannya

ReactTabsSelectNative HTMLKeyboard Navigation

Isi lesson

6 blok

1.
Pilih control dari tugas user, bukan dari bentuk modernBelum selesaiWajib
2.
Native select wrapper untuk filter courseBelum selesaiWajib
3.
Coding practiceBelum selesaiWajib
4.
Cek pemahamanBelum selesaiWajib
5.
Custom select adalah keputusan accessibility besarBelum selesaiOpsional
6.
RingkasanBelum selesaiWajib

Pilih control dari tugas user, bukan dari bentuk modern

Wajib

Tabs menampilkan section content sejajar di satu context, misalnya Overview, Curriculum, dan Reviews pada detail course. User berpindah panel tanpa mengganti object utama yang dibaca. Pattern ini memiliki tablist, tab aktif, tabpanel terkait, serta keyboard behavior yang perlu diuji. Tabs bukan pengganti navigation utama, filter data, atau langkah form.

Select lebih cocok untuk memilih satu value: sort order, level filter, timezone, atau assignee. Native select sudah membawa keyboard, focus, mobile behavior, serta semantics browser. Bungkus hanya ketika label, hint, error, spacing, atau token perlu konsisten. Jangan membuat custom select karena visual native terasa kurang menarik. Combobox dan listbox membawa contract keyboard, active option, focus, announcement, search, serta pointer behavior yang jauh lebih besar.

Bagian ini memengaruhi progres lesson.

Native select wrapper untuk filter course

Wajib

tsx

type CourseFilterOption = { value: string; label: string };
type CourseFilterSelectProps = { id: string; label: string; value: string; options: CourseFilterOption[]; onChange: (nextValue: string) => void };

export function CourseFilterSelect({ id, label, value, options, onChange }: CourseFilterSelectProps) {
  return (
    <div className="filter-select">
      <label htmlFor={id}>{label}</label>
      <select id={id} value={value} onChange={(event) => onChange(event.target.value)}>
        {options.map((option) => <option key={option.value} value={option.value}>{option.label}</option>)}
      </select>
    </div>
  );
}

Props menyatakan data yang dibutuhkan select: id, label, current value, options, dan callback. Bila product nanti benar-benar membutuhkan search, multi-select, rich option, atau async result, buat keputusan component baru dengan accessibility contract eksplisit; jangan mengubah wrapper ini diam-diam menjadi combobox.

Bagian ini memengaruhi progres lesson.

Coding practice

WajibDibuka di workspace khusus

Build course filter select

Buat native select wrapper dengan label, typed options, current value, dan onChange callback.

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.

3 cek otomatis4 checklist

Belum selesaiBuka practice

Cek pemahaman

WajibJawab dulu

Cek pemahaman singkat

Situasi mana yang paling tepat memakai tabs?

Progres lesson naik setelah jawaban benar.

Catatan penting

Opsional

Custom select adalah keputusan accessibility besar

Native select sudah operable dengan keyboard dan platform behavior familiar. Sebelum membuat custom version, tulis requirement nyata: search, multi-select, rich option, atau async result. Jika ada, gunakan primitive teruji dan QA keyboard, Escape, focus return, active option, mouse, touch, serta mobile behavior.

Opsional, tidak menghambat penyelesaian lesson.

Ringkasan

Wajib

Tabs mengatur panel content sejajar; select memilih satu value dari daftar.
Tabs membawa tablist, active tab, tabpanel, dan keyboard behavior yang perlu diuji saat runtime.
Native select adalah pilihan kuat ketika requirement hanya memilih value.
Custom control dibangun dari requirement product dan accessibility contract, bukan visual preference.
Berikutnya, Uji Kompetensi menggabungkan anatomy form, feedback, API, dan keputusan pattern.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Pilih control dari tugas user, bukan dari bentuk modern.

Memuat progres Review module