11_checkbox/
11_checkbox.rs

1//! Example 11: Checkbox
2//!
3//! Demonstrates the Checkbox widget for boolean toggles.
4//!
5//! Run with: cargo run -p telex-tui --example 11_checkbox
6
7use crossterm::event::KeyCode;
8use telex::prelude::*;
9use telex::theme::{set_theme, Theme};
10use telex::Color;
11
12telex::require_api!(0, 2);
13
14fn main() {
15    telex::run_with_theme(App, telex::theme::Theme::nord()).unwrap();
16}
17
18struct App;
19
20impl Component for App {
21    fn render(&self, cx: Scope) -> View {
22        let show_help = state!(cx, || false);
23
24        // F1 toggles help
25        cx.use_command(
26            KeyBinding::key(KeyCode::F(1)),
27            with!(show_help => move || show_help.update(|v| *v = !*v)),
28        );
29
30        // Settings state
31        let dark_mode = state!(cx, || true);
32        let notifications = state!(cx, || true);
33        let auto_save = state!(cx, || false);
34        let telemetry = state!(cx, || false);
35
36        View::vstack()
37            .spacing(1)
38            .child(
39                View::styled_text("Settings")
40                    .color(Color::Cyan)
41                    .bold()
42                    .build(),
43            )
44            .child(
45                View::styled_text("Use Tab to navigate, Enter/Space to toggle")
46                    .dim()
47                    .build(),
48            )
49            .child(View::gap(1))
50            .child(
51                View::boxed()
52                    .border(true)
53                    .padding(1)
54                    .child(
55                        View::vstack()
56                            .spacing(1)
57                            .child(View::styled_text("Appearance").bold().build())
58                            .child(
59                                View::checkbox()
60                                    .checked(dark_mode.get())
61                                    .label("Dark mode")
62                                    .on_toggle(with!(dark_mode => move |checked| {
63                                        dark_mode.set(checked);
64                                        if checked {
65                                            set_theme(Theme::dark());
66                                        } else {
67                                            set_theme(Theme::light());
68                                        }
69                                    }))
70                                    .build(),
71                            )
72                            .build(),
73                    )
74                    .build(),
75            )
76            .child(
77                View::boxed()
78                    .border(true)
79                    .padding(1)
80                    .child(
81                        View::vstack()
82                            .spacing(1)
83                            .child(View::styled_text("Behavior").bold().build())
84                            .child(
85                                View::checkbox()
86                                    .checked(notifications.get())
87                                    .label("Enable notifications")
88                                    .on_toggle(with!(notifications => move |checked| {
89                                        notifications.set(checked);
90                                    }))
91                                    .build(),
92                            )
93                            .child(
94                                View::checkbox()
95                                    .checked(auto_save.get())
96                                    .label("Auto-save documents")
97                                    .on_toggle(with!(auto_save => move |checked| {
98                                        auto_save.set(checked);
99                                    }))
100                                    .build(),
101                            )
102                            .build(),
103                    )
104                    .build(),
105            )
106            .child(
107                View::boxed()
108                    .border(true)
109                    .padding(1)
110                    .child(
111                        View::vstack()
112                            .spacing(1)
113                            .child(View::styled_text("Privacy").bold().build())
114                            .child(
115                                View::checkbox()
116                                    .checked(telemetry.get())
117                                    .label("Send anonymous usage data")
118                                    .on_toggle(with!(telemetry => move |checked| {
119                                        telemetry.set(checked);
120                                    }))
121                                    .build(),
122                            )
123                            .build(),
124                    )
125                    .build(),
126            )
127            .child(View::gap(1))
128            .child(
129                View::hstack()
130                    .spacing(2)
131                    .child(View::text("Current settings:"))
132                    .child(
133                        View::styled_text(format!(
134                            "dark={} notify={} autosave={} telemetry={}",
135                            dark_mode.get(),
136                            notifications.get(),
137                            auto_save.get(),
138                            telemetry.get()
139                        ))
140                        .color(Color::Yellow)
141                        .build(),
142                    )
143                    .build(),
144            )
145            .child(View::gap(1))
146            .child(View::styled_text("F1 help • Ctrl+Q quit").dim().build())
147            .child(
148                View::modal()
149                    .visible(show_help.get())
150                    .title("Example 11: Checkbox")
151                    .on_dismiss(with!(show_help => move || show_help.set(false)))
152                    .child(
153                        View::vstack()
154                            .child(View::styled_text("What you're seeing").bold().build())
155                            .child(View::text("• Checkbox widget for boolean toggles"))
156                            .child(View::text("• Grouped settings in boxed sections"))
157                            .child(View::text("• Dark mode toggle that changes theme live"))
158                            .child(View::gap(1))
159                            .child(View::styled_text("Key concepts").bold().build())
160                            .child(View::text("• View::checkbox() with checked state"))
161                            .child(View::text("• on_toggle callback receives new value"))
162                            .child(View::text("• set_theme() for live theme switching"))
163                            .child(View::gap(1))
164                            .child(View::styled_text("Try this").bold().build())
165                            .child(View::text("• Toggle Dark mode to see theme change"))
166                            .child(View::text("• Watch the status line update"))
167                            .child(View::text("• Tab between checkboxes"))
168                            .child(View::gap(1))
169                            .child(View::styled_text("Next up").bold().build())
170                            .child(View::text("→ 12_text_area: multi-line text editing"))
171                            .child(View::gap(1))
172                            .child(View::styled_text("Press Escape to close").dim().build())
173                            .build(),
174                    )
175                    .build(),
176            )
177            .build()
178    }
179}
11_checkbox/11_checkbox.rs

11_checkbox/
11_checkbox.rs
