UI: checkbox component

[gdebrauwer]

A “radio” component exists in the UI package, but a checkbox component does not exist yet. This is an attempt at adding such component. This is still a Work In Progress, but before I spend more time on this I want to check if this is the correct direction for a “checkbox” component.

A single checkbox

<div x-checkbox x-model="active">
    <span x-checkbox:label>Terms & Conditions</span>
    <span x-checkbox:description>I accept the terms and conditions of this application.</span>
</div>

A group of checkboxes

<div x-data="{ selectedColors: [] }">
    <div x-checkbox:group x-model="selectedColors">
        <div x-checkbox value="red">
            <span x-checkbox:label>Red</span>
        </div>
        <div x-checkbox value="blue">
            <span x-checkbox:label>Blue</span>
        </div>
        <div x-checkbox value="green">
            <span x-checkbox:label>Green</span>
        </div>
    </div>
</div>

[ekwoka]

So...whats the use of it? What does it help someone actually do over using a normal checkbox?

[gdebrauwer]

If you want to create custom-styled checkboxes.
For example, If you need to implement checkboxes in a design like this:

[SimoTod]

If you want to create custom-styled checkboxes. For example, If you need to implement checkboxes in a design like this:

won't you just do

<label class="...">
  <div>
    <span class="...">Hobby</span>
    <span class="...">$40</span>
  </div>
  <div>
    <span class="...">8 GB ...</span>
    <span class="...">/mo</span>
  </div>
  <input type="checkbox" style="visibility: hidden; position: absolute" />
</label>

? You don't really need javascript for something that easy.

That being said Headless UI has it so I guess Alpine UI should have it if the goal is feature parity.

[ekwoka]

won't you just do

Probably want the checkbox as the first child, so that you can do the peer selectors input:checked ~ div