[Web-components] Checkbox implementation differs from figma

[korgan00]

Description

I was trying to implement a form using radio buttons and checkboxes and I saw that they are so different between them and looking at the Figma file, I saw some differences between the implementation and the Figma library.

Element	Figma	Implementation
Padding between label-text and checkbox	8px (0.5rem)	6px (0.375rem)
Checkbox margins	all: 0.125rem	left: 0.1875rem the rest: 0.125rem
tag	none (the min-height can be inferred if the checkbox is not absolute)	min-height: 1.5rem; padding-top: 0.1875rem; padding-left: 1.25rem;
host margin-bottom	none	0.25rem
screen capture

Component(s) impacted

Checkbox

Browser

No response

Carbon for IBM.com version

v2.0.1

Severity

Severity 3 = The problem is visible or noticeable to users but does not impede the usability or functionality. Affects minor functionality, has a workaround.

Application/website

IBM Quantum Learning

Package

@carbon/web-components

CodeSandbox example

https://web-components.carbondesignsystem.com/?path=/story/components-checkbox--default

Steps to reproduce the issue (if applicable)

No response

Release date (if applicable)

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate issues

[RichKummer]

Hey @korgan00 , same thing as #10911. Can you create this ticket in the carbon react repo?

[korgan00]

Looking at the react implementation, the differences in web-components are bigger. I think it is related to box-sizing.

[abdonrd]

Fixed here: carbon-design-system/carbon#14628

So updating the version should solve it here.