[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

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