Form Render for CheckBox/RadioButton

2025/09/09 9:04 PM

The Form builder renders all input controls with the form-control bootstrap class. The results for check boxes and radio buttons extends the input field to the extents of the column. Are there plans to use the form-check-input class instead? While it's not difficult to override bootstrap styles, it would be beneficial for them to follow that pattern.

Environment

Tags:
Form Builder C# HTML

Answers

2025/09/09 9:33 PM

We have some planned updates for the Form Builder, but most are focused on usability and quality of life improvements for marketers vs rendering/architecture changes for developers.

In the future we'd like to change how the Form Builder rendering architecture works and give a lot more control (and ownership) to developers and designers, but we don't have any specific plans for this on the roadmap at the moment. If you'd like us to prioritize Form Builder improvements, give us some feedback on the roadmap and describe your pain-points, and use-case scenarios.

For now you can use the supported configuration tools to customize the Form Builder rendering, or you can try some completely unsupported (read: you might experience breaking changes) approaches to customizing the Form Builder like in the Kentico Community Portal.

2025/09/10 1:30 PM
Accepted answer

Thanks Sean! I found a temporary answer almost a few minutes after I posted. Additionally, regarding the radio/checkbox lists, the top level "label" should be a "legend" element for ARIA/ADA markup.

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/radio_role

Now, about marketing and multi-cultural forms...

private static void AddFieldSpecificMarkup(GetFormFieldRenderingConfigurationEventArgs e)
{
    // Sets a custom CSS class for the wrapping element of 'TextAreaComponent' type form fields
    if (e.FormComponent is TextAreaComponent)
    {
        if (e.Configuration.RootConfiguration.HtmlAttributes.ContainsKey("class"))
        {
            e.Configuration.RootConfiguration.HtmlAttributes["class"] += " text-area-styles";
        }
        else
        {
            e.Configuration.RootConfiguration.HtmlAttributes["class"] = "text-area-styles";
        }
    }
    if (e.FormComponent is RadioButtonsComponent || e.FormComponent is CheckBoxComponent)
    {
        e.Configuration.EditorHtmlAttributes["class"] = "form-check-input";
    }
}

To response this discussion, you have to login first.