# \[BUG\] sp-checkbox does not support multiline labels

**URL:** <https://forums.creativeclouddeveloper.com/t/bug-sp-checkbox-does-not-support-multiline-labels/10432>\
**Category:** UXP Plugin API\
**Tags:** ui, bug, uxp, javascript, css\
**Created:** [March 23, 2025, 8:14pm UTC](https://forums.creativeclouddeveloper.com/t/bug-sp-checkbox-does-not-support-multiline-labels/10432 "2025-03-23T20:14:32Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Karmalakas](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/karmalakas/32/1048_2.png) [@Karmalakas](https://forums.creativeclouddeveloper.com/u/Karmalakas)\
**Post date:** [March 23, 2025, 8:14pm UTC](https://forums.creativeclouddeveloper.com/t/bug-sp-checkbox-does-not-support-multiline-labels/10432/1 "2025-03-23T20:14:32Z")

</div>

In UDT playground, whatever I try, I can’t make checkbox label to cut to new line if it doesn’t fit to the container width.

HTML

```html
<!DOCTYPE html>
<html>
  <head><script src="main.js"></script></head>
  <body>
    <sp-body>
      <form>
        <div>
          <sp-checkbox>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
          </sp-checkbox>
        </div>
        <div>
          <sp-checkbox>
            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
          </sp-checkbox>
        </div>
      </form>
    </sp-body>
  </body>
</html>

```

JS

```js
const { entrypoints } = require("uxp")

 entrypoints.setup({
    panels: {
        "vanilla": {
            menuItems: [],
            show: () => {},
        }
    }
})

```

Manifest

```json
{
    "id": "com.adobe.example.vanilla-ps-js",
    "name": "Starter Panel",
    "version": "1.0.0",
    "main": "index.html",
    "host": {
        "app": "PS",
        "minVersion": "23.0.0",
        "data": {
            "apiVersion": 2
        }
    },
    "manifestVersion": 5,
    "entrypoints": [
        {
            "type": "panel",
            "id": "vanilla",
            "minimumSize": {"width": 500, "height": 200},
            "maximumSize": {"width": 2000, "height": 2000},
            "preferredDockedSize": {"width": 500, "height": 300},
            "preferredFloatingSize": {"width": 500, "height": 300},
            "icons": [
                { "width": 32, "height": 32, "path": "icons/icon_D.png", "scale": [1, 2], "theme": ["dark", "darkest"], "species": ["generic"] },
                { "width": 32, "height": 32, "path": "icons/icon_N.png", "scale": [1, 2], "theme": ["lightest", "light"], "species": ["generic"] }
            ],
            "label": {"default": "Starter Panel"}
        }
    ],
    "icons": [
        {
            "width": 23, "height": 23, "path": "icons/dark.png", "scale": [1, 2],
            "theme": ["darkest", "dark", "medium"]
        }, {
            "width": 23, "height": 23, "path": "icons/light.png", "scale": [1, 2],
            "theme": ["lightest", "light"]
        }
    ]
}

```

Result

 ![image](https://us1.discourse-cdn.com/flex015/uploads/xdplugins/original/2X/3/3ae7768e85cbdb9e35d29ef6a73ed22e24346b37.png)

However, in my plugin, I managed for label to drop to new line with:

```css
sp-checkbox {white-space: normal;}

```

But then it doesn’t expand and simply overlays on top of the next element

 ![image](https://us1.discourse-cdn.com/flex015/uploads/xdplugins/original/2X/1/14b4dd840c94ea478b31a6482df8d4a0109a8e65.png)

---

<div class="post-metadata">

**Author:** ![Karmalakas](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/karmalakas/32/1048_2.png) [@Karmalakas](https://forums.creativeclouddeveloper.com/u/Karmalakas)\
**Post date:** [March 23, 2025, 8:51pm UTC](https://forums.creativeclouddeveloper.com/t/bug-sp-checkbox-does-not-support-multiline-labels/10432/2 "2025-03-23T20:51:08Z")

</div>

It seems

```css
sp-checkbox {
  white-space: normal;
  height: auto;
}

```

does the trick, but then there’s another issue with non-resizeable dialogs… ☹