From f032d0aafb7ea51ee02b90ff96568f7190fba5ff Mon Sep 17 00:00:00 2001
From: tevans-3 <tevans3@ualberta.ca>
Date: Sat, 25 Jul 2026 23:52:07 -0600
Subject: [PATCH 1/3] migrated 2d_shapes to use checkboxes

---
 Cargo.toml                   |   1 +
 examples/2d/2d_shapes.rs     | 101 +++++++++++++++++++++++++----------
 examples/helpers/checkbox.rs |  68 +++++++++++++++++++++++
 examples/helpers/theme.rs    |  39 ++++++++++++++
 4 files changed, 181 insertions(+), 28 deletions(-)
 create mode 100644 examples/helpers/checkbox.rs

diff --git a/Cargo.toml b/Cargo.toml
index f0a8133f8c206..3366ca203e579 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -912,6 +912,7 @@ wasm = true
 name = "2d_shapes"
 path = "examples/2d/2d_shapes.rs"
 doc-scrape-examples = true
+required-features = ["bevy_feathers"]
 
 [package.metadata.example.2d_shapes]
 name = "2D Shapes"
diff --git a/examples/2d/2d_shapes.rs b/examples/2d/2d_shapes.rs
index 844c7778eceb2..b4f49592088e7 100644
--- a/examples/2d/2d_shapes.rs
+++ b/examples/2d/2d_shapes.rs
@@ -13,30 +13,48 @@
 //! You can toggle wireframes with the space bar except on wasm. Wasm does not support
 //! `POLYGON_MODE_LINE` on the gpu.
 
-#[cfg(not(target_arch = "wasm32"))]
+use bevy::prelude::*;
 use bevy::{
-    input::common_conditions::input_just_pressed,
+    feathers::{controls::FeathersCheckbox, theme::UiTheme, FeathersPlugins},
     sprite_render::{Wireframe2dConfig, Wireframe2dPlugin},
+    ui_widgets::{checkbox_self_update, ValueChange},
 };
-use bevy::{input::common_conditions::input_toggle_active, prelude::*};
+use checkbox::{feathers_option_checkbox, main_ui_node_scene};
+
+#[path = "../helpers/checkbox.rs"]
+mod checkbox;
+
+#[path = "../helpers/theme.rs"]
+mod theme;
+
+/// Various settings for the demo.
+#[derive(Resource, Default)]
+struct AppStatus {
+    rotation: bool,
+    wireframe: bool,
+}
+
+#[derive(Clone, Copy, Component, Debug, Default, PartialEq)]
+enum CheckboxInput {
+    #[default]
+    Rotation,
+    Wireframe,
+}
 
 fn main() {
     let mut app = App::new();
     app.add_plugins((
         DefaultPlugins,
+        FeathersPlugins,
         #[cfg(not(target_arch = "wasm32"))]
         Wireframe2dPlugin::default(),
     ))
+    .init_resource::<AppStatus>()
     .add_systems(Startup, setup);
-    #[cfg(not(target_arch = "wasm32"))]
-    app.add_systems(
-        Update,
-        toggle_wireframe.run_if(input_just_pressed(KeyCode::Space)),
-    );
-    app.add_systems(
-        Update,
-        rotate.run_if(input_toggle_active(false, KeyCode::KeyR)),
-    );
+    app.insert_resource(UiTheme(theme::basic_example_theme(Color::WHITE)));
+    app.add_observer(handle_value_change_checkbox);
+    app.add_systems(Update, rotate.run_if(rotate_checkbox_checked));
+    app.add_observer(checkbox_self_update);
     app.run();
 }
 
@@ -142,25 +160,52 @@ fn setup(
             ),
         ));
     }
+    spawn_buttons(&mut commands);
+}
+
+/// Spawns the checkboxes in the bottom left corner of the screen.
+fn spawn_buttons(commands: &mut Commands) {
+    if !cfg!(target_arch = "wasm32") {
+        commands.spawn_scene(bsn! {
+            main_ui_node_scene()
+            Children [
+                feathers_option_checkbox("ROTATE", Some(CheckboxInput::Rotation)),
+                feathers_option_checkbox("WIREFRAME", Some(CheckboxInput::Wireframe)),
+            ]
+        });
+    } else {
+        commands.spawn_scene(bsn! {
+            main_ui_node_scene()
+            Children [
+                feathers_option_checkbox("ROTATE", Some(CheckboxInput::Rotation)),
+            ]
+        });
+    }
+}
 
-    let mut text = "Press 'R' to pause/resume rotation".to_string();
-    #[cfg(not(target_arch = "wasm32"))]
-    text.push_str("\nPress 'Space' to toggle wireframes");
-
-    commands.spawn((
-        Text::new(text),
-        Node {
-            position_type: PositionType::Absolute,
-            top: px(12),
-            left: px(12),
-            ..default()
-        },
-    ));
+fn handle_value_change_checkbox(
+    event: On<ValueChange<bool>>,
+    mut wireframe_config: ResMut<Wireframe2dConfig>,
+    mut app_status: ResMut<AppStatus>,
+    checkbox_input_q: Query<&CheckboxInput, With<FeathersCheckbox>>,
+) {
+    if let Ok(checkbox_input) = checkbox_input_q.get(event.source) {
+        match checkbox_input {
+            CheckboxInput::Rotation => {
+                app_status.rotation = !app_status.rotation;
+            }
+            CheckboxInput::Wireframe => {
+                app_status.wireframe = !app_status.wireframe;
+                if !cfg!(target_arch = "wasm32") {
+                    wireframe_config.global = !wireframe_config.global;
+                }
+            }
+        }
+    }
 }
 
-#[cfg(not(target_arch = "wasm32"))]
-fn toggle_wireframe(mut wireframe_config: ResMut<Wireframe2dConfig>) {
-    wireframe_config.global = !wireframe_config.global;
+fn rotate_checkbox_checked(app_status: Res<AppStatus>) -> bool {
+    app_status.rotation
 }
 
 fn rotate(mut query: Query<&mut Transform, With<Mesh2d>>, time: Res<Time>) {
diff --git a/examples/helpers/checkbox.rs b/examples/helpers/checkbox.rs
new file mode 100644
index 0000000000000..42e5723f2b207
--- /dev/null
+++ b/examples/helpers/checkbox.rs
@@ -0,0 +1,68 @@
+/// Helpers to create an option menu using Feathers Checkboxes.
+/// Using these helpers requires the `bevy_feathers` feature to be enabled.
+use bevy::{
+    feathers::{controls::FeathersCheckbox, display::caption},
+    picking::hover::Hovered,
+    prelude::*,
+    ui_widgets::checkbox_self_update,
+};
+
+/// Returns a [`Node`] appropriate for the outer main UI node as a `Scene`.
+///
+/// This UI is in the bottom left corner and has flex column support
+pub fn main_ui_node_scene() -> impl Scene {
+    bsn! {
+        Node {
+            flex_direction: FlexDirection::Column,
+            position_type: PositionType::Absolute,
+            row_gap: px(6),
+            left: px(10),
+            bottom: px(10),
+        }
+    }
+}
+
+/// Creates a single feathers checkbox that allows configuration of a setting.  
+///
+/// Examples that use this to create a checkbox should handle its `ValueChange<bool>` events.
+/// If there is a need to identify the checkbox that originated the value change,
+/// query which `checkbox_identifier` with the `FeathersCheckbox` is the value change's
+/// source entity.
+pub fn feathers_option_checkbox<T>(
+    option_name: &str,
+    checkbox_identifier: Option<T>,
+) -> Box<dyn Scene>
+where
+    T: Template<Output: Component> + Clone + Default + Send + Sync + Unpin + 'static,
+{
+    if let Some(identifier) = checkbox_identifier {
+        Box::new(bsn! {
+            Node {
+                align_items: AlignItems::Center,
+                column_gap: px(5),
+            }
+            Children [
+                @FeathersCheckbox {
+                    @caption: bsn! { caption(option_name) }
+                }
+                Hovered::default()
+                template_value(identifier)
+                on(checkbox_self_update)
+            ]
+        })
+    } else {
+        Box::new(bsn! {
+            Node {
+                align_items: AlignItems::Center,
+                column_gap: px(5),
+            }
+            Children [
+                @FeathersCheckbox {
+                    @caption: bsn! { caption(option_name) }
+                }
+                Hovered::default()
+                on(checkbox_self_update)
+            ]
+        })
+    }
+}
diff --git a/examples/helpers/theme.rs b/examples/helpers/theme.rs
index 9bd7481d84f25..05c1a0c65d0bc 100644
--- a/examples/helpers/theme.rs
+++ b/examples/helpers/theme.rs
@@ -72,6 +72,45 @@ pub fn basic_example_theme(text_color: Color) -> ThemeProps {
         bevy::feathers::palette::TRANSPARENT,
     );
 
+    // Checkbox tokens
+    color.insert(bevy::feathers::tokens::CHECKBOX_TEXT, text_color);
+    color.insert(bevy::feathers::tokens::CHECKBOX_BG, Color::BLACK);
+    color.insert(bevy::feathers::tokens::CHECKBOX_MARK, Color::WHITE);
+    color.insert(bevy::feathers::tokens::CHECKBOX_BORDER, Color::BLACK);
+    color.insert(
+        bevy::feathers::tokens::CHECKBOX_BORDER_HOVER,
+        bevy::feathers::palette::GRAY_2,
+    );
+    color.insert(
+        bevy::feathers::tokens::CHECKBOX_BORDER_CHECKED_HOVER,
+        bevy::feathers::palette::GRAY_0,
+    );
+    color.insert(
+        bevy::feathers::tokens::CHECKBOX_BORDER_PRESSED,
+        bevy::feathers::palette::GRAY_1,
+    );
+    color.insert(
+        bevy::feathers::tokens::CHECKBOX_BORDER_CHECKED_PRESSED,
+        bevy::feathers::palette::GRAY_1,
+    );
+    color.insert(
+        bevy::feathers::tokens::CHECKBOX_BORDER_CHECKED,
+        Color::BLACK,
+    );
+    color.insert(
+        bevy::feathers::tokens::CHECKBOX_BG_HOVER,
+        bevy::feathers::palette::GRAY_0,
+    );
+    color.insert(bevy::feathers::tokens::CHECKBOX_BG_CHECKED, Color::BLACK);
+    color.insert(
+        bevy::feathers::tokens::CHECKBOX_BG_CHECKED_HOVER,
+        Color::BLACK,
+    );
+    color.insert(
+        bevy::feathers::tokens::CHECKBOX_BG_CHECKED_PRESSED,
+        bevy::feathers::palette::GRAY_1,
+    );
+    color.insert(bevy::feathers::tokens::CHECKBOX_BG_PRESSED, Color::BLACK);
     // Main text color
     color.insert(bevy::feathers::tokens::TEXT_MAIN, text_color);
     ThemeProps { color }

From af24eb0a8a8bce6afd9f91d4e327e0fc919535d3 Mon Sep 17 00:00:00 2001
From: tevans-3 <tevans3@ualberta.ca>
Date: Sun, 26 Jul 2026 17:03:05 -0600
Subject: [PATCH 2/3] addressed comments

---
 examples/2d/2d_shapes.rs     | 27 +++++++++++++++------------
 examples/helpers/checkbox.rs | 15 ---------------
 examples/helpers/scene.rs    | 32 ++++++++++++++++++++++++++++++++
 3 files changed, 47 insertions(+), 27 deletions(-)
 create mode 100644 examples/helpers/scene.rs

diff --git a/examples/2d/2d_shapes.rs b/examples/2d/2d_shapes.rs
index b4f49592088e7..6c94f0bec1854 100644
--- a/examples/2d/2d_shapes.rs
+++ b/examples/2d/2d_shapes.rs
@@ -1,5 +1,4 @@
 //! Here we use shape primitives to build meshes in a 2D rendering context, making each mesh a certain color by giving that mesh's entity a material based off a [`Color`].
-//!
 //! Meshes are better known for their use in 3D rendering, but we can use them in a 2D context too. Without a third dimension, the meshes we're building are flat – like paper on a table. These are still very useful for "vector-style" graphics, picking behavior, or as a foundation to build off of for where to apply a shader.
 //!
 //! A "shape definition" is not a mesh on its own. A circle can be defined with a radius, i.e. [`Circle::new(50.0)`][Circle::new], but rendering tends to happen with meshes built out of triangles. So we need to turn shape descriptions into meshes.
@@ -14,12 +13,14 @@
 //! `POLYGON_MODE_LINE` on the gpu.
 
 use bevy::prelude::*;
+#[cfg(not(target_arch = "wasm32"))]
+use bevy::sprite_render::{Wireframe2dConfig, Wireframe2dPlugin};
 use bevy::{
     feathers::{controls::FeathersCheckbox, theme::UiTheme, FeathersPlugins},
-    sprite_render::{Wireframe2dConfig, Wireframe2dPlugin},
     ui_widgets::{checkbox_self_update, ValueChange},
 };
-use checkbox::{feathers_option_checkbox, main_ui_node_scene};
+use checkbox::feathers_option_checkbox;
+use scene::{bottom_left_scene, top_left_scene};
 
 #[path = "../helpers/checkbox.rs"]
 mod checkbox;
@@ -27,11 +28,13 @@ mod checkbox;
 #[path = "../helpers/theme.rs"]
 mod theme;
 
+#[path = "../helpers/scene.rs"]
+mod scene;
+
 /// Various settings for the demo.
 #[derive(Resource, Default)]
 struct AppStatus {
     rotation: bool,
-    wireframe: bool,
 }
 
 #[derive(Clone, Copy, Component, Debug, Default, PartialEq)]
@@ -167,7 +170,7 @@ fn setup(
 fn spawn_buttons(commands: &mut Commands) {
     if !cfg!(target_arch = "wasm32") {
         commands.spawn_scene(bsn! {
-            main_ui_node_scene()
+            bottom_left_scene()
             Children [
                 feathers_option_checkbox("ROTATE", Some(CheckboxInput::Rotation)),
                 feathers_option_checkbox("WIREFRAME", Some(CheckboxInput::Wireframe)),
@@ -175,7 +178,7 @@ fn spawn_buttons(commands: &mut Commands) {
         });
     } else {
         commands.spawn_scene(bsn! {
-            main_ui_node_scene()
+            top_left_scene() // so the user can immediately see the control in browser w/o scrolling
             Children [
                 feathers_option_checkbox("ROTATE", Some(CheckboxInput::Rotation)),
             ]
@@ -185,20 +188,20 @@ fn spawn_buttons(commands: &mut Commands) {
 
 fn handle_value_change_checkbox(
     event: On<ValueChange<bool>>,
-    mut wireframe_config: ResMut<Wireframe2dConfig>,
+    #[cfg(not(target_arch = "wasm32"))] mut wireframe_config: ResMut<Wireframe2dConfig>,
     mut app_status: ResMut<AppStatus>,
     checkbox_input_q: Query<&CheckboxInput, With<FeathersCheckbox>>,
 ) {
     if let Ok(checkbox_input) = checkbox_input_q.get(event.source) {
         match checkbox_input {
             CheckboxInput::Rotation => {
-                app_status.rotation = !app_status.rotation;
+                app_status.rotation = event.value;
             }
+            #[cfg(target_arch = "wasm32")]
+            CheckboxInput::Wireframe => {}
+            #[cfg(not(target_arch = "wasm32"))]
             CheckboxInput::Wireframe => {
-                app_status.wireframe = !app_status.wireframe;
-                if !cfg!(target_arch = "wasm32") {
-                    wireframe_config.global = !wireframe_config.global;
-                }
+                wireframe_config.global = event.value;
             }
         }
     }
diff --git a/examples/helpers/checkbox.rs b/examples/helpers/checkbox.rs
index 42e5723f2b207..1184cd4974c16 100644
--- a/examples/helpers/checkbox.rs
+++ b/examples/helpers/checkbox.rs
@@ -7,21 +7,6 @@ use bevy::{
     ui_widgets::checkbox_self_update,
 };
 
-/// Returns a [`Node`] appropriate for the outer main UI node as a `Scene`.
-///
-/// This UI is in the bottom left corner and has flex column support
-pub fn main_ui_node_scene() -> impl Scene {
-    bsn! {
-        Node {
-            flex_direction: FlexDirection::Column,
-            position_type: PositionType::Absolute,
-            row_gap: px(6),
-            left: px(10),
-            bottom: px(10),
-        }
-    }
-}
-
 /// Creates a single feathers checkbox that allows configuration of a setting.  
 ///
 /// Examples that use this to create a checkbox should handle its `ValueChange<bool>` events.
diff --git a/examples/helpers/scene.rs b/examples/helpers/scene.rs
new file mode 100644
index 0000000000000..c270c7514b058
--- /dev/null
+++ b/examples/helpers/scene.rs
@@ -0,0 +1,32 @@
+/// Helpers to create a [`Node`] appropriate for the outer main UI node as a `Scene`.
+use bevy::prelude::*;
+
+/// Returns a [`Node`] appropriate for the outer main UI node as a `Scene`.
+///
+/// This UI is in the bottom left corner and has flex column support
+pub fn bottom_left_scene() -> impl Scene {
+    bsn! {
+        Node {
+            flex_direction: FlexDirection::Column,
+            position_type: PositionType::Absolute,
+            row_gap: px(6),
+            left: px(10),
+            bottom: px(10),
+        }
+    }
+}
+
+/// Returns a [`Node`] appropriate for the outer main UI node as a `Scene`.
+///
+/// This UI is in the top left corner and has flex column support
+pub fn top_left_scene() -> impl Scene {
+    bsn! {
+        Node {
+            flex_direction: FlexDirection::Column,
+            position_type: PositionType::Absolute,
+            row_gap: px(6),
+            left: px(10),
+            top: px(10),
+        }
+    }
+}

From ec50f30b9a4843d6eda86305dc7eaf8aca5be69e Mon Sep 17 00:00:00 2001
From: tevans-3 <tevans3@ualberta.ca>
Date: Sun, 26 Jul 2026 19:33:45 -0600
Subject: [PATCH 3/3] updated comment

---
 examples/2d/2d_shapes.rs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/examples/2d/2d_shapes.rs b/examples/2d/2d_shapes.rs
index 6c94f0bec1854..d750dad0dc560 100644
--- a/examples/2d/2d_shapes.rs
+++ b/examples/2d/2d_shapes.rs
@@ -9,7 +9,7 @@
 //!
 //! Both the mesh and material need to be wrapped in their own "newtypes". The mesh and material are currently [`Handle<Mesh>`] and [`Handle<ColorMaterial>`] at the moment, which are not components. Handles are put behind "newtypes" to prevent ambiguity, as some entities might want to have handles to meshes (or images, or materials etc.) for different purposes! All we need to do to make them rendering-relevant components is wrap the mesh handle and the material handle in [`Mesh2d`] and [`MeshMaterial2d`] respectively.
 //!
-//! You can toggle wireframes with the space bar except on wasm. Wasm does not support
+//! You can toggle wireframes with a Feathers checkbox except on wasm. Wasm does not support
 //! `POLYGON_MODE_LINE` on the gpu.
 
 use bevy::prelude::*;