1use gpui::{
2 AnyElement, AnyView, ClickEvent, ElementId, Hsla, IntoElement, KeybindingKeystroke, Keystroke,
3 Styled, Window, div, hsla, prelude::*,
4};
5use settings::KeybindSource;
6use std::{rc::Rc, sync::Arc};
7
8use crate::utils::is_light;
9use crate::{Color, Icon, IconName, ToggleState, Tooltip};
10use crate::{ElevationIndex, KeyBinding, prelude::*};
11
12// TODO: Checkbox, CheckboxWithLabel, and Switch could all be
13// restructured to use a ToggleLike, similar to Button/Buttonlike, Label/Labellike
14
15/// Creates a new checkbox.
16pub fn checkbox(id: impl Into<ElementId>, toggle_state: ToggleState) -> Checkbox {
17 Checkbox::new(id, toggle_state)
18}
19
20/// Creates a new switch.
21pub fn switch(id: impl Into<ElementId>, toggle_state: ToggleState) -> Switch {
22 Switch::new(id, toggle_state)
23}
24
25/// The visual style of a toggle.
26#[derive(Debug, Default, Clone, PartialEq, Eq)]
27pub enum ToggleStyle {
28 /// Toggle has a transparent background
29 #[default]
30 Ghost,
31 /// Toggle has a filled background based on the
32 /// elevation index of the parent container
33 ElevationBased(ElevationIndex),
34 /// A custom style using a color to tint the toggle
35 Custom(Hsla),
36}
37
38/// # Checkbox
39///
40/// Checkboxes are used for multiple choices, not for mutually exclusive choices.
41/// Each checkbox works independently from other checkboxes in the list,
42/// therefore checking an additional box does not affect any other selections.
43#[derive(IntoElement, RegisterComponent)]
44pub struct Checkbox {
45 id: ElementId,
46 toggle_state: ToggleState,
47 disabled: bool,
48 placeholder: bool,
49 on_click: Option<Box<dyn Fn(&ToggleState, &ClickEvent, &mut Window, &mut App) + 'static>>,
50 filled: bool,
51 style: ToggleStyle,
52 tooltip: Option<Box<dyn Fn(&mut Window, &mut App) -> AnyView>>,
53 label: Option<SharedString>,
54 label_size: LabelSize,
55 label_color: Color,
56}
57
58impl Checkbox {
59 /// Creates a new [`Checkbox`].
60 pub fn new(id: impl Into<ElementId>, checked: ToggleState) -> Self {
61 Self {
62 id: id.into(),
63 toggle_state: checked,
64 disabled: false,
65 on_click: None,
66 filled: false,
67 style: ToggleStyle::default(),
68 tooltip: None,
69 label: None,
70 label_size: LabelSize::Default,
71 label_color: Color::Muted,
72 placeholder: false,
73 }
74 }
75
76 /// Sets the disabled state of the [`Checkbox`].
77 pub fn disabled(mut self, disabled: bool) -> Self {
78 self.disabled = disabled;
79 self
80 }
81
82 /// Sets the disabled state of the [`Checkbox`].
83 pub fn placeholder(mut self, placeholder: bool) -> Self {
84 self.placeholder = placeholder;
85 self
86 }
87
88 /// Binds a handler to the [`Checkbox`] that will be called when clicked.
89 pub fn on_click(
90 mut self,
91 handler: impl Fn(&ToggleState, &mut Window, &mut App) + 'static,
92 ) -> Self {
93 self.on_click = Some(Box::new(move |state, _, window, cx| {
94 handler(state, window, cx)
95 }));
96 self
97 }
98
99 pub fn on_click_ext(
100 mut self,
101 handler: impl Fn(&ToggleState, &ClickEvent, &mut Window, &mut App) + 'static,
102 ) -> Self {
103 self.on_click = Some(Box::new(handler));
104 self
105 }
106
107 /// Sets the `fill` setting of the checkbox, indicating whether it should be filled.
108 pub fn fill(mut self) -> Self {
109 self.filled = true;
110 self
111 }
112
113 /// Sets the style of the checkbox using the specified [`ToggleStyle`].
114 pub fn style(mut self, style: ToggleStyle) -> Self {
115 self.style = style;
116 self
117 }
118
119 /// Match the style of the checkbox to the current elevation using [`ToggleStyle::ElevationBased`].
120 pub fn elevation(mut self, elevation: ElevationIndex) -> Self {
121 self.style = ToggleStyle::ElevationBased(elevation);
122 self
123 }
124
125 /// Sets the tooltip for the checkbox.
126 pub fn tooltip(mut self, tooltip: impl Fn(&mut Window, &mut App) -> AnyView + 'static) -> Self {
127 self.tooltip = Some(Box::new(tooltip));
128 self
129 }
130
131 /// Set the label for the checkbox.
132 pub fn label(mut self, label: impl Into<SharedString>) -> Self {
133 self.label = Some(label.into());
134 self
135 }
136
137 pub fn label_size(mut self, size: LabelSize) -> Self {
138 self.label_size = size;
139 self
140 }
141
142 pub fn label_color(mut self, color: Color) -> Self {
143 self.label_color = color;
144 self
145 }
146}
147
148impl Checkbox {
149 fn bg_color(&self, cx: &App) -> Hsla {
150 let style = self.style.clone();
151 match (style, self.filled) {
152 (ToggleStyle::Ghost, false) => cx.theme().colors().ghost_element_background,
153 (ToggleStyle::Ghost, true) => cx.theme().colors().element_background,
154 (ToggleStyle::ElevationBased(_), false) => gpui::transparent_black(),
155 (ToggleStyle::ElevationBased(elevation), true) => elevation.darker_bg(cx),
156 (ToggleStyle::Custom(_), false) => gpui::transparent_black(),
157 (ToggleStyle::Custom(color), true) => color.opacity(0.2),
158 }
159 }
160
161 fn border_color(&self, cx: &App) -> Hsla {
162 if self.disabled {
163 return cx.theme().colors().border_variant;
164 }
165
166 match self.style.clone() {
167 ToggleStyle::Ghost => cx.theme().colors().border,
168 ToggleStyle::ElevationBased(_) => cx.theme().colors().border,
169 ToggleStyle::Custom(color) => color.opacity(0.3),
170 }
171 }
172
173 pub fn container_size() -> Pixels {
174 px(20.0)
175 }
176}
177
178impl RenderOnce for Checkbox {
179 fn render(self, _: &mut Window, cx: &mut App) -> impl IntoElement {
180 let group_id = format!("checkbox_group_{:?}", self.id);
181 let color = if self.disabled {
182 Color::Disabled
183 } else {
184 Color::Selected
185 };
186
187 let icon = match self.toggle_state {
188 ToggleState::Selected => {
189 if self.placeholder {
190 None
191 } else {
192 Some(
193 Icon::new(IconName::Check)
194 .size(IconSize::Small)
195 .color(color),
196 )
197 }
198 }
199 ToggleState::Indeterminate => {
200 Some(Icon::new(IconName::Dash).size(IconSize::Small).color(color))
201 }
202 ToggleState::Unselected => None,
203 };
204
205 let bg_color = self.bg_color(cx);
206 let border_color = self.border_color(cx);
207 let hover_border_color = border_color.alpha(0.7);
208
209 let size = Self::container_size();
210
211 let checkbox = h_flex()
212 .id(self.id.clone())
213 .justify_center()
214 .items_center()
215 .size(size)
216 .group(group_id.clone())
217 .child(
218 div()
219 .flex()
220 .flex_none()
221 .justify_center()
222 .items_center()
223 .m_1()
224 .size_4()
225 .rounded_xs()
226 .bg(bg_color)
227 .border_1()
228 .border_color(border_color)
229 .when(self.disabled, |this| this.cursor_not_allowed())
230 .when(self.disabled, |this| {
231 this.bg(cx.theme().colors().element_disabled.opacity(0.6))
232 })
233 .when(!self.disabled, |this| {
234 this.group_hover(group_id.clone(), |el| el.border_color(hover_border_color))
235 })
236 .when(self.placeholder, |this| {
237 this.child(
238 div()
239 .flex_none()
240 .rounded_full()
241 .bg(color.color(cx).alpha(0.5))
242 .size(px(4.)),
243 )
244 })
245 .children(icon),
246 );
247
248 h_flex()
249 .id(self.id)
250 .map(|this| {
251 if self.disabled {
252 this.cursor_not_allowed()
253 } else {
254 this.cursor_pointer()
255 }
256 })
257 .gap(DynamicSpacing::Base06.rems(cx))
258 .child(checkbox)
259 .when_some(
260 self.on_click.filter(|_| !self.disabled),
261 |this, on_click| {
262 this.on_click(move |click, window, cx| {
263 on_click(&self.toggle_state.inverse(), click, window, cx)
264 })
265 },
266 )
267 .when_some(self.label, |this, label| {
268 this.child(
269 Label::new(label)
270 .color(self.label_color)
271 .size(self.label_size),
272 )
273 })
274 .when_some(self.tooltip, |this, tooltip| {
275 this.tooltip(move |window, cx| tooltip(window, cx))
276 })
277 }
278}
279
280/// Defines the color for a switch component.
281#[derive(Debug, PartialEq, Eq, PartialOrd, Ord, Hash, Clone, Copy, Default)]
282pub enum SwitchColor {
283 #[default]
284 Default,
285 Accent,
286 Error,
287 Warning,
288 Success,
289 Custom(Hsla),
290}
291
292impl SwitchColor {
293 fn get_colors(&self, is_on: bool, cx: &App) -> (Hsla, Hsla) {
294 if !is_on {
295 return (
296 cx.theme().colors().element_disabled,
297 cx.theme().colors().border,
298 );
299 }
300
301 match self {
302 SwitchColor::Default => {
303 let colors = cx.theme().colors();
304 let base_color = colors.text;
305 let bg_color = colors.element_background.blend(base_color.opacity(0.08));
306 (bg_color, colors.border_variant)
307 }
308 SwitchColor::Accent => {
309 let status = cx.theme().status();
310 (status.info.opacity(0.4), status.info.opacity(0.2))
311 }
312 SwitchColor::Error => {
313 let status = cx.theme().status();
314 (status.error.opacity(0.4), status.error.opacity(0.2))
315 }
316 SwitchColor::Warning => {
317 let status = cx.theme().status();
318 (status.warning.opacity(0.4), status.warning.opacity(0.2))
319 }
320 SwitchColor::Success => {
321 let status = cx.theme().status();
322 (status.success.opacity(0.4), status.success.opacity(0.2))
323 }
324 SwitchColor::Custom(color) => (*color, color.opacity(0.6)),
325 }
326 }
327}
328
329impl From<SwitchColor> for Color {
330 fn from(color: SwitchColor) -> Self {
331 match color {
332 SwitchColor::Default => Color::Default,
333 SwitchColor::Accent => Color::Accent,
334 SwitchColor::Error => Color::Error,
335 SwitchColor::Warning => Color::Warning,
336 SwitchColor::Success => Color::Success,
337 SwitchColor::Custom(_) => Color::Default,
338 }
339 }
340}
341
342/// Defines the color for a switch component.
343#[derive(Debug, PartialEq, Eq, PartialOrd, Ord, Hash, Clone, Copy, Default)]
344pub enum SwitchLabelPosition {
345 Start,
346 #[default]
347 End,
348}
349
350/// # Switch
351///
352/// Switches are used to represent opposite states, such as enabled or disabled.
353#[derive(IntoElement, RegisterComponent)]
354pub struct Switch {
355 id: ElementId,
356 toggle_state: ToggleState,
357 disabled: bool,
358 on_click: Option<Rc<dyn Fn(&ToggleState, &mut Window, &mut App) + 'static>>,
359 label: Option<SharedString>,
360 label_position: Option<SwitchLabelPosition>,
361 label_size: LabelSize,
362 full_width: bool,
363 key_binding: Option<KeyBinding>,
364 color: SwitchColor,
365 tab_index: Option<isize>,
366}
367
368impl Switch {
369 /// Creates a new [`Switch`].
370 pub fn new(id: impl Into<ElementId>, state: ToggleState) -> Self {
371 Self {
372 id: id.into(),
373 toggle_state: state,
374 disabled: false,
375 on_click: None,
376 label: None,
377 label_position: None,
378 label_size: LabelSize::Small,
379 full_width: false,
380 key_binding: None,
381 color: SwitchColor::default(),
382 tab_index: None,
383 }
384 }
385
386 /// Sets the color of the switch using the specified [`SwitchColor`].
387 pub fn color(mut self, color: SwitchColor) -> Self {
388 self.color = color;
389 self
390 }
391
392 /// Sets the disabled state of the [`Switch`].
393 pub fn disabled(mut self, disabled: bool) -> Self {
394 self.disabled = disabled;
395 self
396 }
397
398 /// Binds a handler to the [`Switch`] that will be called when clicked.
399 pub fn on_click(
400 mut self,
401 handler: impl Fn(&ToggleState, &mut Window, &mut App) + 'static,
402 ) -> Self {
403 self.on_click = Some(Rc::new(handler));
404 self
405 }
406
407 /// Sets the label of the [`Switch`].
408 pub fn label(mut self, label: impl Into<SharedString>) -> Self {
409 self.label = Some(label.into());
410 self
411 }
412
413 pub fn label_position(
414 mut self,
415 label_position: impl Into<Option<SwitchLabelPosition>>,
416 ) -> Self {
417 self.label_position = label_position.into();
418 self
419 }
420
421 pub fn label_size(mut self, size: LabelSize) -> Self {
422 self.label_size = size;
423 self
424 }
425
426 pub fn full_width(mut self, full_width: bool) -> Self {
427 self.full_width = full_width;
428 self
429 }
430
431 /// Display the keybinding that triggers the switch action.
432 pub fn key_binding(mut self, key_binding: impl Into<Option<KeyBinding>>) -> Self {
433 self.key_binding = key_binding.into();
434 self
435 }
436
437 pub fn tab_index(mut self, tab_index: impl Into<isize>) -> Self {
438 self.tab_index = Some(tab_index.into());
439 self
440 }
441}
442
443impl RenderOnce for Switch {
444 fn render(self, _window: &mut Window, cx: &mut App) -> impl IntoElement {
445 let is_on = self.toggle_state == ToggleState::Selected;
446 let adjust_ratio = if is_light(cx) { 1.5 } else { 1.0 };
447
448 let base_color = cx.theme().colors().text;
449 let thumb_color = base_color;
450 let (bg_color, border_color) = self.color.get_colors(is_on, cx);
451
452 let bg_hover_color = if is_on {
453 bg_color.blend(base_color.opacity(0.16 * adjust_ratio))
454 } else {
455 bg_color.blend(base_color.opacity(0.05 * adjust_ratio))
456 };
457
458 let thumb_opacity = match (is_on, self.disabled) {
459 (_, true) => 0.2,
460 (true, false) => 1.0,
461 (false, false) => 0.5,
462 };
463
464 let group_id = format!("switch_group_{:?}", self.id);
465 let label = self.label;
466
467 let switch = div()
468 .id((self.id.clone(), "switch"))
469 .p(px(1.0))
470 .border_2()
471 .border_color(cx.theme().colors().border_transparent)
472 .rounded_full()
473 .when_some(
474 self.tab_index.filter(|_| !self.disabled),
475 |this, tab_index| {
476 this.tab_index(tab_index)
477 .focus_visible(|mut style| {
478 style.border_color = Some(cx.theme().colors().border_focused);
479 style
480 })
481 .when_some(self.on_click.clone(), |this, on_click| {
482 this.on_click(move |_, window, cx| {
483 on_click(&self.toggle_state.inverse(), window, cx)
484 })
485 })
486 },
487 )
488 .child(
489 h_flex()
490 .w(DynamicSpacing::Base32.rems(cx))
491 .h(DynamicSpacing::Base20.rems(cx))
492 .group(group_id.clone())
493 .child(
494 h_flex()
495 .when(is_on, |on| on.justify_end())
496 .when(!is_on, |off| off.justify_start())
497 .size_full()
498 .rounded_full()
499 .px(DynamicSpacing::Base02.px(cx))
500 .bg(bg_color)
501 .when(!self.disabled, |this| {
502 this.group_hover(group_id.clone(), |el| el.bg(bg_hover_color))
503 })
504 .border_1()
505 .border_color(border_color)
506 .child(
507 div()
508 .size(DynamicSpacing::Base12.rems(cx))
509 .rounded_full()
510 .bg(thumb_color)
511 .opacity(thumb_opacity),
512 ),
513 ),
514 );
515
516 h_flex()
517 .id(self.id)
518 .cursor_pointer()
519 .gap(DynamicSpacing::Base06.rems(cx))
520 .when(self.full_width, |this| this.w_full().justify_between())
521 .when(
522 self.label_position == Some(SwitchLabelPosition::Start),
523 |this| {
524 this.when_some(label.clone(), |this, label| {
525 this.child(Label::new(label).size(self.label_size))
526 })
527 },
528 )
529 .child(switch)
530 .when(
531 self.label_position == Some(SwitchLabelPosition::End),
532 |this| {
533 this.when_some(label, |this, label| {
534 this.child(Label::new(label).size(self.label_size))
535 })
536 },
537 )
538 .children(self.key_binding)
539 .when_some(
540 self.on_click.filter(|_| !self.disabled),
541 |this, on_click| {
542 this.on_click(move |_, window, cx| {
543 on_click(&self.toggle_state.inverse(), window, cx)
544 })
545 },
546 )
547 }
548}
549
550/// # SwitchField
551///
552/// A field component that combines a label, description, and switch into one reusable component.
553///
554/// # Examples
555///
556/// ```
557/// use ui::prelude::*;
558/// use ui::{SwitchField, ToggleState};
559///
560/// let switch_field = SwitchField::new(
561/// "feature-toggle",
562/// Some("Enable feature"),
563/// Some("This feature adds new functionality to the app.".into()),
564/// ToggleState::Unselected,
565/// |state, window, cx| {
566/// // Logic here
567/// }
568/// );
569/// ```
570#[derive(IntoElement, RegisterComponent)]
571pub struct SwitchField {
572 id: ElementId,
573 label: Option<SharedString>,
574 description: Option<SharedString>,
575 toggle_state: ToggleState,
576 on_click: Arc<dyn Fn(&ToggleState, &mut Window, &mut App) + 'static>,
577 disabled: bool,
578 color: SwitchColor,
579 tooltip: Option<Rc<dyn Fn(&mut Window, &mut App) -> AnyView>>,
580 tab_index: Option<isize>,
581}
582
583impl SwitchField {
584 pub fn new(
585 id: impl Into<ElementId>,
586 label: Option<impl Into<SharedString>>,
587 description: Option<SharedString>,
588 toggle_state: impl Into<ToggleState>,
589 on_click: impl Fn(&ToggleState, &mut Window, &mut App) + 'static,
590 ) -> Self {
591 Self {
592 id: id.into(),
593 label: label.map(Into::into),
594 description,
595 toggle_state: toggle_state.into(),
596 on_click: Arc::new(on_click),
597 disabled: false,
598 color: SwitchColor::Accent,
599 tooltip: None,
600 tab_index: None,
601 }
602 }
603
604 pub fn description(mut self, description: impl Into<SharedString>) -> Self {
605 self.description = Some(description.into());
606 self
607 }
608
609 pub fn disabled(mut self, disabled: bool) -> Self {
610 self.disabled = disabled;
611 self
612 }
613
614 /// Sets the color of the switch using the specified [`SwitchColor`].
615 /// This changes the color scheme of the switch when it's in the "on" state.
616 pub fn color(mut self, color: SwitchColor) -> Self {
617 self.color = color;
618 self
619 }
620
621 pub fn tooltip(mut self, tooltip: impl Fn(&mut Window, &mut App) -> AnyView + 'static) -> Self {
622 self.tooltip = Some(Rc::new(tooltip));
623 self
624 }
625
626 pub fn tab_index(mut self, tab_index: isize) -> Self {
627 self.tab_index = Some(tab_index);
628 self
629 }
630}
631
632impl RenderOnce for SwitchField {
633 fn render(self, _window: &mut Window, _cx: &mut App) -> impl IntoElement {
634 let tooltip = self
635 .tooltip
636 .zip(self.label.clone())
637 .map(|(tooltip_fn, label)| {
638 h_flex().gap_0p5().child(Label::new(label)).child(
639 IconButton::new("tooltip_button", IconName::Info)
640 .icon_size(IconSize::XSmall)
641 .icon_color(Color::Muted)
642 .shape(crate::IconButtonShape::Square)
643 .style(ButtonStyle::Transparent)
644 .tooltip({
645 let tooltip = tooltip_fn.clone();
646 move |window, cx| tooltip(window, cx)
647 })
648 .on_click(|_, _, _| {}), // Intentional empty on click handler so that clicking on the info tooltip icon doesn't trigger the switch toggle
649 )
650 });
651
652 h_flex()
653 .id((self.id.clone(), "container"))
654 .when(!self.disabled, |this| {
655 this.hover(|this| this.cursor_pointer())
656 })
657 .w_full()
658 .gap_4()
659 .justify_between()
660 .flex_wrap()
661 .child(match (&self.description, tooltip) {
662 (Some(description), Some(tooltip)) => v_flex()
663 .gap_0p5()
664 .max_w_5_6()
665 .child(tooltip)
666 .child(Label::new(description.clone()).color(Color::Muted))
667 .into_any_element(),
668 (Some(description), None) => v_flex()
669 .gap_0p5()
670 .max_w_5_6()
671 .when_some(self.label, |this, label| this.child(Label::new(label)))
672 .child(Label::new(description.clone()).color(Color::Muted))
673 .into_any_element(),
674 (None, Some(tooltip)) => tooltip.into_any_element(),
675 (None, None) => {
676 if let Some(label) = self.label.clone() {
677 Label::new(label).into_any_element()
678 } else {
679 gpui::Empty.into_any_element()
680 }
681 }
682 })
683 .child(
684 Switch::new((self.id.clone(), "switch"), self.toggle_state)
685 .color(self.color)
686 .disabled(self.disabled)
687 .when_some(
688 self.tab_index.filter(|_| !self.disabled),
689 |this, tab_index| this.tab_index(tab_index),
690 )
691 .on_click({
692 let on_click = self.on_click.clone();
693 move |state, window, cx| {
694 (on_click)(state, window, cx);
695 }
696 }),
697 )
698 .when(!self.disabled, |this| {
699 this.on_click({
700 let on_click = self.on_click.clone();
701 let toggle_state = self.toggle_state;
702 move |_click, window, cx| {
703 (on_click)(&toggle_state.inverse(), window, cx);
704 }
705 })
706 })
707 }
708}
709
710impl Component for SwitchField {
711 fn scope() -> ComponentScope {
712 ComponentScope::Input
713 }
714
715 fn description() -> Option<&'static str> {
716 Some("A field component that combines a label, description, and switch")
717 }
718
719 fn preview(_window: &mut Window, _cx: &mut App) -> Option<AnyElement> {
720 Some(
721 v_flex()
722 .gap_6()
723 .children(vec![
724 example_group_with_title(
725 "States",
726 vec![
727 single_example(
728 "Unselected",
729 SwitchField::new(
730 "switch_field_unselected",
731 Some("Enable notifications"),
732 Some("Receive notifications when new messages arrive.".into()),
733 ToggleState::Unselected,
734 |_, _, _| {},
735 )
736 .into_any_element(),
737 ),
738 single_example(
739 "Selected",
740 SwitchField::new(
741 "switch_field_selected",
742 Some("Enable notifications"),
743 Some("Receive notifications when new messages arrive.".into()),
744 ToggleState::Selected,
745 |_, _, _| {},
746 )
747 .into_any_element(),
748 ),
749 ],
750 ),
751 example_group_with_title(
752 "Colors",
753 vec![
754 single_example(
755 "Default",
756 SwitchField::new(
757 "switch_field_default",
758 Some("Default color"),
759 Some("This uses the default switch color.".into()),
760 ToggleState::Selected,
761 |_, _, _| {},
762 )
763 .into_any_element(),
764 ),
765 single_example(
766 "Accent",
767 SwitchField::new(
768 "switch_field_accent",
769 Some("Accent color"),
770 Some("This uses the accent color scheme.".into()),
771 ToggleState::Selected,
772 |_, _, _| {},
773 )
774 .color(SwitchColor::Accent)
775 .into_any_element(),
776 ),
777 ],
778 ),
779 example_group_with_title(
780 "Disabled",
781 vec![single_example(
782 "Disabled",
783 SwitchField::new(
784 "switch_field_disabled",
785 Some("Disabled field"),
786 Some("This field is disabled and cannot be toggled.".into()),
787 ToggleState::Selected,
788 |_, _, _| {},
789 )
790 .disabled(true)
791 .into_any_element(),
792 )],
793 ),
794 example_group_with_title(
795 "No Description",
796 vec![single_example(
797 "No Description",
798 SwitchField::new(
799 "switch_field_disabled",
800 Some("Disabled field"),
801 None,
802 ToggleState::Selected,
803 |_, _, _| {},
804 )
805 .into_any_element(),
806 )],
807 ),
808 example_group_with_title(
809 "With Tooltip",
810 vec![
811 single_example(
812 "Tooltip with Description",
813 SwitchField::new(
814 "switch_field_tooltip_with_desc",
815 Some("Nice Feature"),
816 Some("Enable advanced configuration options.".into()),
817 ToggleState::Unselected,
818 |_, _, _| {},
819 )
820 .tooltip(Tooltip::text("This is content for this tooltip!"))
821 .into_any_element(),
822 ),
823 single_example(
824 "Tooltip without Description",
825 SwitchField::new(
826 "switch_field_tooltip_no_desc",
827 Some("Nice Feature"),
828 None,
829 ToggleState::Selected,
830 |_, _, _| {},
831 )
832 .tooltip(Tooltip::text("This is content for this tooltip!"))
833 .into_any_element(),
834 ),
835 ],
836 ),
837 ])
838 .into_any_element(),
839 )
840 }
841}
842
843impl Component for Checkbox {
844 fn scope() -> ComponentScope {
845 ComponentScope::Input
846 }
847
848 fn description() -> Option<&'static str> {
849 Some("A checkbox component that can be used for multiple choice selections")
850 }
851
852 fn preview(_window: &mut Window, _cx: &mut App) -> Option<AnyElement> {
853 Some(
854 v_flex()
855 .gap_6()
856 .children(vec![
857 example_group_with_title(
858 "States",
859 vec![
860 single_example(
861 "Unselected",
862 Checkbox::new("checkbox_unselected", ToggleState::Unselected)
863 .into_any_element(),
864 ),
865 single_example(
866 "Placeholder",
867 Checkbox::new("checkbox_indeterminate", ToggleState::Selected)
868 .placeholder(true)
869 .into_any_element(),
870 ),
871 single_example(
872 "Indeterminate",
873 Checkbox::new("checkbox_indeterminate", ToggleState::Indeterminate)
874 .into_any_element(),
875 ),
876 single_example(
877 "Selected",
878 Checkbox::new("checkbox_selected", ToggleState::Selected)
879 .into_any_element(),
880 ),
881 ],
882 ),
883 example_group_with_title(
884 "Styles",
885 vec![
886 single_example(
887 "Default",
888 Checkbox::new("checkbox_default", ToggleState::Selected)
889 .into_any_element(),
890 ),
891 single_example(
892 "Filled",
893 Checkbox::new("checkbox_filled", ToggleState::Selected)
894 .fill()
895 .into_any_element(),
896 ),
897 single_example(
898 "ElevationBased",
899 Checkbox::new("checkbox_elevation", ToggleState::Selected)
900 .style(ToggleStyle::ElevationBased(
901 ElevationIndex::EditorSurface,
902 ))
903 .into_any_element(),
904 ),
905 single_example(
906 "Custom Color",
907 Checkbox::new("checkbox_custom", ToggleState::Selected)
908 .style(ToggleStyle::Custom(hsla(142.0 / 360., 0.68, 0.45, 0.7)))
909 .into_any_element(),
910 ),
911 ],
912 ),
913 example_group_with_title(
914 "Disabled",
915 vec![
916 single_example(
917 "Unselected",
918 Checkbox::new(
919 "checkbox_disabled_unselected",
920 ToggleState::Unselected,
921 )
922 .disabled(true)
923 .into_any_element(),
924 ),
925 single_example(
926 "Selected",
927 Checkbox::new("checkbox_disabled_selected", ToggleState::Selected)
928 .disabled(true)
929 .into_any_element(),
930 ),
931 ],
932 ),
933 example_group_with_title(
934 "With Label",
935 vec![single_example(
936 "Default",
937 Checkbox::new("checkbox_with_label", ToggleState::Selected)
938 .label("Always save on quit")
939 .into_any_element(),
940 )],
941 ),
942 ])
943 .into_any_element(),
944 )
945 }
946}
947
948impl Component for Switch {
949 fn scope() -> ComponentScope {
950 ComponentScope::Input
951 }
952
953 fn description() -> Option<&'static str> {
954 Some("A switch component that represents binary states like on/off")
955 }
956
957 fn preview(_window: &mut Window, _cx: &mut App) -> Option<AnyElement> {
958 Some(
959 v_flex()
960 .gap_6()
961 .children(vec![
962 example_group_with_title(
963 "States",
964 vec![
965 single_example(
966 "Off",
967 Switch::new("switch_off", ToggleState::Unselected)
968 .on_click(|_, _, _cx| {})
969 .into_any_element(),
970 ),
971 single_example(
972 "On",
973 Switch::new("switch_on", ToggleState::Selected)
974 .on_click(|_, _, _cx| {})
975 .into_any_element(),
976 ),
977 ],
978 ),
979 example_group_with_title(
980 "Colors",
981 vec![
982 single_example(
983 "Default",
984 Switch::new("switch_default_style", ToggleState::Selected)
985 .color(SwitchColor::Default)
986 .on_click(|_, _, _cx| {})
987 .into_any_element(),
988 ),
989 single_example(
990 "Accent",
991 Switch::new("switch_accent_style", ToggleState::Selected)
992 .color(SwitchColor::Accent)
993 .on_click(|_, _, _cx| {})
994 .into_any_element(),
995 ),
996 single_example(
997 "Error",
998 Switch::new("switch_error_style", ToggleState::Selected)
999 .color(SwitchColor::Error)
1000 .on_click(|_, _, _cx| {})
1001 .into_any_element(),
1002 ),
1003 single_example(
1004 "Warning",
1005 Switch::new("switch_warning_style", ToggleState::Selected)
1006 .color(SwitchColor::Warning)
1007 .on_click(|_, _, _cx| {})
1008 .into_any_element(),
1009 ),
1010 single_example(
1011 "Success",
1012 Switch::new("switch_success_style", ToggleState::Selected)
1013 .color(SwitchColor::Success)
1014 .on_click(|_, _, _cx| {})
1015 .into_any_element(),
1016 ),
1017 single_example(
1018 "Custom",
1019 Switch::new("switch_custom_style", ToggleState::Selected)
1020 .color(SwitchColor::Custom(hsla(300.0 / 360.0, 0.6, 0.6, 1.0)))
1021 .on_click(|_, _, _cx| {})
1022 .into_any_element(),
1023 ),
1024 ],
1025 ),
1026 example_group_with_title(
1027 "Disabled",
1028 vec![
1029 single_example(
1030 "Off",
1031 Switch::new("switch_disabled_off", ToggleState::Unselected)
1032 .disabled(true)
1033 .into_any_element(),
1034 ),
1035 single_example(
1036 "On",
1037 Switch::new("switch_disabled_on", ToggleState::Selected)
1038 .disabled(true)
1039 .into_any_element(),
1040 ),
1041 ],
1042 ),
1043 example_group_with_title(
1044 "With Label",
1045 vec![
1046 single_example(
1047 "Start Label",
1048 Switch::new("switch_with_label_start", ToggleState::Selected)
1049 .label("Always save on quit")
1050 .label_position(SwitchLabelPosition::Start)
1051 .into_any_element(),
1052 ),
1053 single_example(
1054 "End Label",
1055 Switch::new("switch_with_label_end", ToggleState::Selected)
1056 .label("Always save on quit")
1057 .label_position(SwitchLabelPosition::End)
1058 .into_any_element(),
1059 ),
1060 single_example(
1061 "Default Size Label",
1062 Switch::new(
1063 "switch_with_label_default_size",
1064 ToggleState::Selected,
1065 )
1066 .label("Always save on quit")
1067 .label_size(LabelSize::Default)
1068 .into_any_element(),
1069 ),
1070 single_example(
1071 "Small Size Label",
1072 Switch::new("switch_with_label_small_size", ToggleState::Selected)
1073 .label("Always save on quit")
1074 .label_size(LabelSize::Small)
1075 .into_any_element(),
1076 ),
1077 ],
1078 ),
1079 example_group_with_title(
1080 "With Keybinding",
1081 vec![single_example(
1082 "Keybinding",
1083 Switch::new("switch_with_keybinding", ToggleState::Selected)
1084 .key_binding(Some(KeyBinding::from_keystrokes(
1085 vec![KeybindingKeystroke::from_keystroke(
1086 Keystroke::parse("cmd-s").unwrap(),
1087 )]
1088 .into(),
1089 KeybindSource::Base,
1090 )))
1091 .into_any_element(),
1092 )],
1093 ),
1094 ])
1095 .into_any_element(),
1096 )
1097 }
1098}