Radio Button
The Radio Button Filter component allows users to filter data by selecting a single option from a set of predefined values. Unlike checkboxes or combo boxes, only one option can be active at a time, making it ideal for mutually exclusive selections.
Radio Buttons can be displayed horizontally or vertically, styled with custom colors, spacing, and typography, and linked to global variables for dynamic updates across associated charts and dashboards.
Best Situations to Use Radio Button
Use a Radio Button Filter when you need to:
Restrict users to selecting one option only from a group.
Provide clear, side-by-side options for categorical choices.
Enhance usability by avoiding dropdowns in scenarios with short lists of values.
Trigger dynamic updates in charts or tables based on a single selected value.
Example use cases:
Selecting time range: Today, This Week, This Month.
Switching between chart views: Sales, Revenue, Profit.
Choosing yes/no or true/false inputs for filtering dashboards.
Properties of the Radio Button Filter
General
Component Name
Assigns a unique identifier for the component.
Left, Top
Sets the position of the radio button group on the canvas.
Height, Width
Defines the component dimensions.
Initial Visibility
Determines whether the component appears in the first preview.
View Type
Sets display style (e.g., Enhanced Button).
Font (Color, Size, Style, Weight, Family)
Customizes the typography of labels.
Spacing
Adjusts the space between radio buttons.
Border Radius
Rounds button corners for softer styling.
Selection Color
Defines the highlight color of the selected option.
Chrome Color
Sets the background color for buttons, with adjustable transparency.
Button Color
Specifies the fill color of the radio button.
Circle Color
Defines the color of the inner circle marker.
Circle Size
Adjusts the size of the selection circle.
Button Top Spacing
Adds space above the button for layout balance.
Opacity
Controls the component’s transparency.
Orientation
Switches layout between horizontal or vertical.
Selected Index
Specifies the option pre-selected when loaded.
Auto Update GV
Updates linked global variables automatically when a value changes.
Notify GV Update
Notifies the system to update global variables upon selection.
Background
Shadow
Toggles shadow effect for depth and focus.
Shadow Color
Sets the color of the shadow.
Shadow Transparency
Adjusts the intensity of the shadow effect.
Variants
By changing properties, the Radio Button Filter can be customized into variants such as:
Horizontal Layout – aligned options for quick comparisons.
Vertical Layout – stacked options for readability.
Enhanced Button Style – styled with bold colors, rounded corners, and hover effects.
Notes
Best for short lists of mutually exclusive values (2–6 options).
Use Orientation wisely: horizontal for compact designs, vertical for clarity.
Ensure Selection Color and Circle Color provide sufficient contrast for accessibility.