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

[jackydev1]

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

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

[ilhan007]

Hello @jackydev1,

May I confirm whether your feature request is intended for v1.24 (based on the variables listed, --ui5-v1-24-13)? Unfortunately, version 1 is considered legacy and is no longer maintained - we are not providing fixes (except in truly exceptional circumstances, security issues, etc.), while new feature requests are not discussed at all.

[jackydev1]

Hi @ilhan007, Thanks for the reply. No I am not expecting this to be added to v1. We are going to work around it for now, and hoping it can be updated in V2. thank you, Jacky

[plamenivanov91]

Hello @UI5/ui5-team-ctr-pir , take a look of this feature request for the CheckBox.

I've created a separate issue for the Radio Button https://github.com/UI5/webcomponents/issues/12688

Regards, Plamen Ivanov