JSFiddle - React, Tailwind, and code Playground

by thetenfold

HTML

<input type="radio" class="active unitToggle" name="group1" checked="checked">Active</input>
<input type="radio" class="inactive unitToggle" name="group1">Inactive</input>

<select name="unit" id="unitsSelector">
    <option value="none" selected>select</option>
    <option value="1" active="F">1</option>
    <option value="2" active="T">2</option>
    <option value="3" active="F">3</option>
    <option value="4" active="T">4</option>
    <option value="5" active="F">5</option>
    <option value="6" active="T">6</option>
    <option value="7" active="F">7</option>
    <option value="8" active="T">8</option>
    <option value="9" active="F">9</option>
    <option value="10" active="T">10</option>
    <option value="11" active="F">11</option>
    <option value="12" active="T">12</option>
    <option value="13" active="F">13</option>
    <option value="14" active="T">14</option>
    <option value="15" active="F">15</option>
    <option value="16" active="T">16</option>
    <option value="17" active="F">17</option>
    <option value="18" active="T">18</option>
    <option value="19" active="F">19</option>
    <option value="20" active="T">20</option>
    <option value="21" active="F">21</option>
    <option value="22" active="T">22</option>
    <option value="23" active="F">23</option>
    <option value="24" active="T">24</option>
    <option value="25" active="F">25</option>
    <option value="26" active="T">26</option>
    <option value="27" active="F">27</option>
    <option value="28" active="T">28</option>
    <option value="29" active="F">29</option>
    <option value="30" active="T">30</option>
    <option value="31" active="F">31</option>
    <option value="32" active="T">32</option>
    <option value="33" active="F">33</option>
    <option value="34" active="T">34</option>
    <option value="35" active="F">35</option>
    <option value="36" active="T">36</option>
    <option value="37" active="F">37</option>
    <option value="38" active="T">38</option>
   ...

CSS

input.unitToggle {
    display: inline;
}

select#unitsSelector {
    display: block;
}

input.active:checked + input + select option[active="F"] {
    display: none;
}

input.inactive:checked + select option[active="T"] {
    display: none;
}