Long checkbox labels

[grahamford]

Is there a way to force the label for a checkbox to wrap so that it fits within its containing box?

I can't seem to override this style

::slotted(label) {
    white-space: nowrap;
}

I've created a small demo of the problem here https://stackblitz.com/edit/long-checkbox-label

[hippee-lee]

Hi Graham, I think this can be done with application of css directly to the label itself. Apply the (white-space: pre-wrap) style to the label and that will make it behave like a textarea:

<cds-checkbox>
  <label style="inline-size: 100px; white-space: pre-wrap;">A long label that will wrap</label>
  <input type="checkbox" />
</cds-checkbox>

Here is a fork of your demo.

[grahamford]

That seems so simply Matt, I thought I'd tried all the obvious methods but I was probably over-specific with my style rules. I feel bad about asking the question now 🙄

Thanks for replying so quickly 👍

[hippee-lee]

Haha, no worries. That is what Discussions are for 🙂