Cara menggunakan radio button bootstrap

Pada tutorial sebelumnya, kita sudah belajar Tutorial Belajar Bootstrap Bagian 10 : Cara Membuat Formulir di Bootstrap, selanjutnya kita akan belajar cara membuat kustom formulir di Bootstrap.

Bootstrap memungkinkan Anda menyesuaikan kontrol formulir default browser untuk membuat layout formulir yang lebih elegan.

Sekarang Anda dapat membuat tombol radio dan kotak centang yang sepenuhnya disesuaikan dan kompatibel antar-browser, input file, pilih dropdown, input range, dan banyak lagi.

Di bagian berikut, Anda akan melihat cara membuat elemen formulir kustom tersebut satu per satu.

Membuat Kotak Centang Kustom

Untuk membuat kotak centang , bungkus setiap kode checkbox <input> dan <label> yang sesuai dalam elemen <div>, dan terapkan class seperti yang ditunjukkan pada contoh berikut:

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap Custom Checkboxes</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm//dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm//dist/js/bootstrap.bundle.min.js"></script>
<style>
    .bs-example{
        margin: 20px;        
    }
</style>
</head>
<body>
<div class="bs-example">
    <form>
        <div class="custom-control custom-checkbox">
            <input type="checkbox" class="custom-control-input" name="customCheck" id="customCheck1">
            <label class="custom-control-label" for="customCheck1">Custom checkbox</label>
        </div>
        <div class="custom-control custom-checkbox mt-2">
            <input type="checkbox" class="custom-control-input" name="customCheck" id="customCheck2" checked>
            <label class="custom-control-label" for="customCheck2">Custom checkbox lainnya</label>
        </div>
    </form>
</div>
</body>
</html>

Membuat Tombol Radio Kustom

Demikian pula, Anda dapat membuat radio button menggunakan Bootstrap seperti ini:

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap Custom Radio Buttons</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm//dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm//dist/js/bootstrap.bundle.min.js"></script>
<style>
    .bs-example{
        margin: 20px;        
    }
</style>
</head>
<body>
<div class="bs-example">
    <form>
        <div class="custom-control custom-radio">
            <input type="radio" class="custom-control-input" name="customRadio" id="customRadio1">
            <label class="custom-control-label" for="customRadio1">Custom radio</label>
        </div>
        <div class="custom-control custom-radio mt-2">
            <input type="radio" class="custom-control-input" name="customRadio" id="customRadio2" checked>
            <label class="custom-control-label" for="customRadio2">Custom radio lainnya</label>
        </div>
    </form>
</div>
</body>
</html>

Anda juga dapat menempatkan checkbox dan radio button kustom ini sebaris hanya dengan menambahkan class .custom-control-inline kemudian dibungkus dengan elemen <div>, seperti ini:

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap Custom Radio Buttons Inline</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm//dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm//dist/js/bootstrap.bundle.min.js"></script>
<style>
    .bs-example{
        margin: 20px;        
    }
</style>
</head>
<body>
<div class="bs-example">
    <form>
        <div class="custom-control custom-radio custom-control-inline">
            <input type="radio" class="custom-control-input" name="customRadio" id="customRadio1">
            <label class="custom-control-label" for="customRadio1">Custom radio</label>
        </div>
        <div class="custom-control custom-radio custom-control-inline">
            <input type="radio" class="custom-control-input" name="customRadio" id="customRadio2" checked>
            <label class="custom-control-label" for="customRadio2">Custom radio lainnya</label>
        </div>
    </form>
</div>
</body>
</html>

Menonaktifkan Check Box dan Radio Kustom

Check Box  dan tombol radio juga dapat dinonaktifkan.

Cukup tambahkan atribut Boolean disabled ke elemen <input>, seperti yang ditunjukkan pada contoh berikut:

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap Disabling Custom Checkboxes dan Radio Buttons</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm//dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm//dist/js/bootstrap.bundle.min.js"></script>
<style>
    .bs-example{
        margin: 20px;        
    }
</style>
</head>
<body>
<div class="bs-example">
    <form>
        <div class="custom-control custom-checkbox">
            <input type="checkbox" class="custom-control-input" id="customCheck" disabled>
            <label class="custom-control-label" for="customCheck">Nonaktifkan custom checkbox</label>
        </div>
        <div class="custom-control custom-radio mt-2">
            <input type="radio" class="custom-control-input" id="customRadio" disabled>
            <label class="custom-control-label" for="customRadio">Nonaktifkan custom radio</label>
        </div>
    </form>
</div>
</body>
</html>

Membuat Saklar Toggle

Markup saklar mirip dengan check box , satu-satunya perbedaan adalah menggunakan class .custom-switch sebagai ganti .custom-checkbox untuk merender saklar.

Sakelar juga mendukung atribut disabled. Mari kita lihat contohnya:

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap Toggle Switch</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm//dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm//dist/js/bootstrap.bundle.min.js"></script>
<style>
    .bs-example{
        margin: 20px;        
    }
</style>
</head>
<body>
<div class="bs-example">
    <form>
        <div class="custom-control custom-switch">
            <input type="checkbox" class="custom-control-input" id="customSwitch2">
            <label class="custom-control-label" for="customSwitch2">Toggle switch</label>
        </div>
        <div class="custom-control custom-switch mt-2">
            <input type="checkbox" class="custom-control-input" disabled id="customSwitch2">
            <label class="custom-control-label" for="customSwitch2">Nonaktifkan switch element</label>
        </div>
    </form>
    <p class="mt-4"><strong>Note:</strong> Klik pada toggle switch untuk melihat cara kerjanya.</p>
</div>
</body>
</html>

Membuat Menu Pilihan Kustom

Menu pemilihan kustom dapat dibuat hanya dengan menambahkan class .custom-select pada elemen <select>.

Namun, style kustom dari menu pilihan hanya terbatas pada tampilan awal dan tidak dapat mengubah <option> karena keterbatasan browser. Berikut contohnya:

Anda juga dapat membuat pilihan kustom kecil dan besar agar sesuai dengan input teks Bootstrap yang berukuran sama.

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap Custom Select Menu Sizing</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm//dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm//dist/js/bootstrap.bundle.min.js"></script>
<style>
    .bs-example{
        margin: 20px;        
    }
</style>
</head>
<body>
<div class="bs-example">
    <form>
        <select class="custom-select custom-select-lg">
            <option selected> Menu pilih kustom besar </option>
            <option value="1">Satu</option>
            <option value="2">Dua</option>
            <option value="3">Tiga</option>
        </select>
        <select class="custom-select mt-3">
            <option selected> Menu pilihan kustom default</option>
            <option value="1">Satu</option>
            <option value="2">Dua</option>
            <option value="3">Tiga</option>
        </select>
        <select class="custom-select custom-select-sm mt-3">
            <option selected> Menu pilih kustom kecil </option>
            <option value="1">Satu</option>
            <option value="2">Dua</option>
            <option value="3">Tiga</option>
        </select>
    </form>
</div>
</body>
</html>

Pemilihan  bootstrap juga mendukung beberapa atribut dan ukuran seperti pemilihan normal:

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap Custom Multi-select Menu</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm//dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm//dist/js/bootstrap.bundle.min.js"></script>
<style>
    .bs-example{
        margin: 20px;        
    }
</style>
</head>
<body>
<div class="bs-example">
    <form>
        <select class="custom-select" size="3" multiple>
            <option selected> Buka menu select ini </option>
            <option value="1">Satu</option>
            <option value="2">Dua</option>
            <option value="3">Tiga</option>
        </select>
    </form>
</div>
</body>
</html>

Membuat Input Rentang Kustom

Untuk membuat input rentang kustom, cukup terapkan class .custom-range ke <input type = “range”>.

Dengan input rentang default memiliki nilai implisit untuk min dan max — 0 dan 100, masing-masing. Tapi, Anda dapat menentukan nilai baru untuk mereka dengan menggunakan atribut min dan max.

Juga, masukan rentang “snap” ke nilai integer secara default. Untuk mengubahnya, Anda dapat menentukan nilai step.

Dalam contoh berikut, kita telah menggandakan jumlah step dengan menggunakan step = “0,5”.

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap Custom Range Input with Min, Max dan Step Attributes</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm//dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm//dist/js/bootstrap.bundle.min.js"></script>
<style>
    .bs-example{
        margin: 20px;        
    }
</style>
<script>
    $(document).ready(function(){
        // Baca nilai pada page load
        $("#result b").html($("#customRange").val());

        // Baca nilai pada change
        $("#customRange").change(function(){
            $("#result b").html($(this).val());
        });
    });        
</script> 
</head>
<body>
<div class="bs-example">
    <p class="mt-4"><strong>Catatan:</strong> Seret lingkaran biru untuk melihat cara kerjanya.</p>
    <form>
        <label for="customRange">Custom range</label>
        <input type="range" class="custom-range" min="0" max="10" step="0.5" id="customRange">
    </form>
    <div id="result">Current Value: <b></b></div>
</div>
</body>
</html>

Membuat Input File Kustom

Dengan Bootstrap Anda juga dapat membuat input file kustom yang elegan dan ditampilkan secara konsisten di seluruh browser. Mari kita coba contoh berikut untuk melihat cara kerjanya:

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap Custom File Input</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm//dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm//dist/js/bootstrap.bundle.min.js"></script>
<style>
    .bs-example{
        margin: 20px;        
    }
</style>
</head>
<body>
<div class="bs-example">
    <form>
        <div class="custom-file">
            <input type="file" class="custom-file-input" id="customFile">
            <label class="custom-file-label" for="customFile">Pilih file</label>
        </div>
    </form>
</div>
</body>
</html>

Tip: Bootstrap menyembunyikan file default <input> melalui opacity dan memberi style pada <label> agar terlihat seperti input.

Tombol dibuat dan diposisikan dengan :: after pseudo element. Terakhir, <input> transparan ditempatkan di atas <label> berstyle menggunakan pemosisian CSS dengan lebar dan tinggi yang tepat untuk memicu kotak dialog pemilih file.

Semoga tutorial ini membantu Anda elajar cara membuat kustom formulir di Bootstrap.