JSFiddle - React, Tailwind, and code Playground

Select all checkbox options

by tonytlwu

HTML

<form>
  <div class="alert">Here's a normal mode checkbox field, where all the fields are displayed, with a <strong>Select all</strong> at the top.</div>
  <p><label>Breakfast options</label></p>
  <p><input type="checkbox"> Select all</p>
  <p><input type="checkbox"> Croissants</p>
  <p><input type="checkbox"> Full English breakfast</p>
  <p><input type="checkbox"> Eggs Benedict</p>
  <p><input type="checkbox"> Orange juice</p>
  <p><input type="checkbox"> Apple juice</p>
  <p><input type="checkbox"> English Tea</p>
  
  <div class="alert">Here's a read-only checkbox field, where an option is only shown if it matches the provided values. They are displayed without the checkboxes at the beginning as per <code>XOR-331</code>. They come with a <strong>Select all</strong> checkbox option at the top. The <strong>Select all</strong> option appears to be completely useless because a read-only field should not have an interactive UI element like the <strong>Select all</strong> checkbox</div>
  
  <p><label>Breakfast options (read-only)</label></p>
  <p><input type="checkbox"> Select all</p>
  <p>Eggs benedict</p>
  <p>Orange juice</p>
</form>

CSS

body { font-family: arial; line-height: 1.38; }
label { font-weight: bold; }
.alert { margin: 10px 0; background: beige; padding: 10px; border: 1px solid orange; }