sveltestrap
sveltestrap copied to clipboard
Undesirable behavior of label for checkbox
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:
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 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.