sveltestrap icon indicating copy to clipboard operation
sveltestrap copied to clipboard

Undesirable behavior of label for checkbox

Open Hejtmus opened this issue 2 years ago • 0 comments

Hello sveltestrap team,

I have to praise you :D sveltestrap is my favorite UI library.

Problem and reproduction

I needed to place some markup inside of label for checkbox, so I looked up documentation, but there was only example with label as <Input/> prop. So I thought I could do something like this:

<FormGroup check> <!-- Yes, I tried inline, .... -->
    <Input bind:checked={privacyPolicyAgreement} id="privacyPolicyAgreement" type="checkbox" required/>
    <Label check for="privacyPolicyAgreement">
        Lorem Ipsum .....
    </Label>
</FormGroup>

But that resulted in this:

line brak after checkbox

Then I compared how markup of this component should look acording to official TWBS documentation and what it actually is.

Docs:

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
  <label class="form-check-label" for="defaultCheck1">
    Default checkbox
  </label>
</div>

What sveltestrap produced:

sveltestrap product

Sveltestrap wrapped checkbox input inside of another div with class "form-check" which makes checkbox label display on another line.

My solution

In order to achieve desired behavior I stared digging through sveltestrap code and found out that something like this could work:

<FormGroup check>
    <FormCheck bind:checked={privacyPolicyAgreement} id="privacyPolicyAgreement" type="checkbox" required label>
        <p slot="label">
            Lorem Ipsum <a href="linkToPP">privacy policy</a>
        </p>
    </FormCheck>
</FormGroup>

Well it did the trick, but this solution is quite unintuitive and more time consuming than regular sveltestrap experience. I think that sveltestrap should allow to do something like I mentioned in first code snipped. I know that maintaining package like this is a lot of time, so if is needed I'm willing to make PR to fix this.

Best regards, Filip.

Hejtmus avatar Jul 17 '22 12:07 Hejtmus