[Feature Request]: More customization for checkbox for UI5 WebComponent-React (and radio button split into different request 12688)

Feature Request Description

Hello,

Our customers build pixel-perfect widgets on our canvas, and these widgets already have fixed, carefully tuned sizes, borders, and visual styles. When we switch our existing controls to UI5 Web Components, the CheckBox and RadioButton must match the current appearance exactly so the customer’s widget layout does not change. However, many of the UI5 properties that affect the visual appearance—such as the inner box size, border thickness, padding, and the checkbox /radiobutton inner icon—are controlled by internal, version-specific variables that are not publicly supported. When these values cannot be reliably matched, even small differences in padding, ring size, or border styling can push content out of alignment or cause wrapping inside the customer’s already-built widget. To ensure that switching to UI5 Web Components does not break existing layouts, we need the CheckBox and RadioButton to expose their sizing, border, and inner-icon styling as public, stable CSS variables or CSS shadow parts.

Today, achieving this customization requires overriding several private, version-specific internal CSS variables such as:

1. --_ui5-v1-24-13_checkbox_inner_width_height (can height/width be styled independently?)
2. --_ui5-v1-24-13_checkbox_width_height
3. --_ui5-v1-24-13_checkbox_checkmark_color
4. --_ui5-v1-24-13_checkbox_inner_border
5. --_ui5-v1-24-13_checkbox_inner_selected_border_color
   6. --_ui5-v1-24-13_radio_button_inner_size
   7. --_ui5-v1-24-13_radio_button_height
   8. --_ui5-v1-24-13_radio_button_svg_size
   9. --_ui5-v1-24-13_radio_button_outer_ring_padding

Proposed Solution

To make the transition to UI5 Web Components smooth and keep our customers’ widgets looking exactly the same, it would really help if the CheckBox and RadioButton exposed public, stable CSS variables or CSS shadow parts for the key visual pieces of the components. Being able to adjust the following in a supported way would cover all of our needs:

• the overall control size
• the size of the inner box (expose .ui5-checkbox-inner, right now in V2 only root, label and icon is exposed )
  or radio ring
• border width and border color
• the checkmark or radio-dot color
• any padding or spacing that affects the layout
• the size of the checkmark or radio SVG

Right now, these values are controlled by internal variables that change with each version, and some of them are difficult to override. Having official, documented CSS properties or parts for these areas would make it much easier for us to match our existing designs.

thank you in advance

Proposed Alternatives

No response

Organization

SAP

Additional Context

No response

Priority

High

Privacy Policy

• I’m not disclosing any internal or sensitive information.