ユーザーにプリセットオプションのリストから選択させる場合、チェックボックス（特定のリストから複数のオプションを選択）およびラジオボタン（特定のリストから1つのオプションのみを選択）を使用できます。 inputタグで_checkbox_クラスと_radio_クラスを使用して、ブラウザー間の互換性とユーザーエクスペリエンスを維持します。
以下の例は、ブルマで_checkbox_クラスを使用してチェックボックスの作成を示しています-
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<title>Bulma Forms Example</title>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
</head>
<body>
<section class = "section">
<div class = "container">
<span class = "title">
Checkbox
</span>
<br>
<br>
<div class = "checkbox">
<label class = "is-size-5">Fruits</label>
<br>
<label class = "checkbox">
<input type = "checkbox">
Orange
</label>
<label class = "checkbox">
<input type = "checkbox">
Apple
</label>
<label class = "checkbox">
<input type = "checkbox">
Grapes
</label>
<label class = "checkbox">
<input type = "checkbox">
Mango
</label>
</div>
<br>
<br>
<label class = "is-size-5">Disabled Checkbox</label>
<br>
<label class = "checkbox" disabled>
<input type = "checkbox" disabled>
Orange
</label>
</div>
</section>
</body>
</html>以下の出力が表示されます-
以下の例は、Bulmaでのラジオボタンの作成（ラベルで_radio_クラスを使用）を示しています-
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<title>Bulma Forms Example</title>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
</head>
<body>
<section class = "section">
<div class = "container">
<span class = "title">
Radio Button
</span>
<br>
<br>
<div class = "checkbox">
<label class = "is-size-5">Fruits</label>
<br>
<label class = "radio">
<input type = "radio" name = "fruitdemo">
Orange
</label>
<label class = "radio">
<input type = "radio" name = "fruitdemo">
Apple
</label>
</div>
<br>
<br>
<label class = "is-size-5">Disabled Radio Button</label>
<br>
<label class = "radio">
<input type = "radio" name = "fruitdemo">
Orange
</label>
<label class = "radio" disabled>
<input type = "radio" name = "fruitdemo" disabled>
Apple
</label>
<br>
<br>
<label class = "is-size-5">Using checked HTML attribute</label>
<br>
<label class = "radio">
<input type = "radio" name = "fruitdemo" checked>
Orange
</label>
<label class = "radio">
<input type = "radio" name = "fruitdemo">
Apple
</label>
</div>
</section>
</body>
</html>以下の出力が表示されます-
