0

This is what I see:

enter image description here

This is the HTML code:

<div class="slds-grid">
    <div class="slds-col slds-size_1-of-12">
        <lightning-checkbox-group
            name="newusedcheckboxgroup"
            label="Welke artikelen?"
            options={newUsedOptions}
            value={newUsedChoices}
            variant="label-stacked">
        </lightning-checkbox-group>
    </div>
    <div class="slds-col slds-size_1-of-12">
        <lightning-combobox
            name="artikelzoekoptie"
            label={label.artikelZoekOptie}
            value={searchOption}
            onchange={handleSearchOptionChange}
            options={searchOptions}>
        </lightning-combobox>
    </div>
    ...
</div>

So for some reason, a lightning-combobox has a normal label and a lightning-checkbox-group has a bold label. I want to use a normal label, how can I do that? I tried applying CSS classes, but that only affected the checkbox option labels, not the top label.

There is also a label-hidden option, but that causes a vertical misalignment with the combobox on the right.

1

1 Answer 1

3

Since there are no styling hooks for that label, you could just hide it via variant="label-hidden" and add your own label tag before the lightning-checkbox-group:

<div class="slds-col slds-size_1-of-12 slds-var-p-top_xx-small">
    <label>Welke artikelen?</label>
    <lightning-checkbox-group
        name="newusedcheckboxgroup"
        label="Welke artikelen?"
        options={newUsedOptions}
        value={newUsedChoices}
        variant="label-hidden">
    </lightning-checkbox-group>
</div>

Then a bit of css to make it look like a standard slds label

label {
    color: rgb(62, 62, 60);
    font-size: 0.75rem;
    margin-bottom: 0.125rem;
}

Demo

1
  • 1
    Shame that it has to be done using a CSS hack, but it does the trick. Thank you! Dec 2, 2022 at 15:46

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .