[Carbon components]: Checkbox implementation differs from figma

[korgan00]

Package

@carbon/react

Browser

No response

Package version

1.37

React version

No response

Description

Reference issue for web-components: carbon-design-system/carbon-for-ibm-dotcom#10910

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

Reproduction/example

https://react.carbondesignsystem.com/?path=/docs/components-checkbox--overview

Steps to reproduce

Use it

Suggested Severity

Severity 3 = User can complete task, and/or has a workaround within the user experience of a given component.

Application/PAL

IBM Quantum Learning

Code of Conduct

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

[tw15egan]

Is there a specific layout issue this is causing? cc @carbon-design-system/design can you confirm what changes need to be made to the React implementation

[korgan00]

I have to create a multiple choice question that can be single answer (radio) or multiple answer (checkbox). I spent more time than expected trying to make them look the same because of this issue. Most of the implementation looks like patches on one side or the other.
There is a workaround as I suggested in the severity, but I think that the Design document and the implementation should look the same to prevent incoherences.
I forgot to create a link to the figma design

[tw15egan]

Closing in favor of #14628