Radio button list
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;
}