NF: Radio button and Checkbox working.

-Tutorial provided for the same.
-New icons for checkbox and radio button are incorporated for different states.

Author: maharshi-gor

docs/examples/viz_checkbox_radiobutton.py

@@ -0,0 +1,96 @@
+"""
+==============================
+Checkbox and RadioButton in UI
+==============================
+
+This example shows how to use the Checkbox and RadioButton UI elements in FURY.
+
+Both group a small toggle button with a text label for each option and can be
+laid out ``"vertical"`` (stacked) or ``"horizontal"`` (side by side):
+
+* A **Checkbox** lets any number of options be checked at the same time.
+* A **RadioButton** is mutually exclusive: exactly one option is selected, and
+  choosing one clears the previous choice.
+
+Here a vertical checkbox toggles the visibility of three colored spheres, and a
+horizontal radio button selects the size shared by all of them.
+"""
+
+from fury import actor, ui, window
+
+###############################################################################
+# 1. Initialize the FURY Scene
+scene = window.Scene()
+
+###############################################################################
+# 2. Create three colored sphere actors
+# We keep them in a dictionary keyed by the same labels we will use for the
+# checkbox options.
+colors = {
+    "Red": (1, 0, 0),
+    "Green": (0, 1, 0),
+    "Blue": (0, 0, 1),
+}
+spheres = {}
+for i, (name, color) in enumerate(colors.items()):
+    spheres[name] = actor.sphere(centers=[[i * 3 - 3, 0, 0]], colors=color, radii=1.0)
+    scene.add(spheres[name])
+
+###############################################################################
+# 3. A vertical Checkbox to toggle sphere visibility
+# All three options start checked, so every sphere is visible initially. Any
+# combination of options can be checked at once.
+checkbox = ui.Checkbox(
+    labels=["Red", "Green", "Blue"],
+    checked_labels=["Red", "Green", "Blue"],
+    orientation="vertical",
+    position=(40, 320),
+    font_size=20,
+)
+
+
+def toggle_spheres(checkbox_ui):
+    for name in colors:
+        spheres[name].visible = name in checkbox_ui.checked_labels
+
+
+checkbox.on_change = toggle_spheres
+
+###############################################################################
+# 4. A horizontal RadioButton to choose the size
+# Only one option can be selected at a time. The only difference from the
+# checkbox layout is ``orientation="horizontal"``, which lays the options out
+# side by side instead of stacked.
+size_dict = {
+    "Small": 0.5,
+    "Medium": 1.0,
+    "Large": 1.6,
+}
+size_radio = ui.RadioButton(
+    labels=["Small", "Medium", "Large"],
+    checked_labels=["Medium"],
+    orientation="horizontal",
+    position=(40, 40),
+    font_size=20,
+)
+
+
+def change_size(radio_ui):
+    scale = size_dict[radio_ui.checked_labels[0]]
+    for sphere in spheres.values():
+        sphere.local.scale = (scale, scale, scale)
+
+
+size_radio.on_change = change_size
+
+###############################################################################
+# 5. Add both UI elements to the scene
+scene.add(checkbox)
+scene.add(size_radio)
+
+###############################################################################
+# 6. Setup the ShowManager and start the event loop
+showm = window.ShowManager(
+    scene=scene, size=(800, 600), title="Checkbox and RadioButton Example"
+)
+showm.start()

fury/data/fetcher.py

@@ -523,6 +523,12 @@ def fetch_gltf(*, name=None, mode="glTF"):
         "resize.png",
         "selection-pressed.png",
         "selection.png",
+        "checkbox.png",
+        "checkbox-selected.png",
+        "checkbox-pressed.png",
+        "checkbox-pressed-selected.png",
+        "circle-selected.png",
+        "circle-pressed-selected.png",
     ],
     [
         "circle-pressed.png",
@@ -541,6 +547,12 @@ def fetch_gltf(*, name=None, mode="glTF"):
         "resize.png",
         "selection-pressed.png",
         "selection.png",
+        "checkbox.png",
+        "checkbox-selected.png",
+        "checkbox-pressed.png",
+        "checkbox-pressed-selected.png",
+        "circle-selected.png",
+        "circle-pressed-selected.png",
     ],
     sha_list=[
         "CD859F244DF1BA719C65C869C3FAF6B8563ABF82F457730ADBFBD7CA72DDB7BC",
@@ -559,6 +571,12 @@ def fetch_gltf(*, name=None, mode="glTF"):
         "A2D850CDBA8F332DA9CD7B7C9459CBDA587C18AF0D3C12CA68D6E6A864EF54BB",
         "54618FDC4589F0A039D531C07A110ED9BC57A256BB15A3B5429CF60E950887C3",
         "CD573F5E4BF4A91A3B21F6124A95FFB3C036F926F8FEC1FD0180F5D27D8F48C0",
+        "E6F755AC6808AE5FA36E1AFBBF9697D678CF38B4C3D1A60CF80A9F2185B8BC12",
+        "D56ED6C2120E1DEE73DDCF9D4E3BC6B6197D8AF3379A96EF69A971B617DEE3BE",
+        "3C0B5295645A832085CF24F2974BAAABF0162F07596BA631C7830E58D6C7043B",
+        "78D1E7FAD2C48D9BAC04A14B0064F9E798EF046DDF4EFE0FD77E5A5F89A414A5",
+        "440FB425205FB2ACD4B18780EC167E8B2469284BB51DF5D0298284FFC56A791F",
+        "09F1C25FBA15673C63288F2814490CFBA48D97598640836E44D2F9965B273167",
     ],
     doc="Download the new icons for DrawPanel",
 )

fury/ui/__init__.pyi

@@ -15,9 +15,9 @@ __all__ = [
     "LineDoubleSlider2D",
     "RingSlider2D",
     "RangeSlider",
-    #     "Checkbox",
+    "Checkbox",
     #     "Option",
-    #     "RadioButton",
+    "RadioButton",
     "ComboBox2D",
     "ListBox2D",
     "ListBoxItem2D",
@@ -51,12 +51,14 @@ from .context import UIContext
 from .core import UI, Anchor, Disk2D, Rectangle2D, TextBlock2D
 from .elements import (
     Card2D,
+    Checkbox,
     ComboBox2D,
     LineDoubleSlider2D,
     LineSlider2D,
     ListBox2D,
     ListBoxItem2D,
     PlaybackPanel,
+    RadioButton,
     RangeSlider,
     RingSlider2D,
     TextBox2D,

fury/ui/core.py

@@ -1771,11 +1771,14 @@ def resolve_state_key(self, available_keys):
         """
         Determine the current visual state key based on priority.
 
-        The priority order is:
-        1. 'disabled' (if not enabled)
-        2. 'pressed' (if is_pressed or toggled is True)
-        3. 'hover' (if is_hovered)
-        4. 'default'
+        Two schemes are supported, chosen by the keys the subclass provides:
+
+        * One-dimensional (default): ``'disabled'`` > ``'pressed'`` (when
+          ``is_pressed`` or ``toggled``) > ``'hover'`` > ``'default'``.
+        * Two-dimensional toggle icons: when a ``'selected'`` key is present,
+          the selected dimension (``toggled``) is combined with interaction
+          feedback, yielding ``'default'``, ``'selected'``, ``'pressed'`` or
+          ``'pressed-selected'``. This suits checkbox/radio state icons.
 
         Parameters
         ----------
@@ -1790,6 +1793,16 @@ def resolve_state_key(self, available_keys):
         if not self.enabled:
             return "disabled" if "disabled" in available_keys else "default"
 
+        # Two-dimensional toggle icons: selected state x interaction feedback.
+        if "selected" in available_keys:
+            selected = self.is_toggle and self.toggled
+            active = self.is_pressed or self.is_hovered
+            if active and selected and "pressed-selected" in available_keys:
+                return "pressed-selected"
+            if active and not selected and "pressed" in available_keys:
+                return "pressed"
+            return "selected" if selected else "default"
+
         is_active = self.is_pressed or (self.is_toggle and self.toggled)
 
         if is_active and "pressed" in available_keys: