Form UX · reference
Ukuran box adalah janji ke user tentang panjang jawaban yang diharapkan. Box empat baris bilang “tulis singkat”. Kalau isinya ternyata panjang dan harus di-scroll, yang salah biasanya bukan scrollbar-nya — tapi janji yang dibuat box itu.
Tiap pola di bawah bisa kamu coba langsung. Ketik di dalamnya, tarik, klik expand — semuanya berfungsi.
Dipakai LinkedIn (About: batas 2.600 karakter, counter di pojok kanan bawah) · Airbnb (ringkasan listing dibatasi 500 karakter)
Perbaikan paling murah dan paling sering cukup. Ukur panjang jawaban yang benar-benar kamu harapkan, lalu beri tinggi segitu. Counter-nya menampilkan rentang target, bukan cuma batas maksimal — ini bedanya besar: batas maksimal bikin orang menulis sampai mentok, rentang target bikin orang berhenti di tempat yang pas.
Mayoritas user nggak akan pernah menyentuh scrollbar karena jawabannya memang muat.
Nggak menolong kalau memang ada user yang menulis 5× lebih panjang dari target.
Dipakai GitHub (kotak komentar issue & PR punya grabber di pojok kanan bawah)
Satu baris CSS: resize: vertical. User yang butuh ruang menariknya sendiri, yang nggak butuh nggak terganggu. Nggak ada layout yang bergerak tanpa diminta.
Kontrol penuh di tangan user, perilakunya predictable, nol JavaScript.
Desktop saja Handle resize nggak ada di touch device. Perlu pasangan pola lain untuk mobile.
Pola umum di kotak komentar aplikasi produktivitas — compact saat idle, lega saat dipakai
Field ringkas ketika form sedang di-scan, lalu melebar begitu di-klik. Form tetap pendek dan mudah dilihat keseluruhannya, tapi ruang menulisnya nggak sempit.
Field lain di bawah tetap di tempatnya sampai kamu klik.
Menyelesaikan dua kebutuhan yang bertabrakan: form ringkas untuk di-scan, ruang lega untuk menulis.
Konten di bawahnya tetap bergeser sekali saat fokus. Di mobile dengan keyboard terbuka, perlu dicek jangan sampai tertutup.
Dipakai Airtable (expand record untuk long-text field) · LinkedIn (About diedit di modal terpisah)
Field tetap ringkas di form, dengan tombol kecil yang membuka editor besar. Keuntungan yang sering dilupakan: di dalam editor itu guidelines bisa ditaruh berdampingan dengan area tulis — jadi user nggak perlu bolak-balik mengingat aturannya.
Ruang tulis maksimal tanpa merusak kepadatan form, dan guidelines jadi terlihat saat dibutuhkan.
Satu klik ekstra dan perpindahan konteks. Berlebihan kalau jawabannya cuma 2–3 kalimat.
Dipakai Airbnb — deskripsi listing dipecah jadi empat bagian terpisah: ringkasan, The space, Guest access, dan Other things to note
Ini rekomendasi utamaku untuk Artist Bio. Manfaatnya bukan cuma UI: field bebas yang besar menghasilkan jawaban yang panjang dan isinya nggak konsisten — susah dikurasi, susah ditampilkan rapi. Pertanyaan pendek yang spesifik menghasilkan jawaban yang bisa langsung dipakai.
Nggak ada satu pun field yang perlu di-scroll, dan datanya jadi terstruktur — bisa ditampilkan sebagai kartu, difilter, atau dicetak konsisten.
Perlu perubahan skema data dan tampilan publik, bukan cuma CSS. Kurang cocok kalau bio memang harus bebas bentuk.
Pola umum di editor dokumen dan kotak komentar modern
Ini yang diminta di feedback. Aman asal ada max-height: field tumbuh mengikuti isi sampai batas tertentu, setelah itu baru scroll. Tanpa batas, tombol submit terus bergeser turun saat user mengetik, dan di mobile dengan keyboard terbuka field bisa mendorong isinya ke belakang keyboard.
Nggak ada interaksi tambahan sama sekali — user cuma mengetik.
Konten di bawahnya bergerak terus selama mengetik. Wajib dites di mobile dengan keyboard terbuka.
Dipakai GitHub — tiap kotak komentar punya tab Write dan Preview
Nggak menambah ruang menulis, tapi menyelesaikan setengah masalahnya: user bisa membaca ulang tulisannya secara utuh tanpa scroll di kotak sempit. Berguna kalau keluhannya sebenarnya “susah mengecek yang sudah kutulis”, bukan “susah menulisnya”.
Murah, dan langsung menjawab kebutuhan membaca ulang.
Ruang menulisnya tetap sempit. Paling baik dipasangkan dengan pola 01 atau 04.
Memilih
| Pola | Effort | Mobile | Paling cocok untuk |
|---|---|---|---|
| 01 Tinggi jujur + counter | Rendah | Baik | Hampir semua kasus — coba ini dulu |
| 02 Resize manual | Sangat rendah | Tidak ada | Tambahan untuk desktop |
| 03 Expand saat fokus | Rendah | Perlu dites | Form panjang dengan banyak field |
| 04 Editor fullscreen | Sedang | Baik | Deskripsi produk, konten benar-benar panjang |
| 05 Pecah jadi field pendek | Tinggi | Baik | Artist Bio — kalau datanya akan ditampilkan terstruktur |
| 06 Auto-grow + max-height | Rendah | Perlu dites | Kotak komentar, catatan singkat |
| 07 Write / Preview | Rendah | Baik | Pelengkap, bukan solusi tunggal |
Artist Bio → pola 05 (pecah jadi 3 pertanyaan pendek). Product description → pola 01 + 04 (tinggi default yang jujur, plus tombol expand untuk yang butuh ruang).
Satu hal yang menentukan segalanya sebelum memilih: bio ini nanti ditampilkan di mana, dan berapa panjang yang benar-benar terlihat di sana?
Contohnya jelas di dua referensi tadi. LinkedIn mengizinkan 2.600 karakter di About, tapi cuma sekitar 300 karakter pertama yang terlihat sebelum tombol “See more”. Airbnb membatasi ringkasan listing di 500 karakter, dan hanya sekitar 295 yang tampil sebelum “show more”. Keduanya mendesain input-nya mengikuti tampilan-nya.
Kalau bio artist di Elux nanti muncul di kartu profil atau katalog cetak dengan ruang terbatas, jawabannya hampir pasti pola 05 — bukan membesarkan box-nya.
Referensi Airbnb dan LinkedIn diverifikasi Agustus 2026. Pola GitHub dan Airtable berdasarkan perilaku produk yang sudah lama stabil — cek ulang kalau jadi dasar keputusan besar.