Radio (size="small", density="functional") checked state barely visible compared to Figma #6317
Description
Which generators are affected?
- All
- HTML
- React
- Angular
- Vue
- Web components
- Power Apps
Reproduction case
Use a Radio component with the following configuration:
- size="small"
- data-density="functional"
When the radio button is toggled between checked and unchecked, the visual difference between the two states is barely noticeable in the implementation.
In the Figma design, the inner fill / border proportions are larger, making the checked state clearly visible even at the small size (16px).
Screenshots comparing Figma and the implemented component are attached.
Expected Behaviour
The visual appearance of the radio button should match the Figma design.
Specifically:
- The checked indicator (inner fill) should be more prominent at
size="small"so the difference between checked and unchecked is clearly visible. - The proportions of the inner fill and border should align with the Figma component specification.
Screenshots
Figma
^^ This is checked!
Browser version
Edge
Add any other context about the problem here.
No response
Which DB business unit do you work for?
DB Systel GmbH (please name your customer below)
”DB Systel” please enter your customer / ”other” please enter your area or business unit.
InfraGO
What project are you working on?
CTMS