Overview

The RadiobuttonList widget is a customizable widget that displays a reference as a grouped radio button list. It provides a user-friendly way to select a single value from a list of options, with support for both horizontal and vertical layouts.

Documentation

RadiobuttonList

The RadiobuttonList is a Mendix pluggable widget designed for Mendix web applications, enabling the creation of reference selections as an intuitive radio button list. This widget enhances web form interactions by providing a clear, accessible way to select single options from a list.

Features:

• Dynamic Option Rendering: Displays reference options as radio buttons with customizable labels
• Flexible Layouts: Supports both horizontal and vertical arrangements
• Customizable Styling: Comprehensive CSS variable system for easy styling
• Accessibility Support: Built with ARIA compliance and keyboard navigation
• Validation Integration: Seamlessly integrates with Mendix validation system
• Responsive Design: Adapts to different screen sizes and orientations

Usage:

To use the RadiobuttonList widget in your Mendix app:

• Download the widget from the Mendix Marketplace and add it to your project
• In Mendix Studio Pro, navigate to the page where you want to add the radio button list
• Drag and drop the RadiobuttonList widget onto your page
• Configure the widget properties and styling
• Run your app to see the RadiobuttonList in action

Styling:

The widget uses CSS custom properties for easy styling customization you can easily override this in your theme:

.widget-radiobuttonlist {   

--radiobutton-size: 16px;

--radiobutton-color: #264ae5;

--radiobutton-border-color: #8b8b8b;

--radiobutton-background: white;

--radiobutton-hover-color: #0f2db3;

--radiobutton-focus-color: #264ae5;

--radiobutton-focus-width: 2px;

--radiobutton-focus-offset: 2px;

--radiobutton-disabled-opacity: 0.6;

--radiobutton-disabled-background: #f5f5f5;

--radiobutton-gap: 8px;

--radiobutton-list-gap: 8px;

--radiobutton-horizontal-gap: 16px;

}