Rust egui Checkboxes & Radios — Build Theme Preferences (Ep 5)

Rust egui Checkboxes & Radios — Build Theme Preferences

In this tutorial, you'll learn how to add interactive checkboxes and radio buttons to your egui application using Rust. We build a theme preferences panel that lets users toggle dark mode and select font sizes, demonstrating how to manage state and display live settings.

Code

use eframe::egui::{self, CentralPanel, Context, RadioButton, Ui};

#[derive(PartialEq)]
enum FontSize {
  Small,
  Medium,
  Large,
}

struct ThemePreferences {
  dark_mode: bool,
  font_size: FontSize,
}

impl Default for ThemePreferences {
  fn default() -> Self {
    Self {
      dark_mode: false,
      font_size: FontSize::Medium,
    }
  }
}

impl ThemePreferences {
  fn ui(&mut self, ui: &mut Ui) {
    // Checkbox to toggle dark mode
    ui.checkbox(&mut self.dark_mode, "Dark Mode");

    ui.label("Font Size:");
    // Radio buttons to select font size
    ui.radio_value(&mut self.font_size, FontSize::Small, "Small");
    ui.radio_value(&mut self.font_size, FontSize::Medium, "Medium");
    ui.radio_value(&mut self.font_size, FontSize::Large, "Large");

    ui.separator();

    // Display current settings live
    let mode = if self.dark_mode { "Dark" } else { "Light" };
    let size = match self.font_size {
      FontSize::Small => "Small",
      FontSize::Medium => "Medium",
      FontSize::Large => "Large",
    };
    ui.label(format!("Current theme: {} mode, {} font size", mode, size));
  }
}

fn main() {
  let options = eframe::NativeOptions::default();
  eframe::run_native(
    "Theme Preferences",
    options,
    Box::new(|_cc| Box::new(App::default())),
  );
}

struct App {
  prefs: ThemePreferences,
}

impl Default for App {
  fn default() -> Self {
    Self {
      prefs: ThemePreferences::default(),
    }
  }
}

impl eframe::App for App {
  fn update(&mut self, ctx: &Context, _frame: &mut eframe::Frame) {
    CentralPanel::default().show(ctx, |ui| {
      self.prefs.ui(ui);
    });
  }
}

Key Points

• Use ui.checkbox() with a mutable bool to toggle settings like dark mode.
• Use ui.radio_value() with an enum and PartialEq to select among multiple options.
• Derive PartialEq on enums to enable easy comparison for radio buttons.
• Use a match statement to display the currently selected enum variant as text.
• Display live state updates by reading the current values and showing them in the UI.