topic Re: Calcite label not vertically aligned when using with checkbox in Calcite Design System Questions

Calcite label not vertically aligned when using with checkbox

EricErtl — Mon, 27 Oct 2025 19:39:55 GMT

I am using a Calcite label with a Calcite checkbox and when combined in a div with a button they do not vertically align (this is within the footer of a Calcite dialog). I essentially want the div with the button and label to align with the align-items class but they do not. I included some code and screenshot of the inspection of the label.

Appreciate the help in advance!

<div slot="footer-end" className="flex items-center space-x-4"> <calcite-label layout="inline"> <calcite-checkbox checked={dontShowAgain} onChange={(e) => setDontShowAgain(e.target.checked)} ></calcite-checkbox> Don't show this again </calcite-label> <calcite-button onClick={handleClose}>Close</calcite-button> </div>

Re: Calcite label not vertically aligned when using with checkbox

KittyHurley — Tue, 28 Oct 2025 17:06:06 GMT

@EricErtl This looks to be a result of trying to fit in the Label/Checkbox and Button into the same slot. Can you add the different functionalities to their own slots, such as "footer-start" and "footer-end"?

<div slot="footer-start"> <calcite-label layout="inline"> <calcite-checkbox></calcite-checkbox> Don't show this dialog again </calcite-label> </div> <calcite-button slot="footer-end">Close</calcite-button>

Re: Calcite label not vertically aligned when using with checkbox

EricErtl — Tue, 28 Oct 2025 17:38:47 GMT

Hi @KittyHurley. Thank you for the response! Unfortunately that didn't seem to change the behavior. I tried using just the label and button with slots and also included the label in a div with a slot. Both had the same result.

<div slot="footer-start"> <calcite-label layout="inline"> <calcite-checkbox checked={dontShowAgain} oncalciteCheckboxChange={handleCheckboxChange} ></calcite-checkbox> Don't show this again </calcite-label> </div> <calcite-button slot="footer-end" onClick={handleClose}> Close </calcite-button>

Also just the calcite components...

<calcite-label slot="footer-start" layout="inline"> <calcite-checkbox checked={dontShowAgain} oncalciteCheckboxChange={handleCheckboxChange} ></calcite-checkbox> Don't show this again </calcite-label>

Re: Calcite label not vertically aligned when using with checkbox

KittyHurley — Tue, 28 Oct 2025 17:43:31 GMT

Can you share an isolated case via Codepen? Wondering if there is some conflicting CSS that may be causing the issue. Here are a few templates:

Codepen
Stackblitz (React)
JS Bin (with Maps SDK for JS)

Re: Calcite label not vertically aligned when using with checkbox

EricErtl — Tue, 28 Oct 2025 18:59:00 GMT

I cannot upload my code but I did create a pen showing the issue using the footer-start and footer-end for the label and button respectively.

Re: Calcite label not vertically aligned when using with checkbox

KittyHurley — Tue, 28 Oct 2025 19:38:02 GMT

Thanks for the above example! To accommodate with Label and Switch you can use Label's "--calcite-label-margin-bottom" CSS variable: