Radio button list

Content Type: Widget
Categories: User Interface,Visualization

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;

}

 

Releases

Version: 1.0.0
Framework Version: 10.18.0
Release Notes: Initial version