[Feature Request]: More customization for radio button

[plamenivanov91]

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 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 theradiobutton 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 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:

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 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 or radio ring
• border width and border color
• the radio-dot color
• any padding or spacing that affects the layout
• the size of the 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.

[plamenivanov91]

Hello @UI5/ui5-team-ctr-rod , take a look of this feature request.

Original issue #12678

Regards,
Plamen Ivanov

[dimovpetar]

Hello @jackydev1,

Please provide an example that illustrates what you are trying to achieve with the radio button. This will bring clarification on what exactly we need to provide. The radio button component already provides inner-ring and outer-ring parts. See them in action here https://ui5.github.io/webcomponents/play/#gist=6e1e99822a250aa826fff7b1baa4685b.

Best regards,
Petar

[jackydev1]

Hi @dimovpetar,

Thank you very much for the reply. I see your import is from ui5 webcomponent and not from '@ui5/webcomponents-react/RadioButton';

We are using ui5 webcomponent react

Sorry for the confusion. If you look here: https://ui5.github.io/webcomponents-react/v2/?path=/docs/inputs-radiobutton--docs
you can see that the inner ring and outer ring are exposed, but there is additional padding around the button, and the height/width of the control cannot be directly overridden. This makes the overall radio button larger than the outer ring itself.

regards,
Jacky

[dimovpetar]

Hello @jackydev1 ,

Is the issue that radio button alone (without text) size is 46x44 px, not 44x44px as expected?
Also, are you aware that there is compact density, which makes the radio button size 32x32px?

Best regards,
Petar

[jackydev1]

Hi @dimovpetar,

This is issue with text and no text. The actual size of the radio-svg is 22x22. We would like that the over all size to be 22x22. This way if we need padding we can add our own.

regard,
Jacky