Cara membuat radio button di HTML
Radio button membuat pembaca memilih tepat satu opsi dari sebuah grup. Setiap opsi adalah sebuah <input type="radio">, dan memberi semuanya name yang sama itulah yang membuatnya menjadi satu grup. Pilih ukuran lalu tekan Order:
Form ini mengirim satu pasangan, size=m: name grupnya dan value tombol yang dipilih. Bagian-bagiannya:
nameyang sama di setiap tombol dalam grup. Memilih satu tombol membatalkan pilihan tombol lain.valueyang berbeda di setiap tombol. Itulah yang diterima server. Radio tanpavaluemengirimon, yang tidak memberi tahu server apa pun.checkedpada opsi default.- Sebuah
<label>di sekeliling setiap tombol, supaya teksnya bisa diklik, dan<fieldset>dengan<legend>supaya screen reader mengumumkan pertanyaannya ("Size") bersama setiap opsi.
Name yang membentuk grup
Radio dengan nama berbeda adalah grup yang terpisah, dan setiap grup punya pilihannya sendiri. Contoh ini punya dua grup, ditambah satu set yang rusak karena setiap radio-nya tidak sengaja diberi nama sendiri:
Klik ketiganya di grup yang rusak: semuanya tetap terpilih dan tidak satu pun bisa dimatikan lagi, gabungan terburuk dari keduanya. Radio dikelompokkan berdasarkan name di dalam form yang sama, jadi dua form masing-masing bisa punya grup name="size" sendiri.
Grup wajib dan tanpa default
required pada radio mana pun di grup itu berarti salah satunya harus dipilih sebelum form dikirim. Tidak menulis checked membuat pembaca harus memilih sendiri, yang tepat kalau tidak ada default yang masuk akal:
Tekan Continue tanpa memilih dan browser menghentikan pengiriman dengan sebuah pesan. Begitu ada opsi yang dipilih, seluruh grup menjadi valid. Grup yang tidak dipilih dan tidak wajib tidak mengirim apa pun, sama seperti checkbox yang tidak dicentang.
Klik bisa memilih radio tapi tidak pernah bisa membatalkannya. Kalau "tidak menjawab" harus tetap mungkin sesudah ada pilihan, tambahkan opsi khusus untuk itu.
Membaca nilai yang dipilih di JavaScript
form.elements.name mengembalikan seluruh grup, dan .value-nya adalah nilai radio yang dipilih (string kosong kalau belum ada). Event change terpicu pada radio yang baru saja dipilih:
Listener-nya dipasang di form, jadi listener itu menangkap perubahan di kolom mana pun di dalamnya. Di luar form, cari radio yang dipilih dengan document.querySelector('input[name="period"]:checked').
Perilaku keyboard
Grup radio adalah satu perhentian dalam urutan Tab. Tab masuk ke grup dan berhenti di radio yang dipilih (atau di radio pertama kalau belum ada yang dipilih), lalu tombol panah memindahkan pilihan antar opsi. Tab sekali lagi keluar dari grup. Semua ini otomatis didapat dari input radio sungguhan yang berbagi name, dan ini satu alasan lagi untuk tidak membuat ulang radio dari elemen <div>.
Styling radio button
accent-color mengganti warna radio bawaan. appearance: none membuatmu bisa menggambar lingkaran sendiri. Dan karena radio yang disembunyikan tetap bisa dipilih lewat label-nya, sebuah grup bisa tampil seperti kumpulan kartu sambil tetap mempertahankan semua perilaku radio:
Lingkaran kustom itu hanyalah border tebal saat dipilih. Kartu-kartunya menyembunyikan input dengan opacity: 0, bukan display: none, sehingga input tetap bisa difokuskan dan tombol panah tetap berfungsi, sedangkan :has(input:checked) mengatur gaya kartu yang dipilih. :has() berfungsi di Chrome, Firefox dan Safari versi terbaru.
Radio, checkbox atau select?
| Pakai | Kapan |
|---|---|
| Radio button | Satu pilihan dari beberapa opsi (sekitar 2 sampai 6) yang semuanya perlu terlihat |
| Checkbox | Pilihan dalam jumlah berapa pun, termasuk tidak memilih sama sekali |
Sebuah <select> | Satu pilihan dari daftar panjang, seperti negara (lihat select HTML) |
Kesalahan umum
nameyang berbeda dalam satu grup. Setiap radio bisa dipilih dan tidak ada yang bisa dibatalkan.- Tanpa
value. Server menerimaon, apa pun yang dipilih. - Menyembunyikan input dengan
display: nonedi desain kustom. Input itu tidak bisa lagi difokuskan atau dipakai dengan keyboard. - Tanpa
<fieldset>dan<legend>. Screen reader mengumumkan "Small, radio button" tanpa pertanyaan yang menyertainya. - Satu radio button saja untuk kotak "Saya setuju". Pilihannya tidak akan pernah bisa dibatalkan; pakai checkbox.
checkedpada beberapa radio di satu grup. Hanya yang terakhir yang akhirnya terpilih.
Pertanyaan yang sering diajukan
Bagaimana cara membuat radio button di HTML?
Tulis satu <input type="radio"> untuk setiap opsi, beri semuanya name yang sama dan value yang berbeda, lalu letakkan masing-masing di dalam <label>: <label><input type="radio" name="size" value="m"> Medium</label>. Nama yang sama membuat semuanya menjadi satu grup yang hanya bisa dipilih satu.
Kenapa aku bisa memilih lebih dari satu radio button?
Tombol-tombol itu tidak memakai name yang sama. Radio button hanya membentuk grup lewat name yang identik (di form yang sama), dan hanya satu tombol per grup yang bisa dipilih.
Bagaimana cara mengambil nilai radio button yang dipilih di JavaScript?
Pakai form.elements.size.value, dengan size sebagai nama grupnya; hasilnya adalah nilai tombol yang dipilih, atau string kosong kalau belum ada yang dipilih. Tanpa form: document.querySelector('input[name="size"]:checked')?.value.
Bagaimana cara mengatur radio button default?
Tambahkan checked ke satu tombol di grup itu: <input type="radio" name="plan" value="free" checked>. Kalau beberapa tombol memilikinya, yang terakhir yang menang.
Bisakah pilihan radio button dibatalkan?
Tidak dengan mengkliknya; klik hanya memilih. Sediakan opsi "Tidak ada", reset form-nya, atau atur button.checked = false di JavaScript. Kalau pilihannya opsional dan bisa dihapus, checkbox atau select mungkin lebih cocok.
