How to Use Flask WTForms to Create Multi-Select Option

Question

I want to add a form on my webpage that lets users select multiple options (not in a dropdown list). For example, If there are 3 possible items, they should be listed as follows:

 ITEM 1                           ITEM 2                    ITEM 3

They should be in separate "boxes", which should be selectable. I don't want to do this in a dropdown or list view. What are my options?

Answer 1

I think I would use checkbox with styling. You can do this in Flask/WTF, but here is the objective:

 body { background: white; color: #323232; margin: 0; height: 100vh; display: flex; align-items: center; justify-content: center; font-family: Helvetica neue, roboto; } input[type=checkbox] { display:none; } input[type=checkbox] + label { background: #ccc; font-style: italic; padding: 20px; cursor:pointer; } input[type=checkbox]:checked + label { background: #f00; font-style: normal; }

 <div style="inline-block"> <input type="checkbox" id="toggle" name="toggle" class="hideThis"> <label for="toggle">Toggle</label> </div> <div style="inline-block"> <input type="checkbox" id="toggle2" name="toggle2" class="hideThis"> <label for="toggle2">Toggle</label> </div> <div style="inline-block"> <input type="checkbox" id="toggle3" name="toggle3" class="hideThis"> <label for="toggle3">Toggle</label> </div>