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 .cursor_pointer()
251 .gap(DynamicSpacing::Base06.rems(cx))
252 .child(checkbox)
253 .when_some(
254 self.on_click.filter(|_| !self.disabled),
255 |this, on_click| {
256 this.on_click(move |click, window, cx| {
257 on_click(&self.toggle_state.inverse(), click, window, cx)
258 })
259 },
260 )
261 .when_some(self.label, |this, label| {
262 this.child(
263 Label::new(label)
264 .color(self.label_color)
265 .size(self.label_size),
266 )
267 })
268 .when_some(self.tooltip, |this, tooltip| {
269 this.tooltip(move |window, cx| tooltip(window, cx))
270 })
271 }
272}
273
274/// Defines the color for a switch component.
275#[derive(Debug, PartialEq, Eq, PartialOrd, Ord, Hash, Clone, Copy, Default)]
276pub enum SwitchColor {
277 #[default]
278 Default,
279 Accent,
280 Error,
281 Warning,
282 Success,
283 Custom(Hsla),
284}
285
286impl SwitchColor {
287 fn get_colors(&self, is_on: bool, cx: &App) -> (Hsla, Hsla) {
288 if !is_on {
289 return (
290 cx.theme().colors().element_disabled,
291 cx.theme().colors().border,
292 );
293 }
294
295 match self {
296 SwitchColor::Default => {
297 let colors = cx.theme().colors();
298 let base_color = colors.text;
299 let bg_color = colors.element_background.blend(base_color.opacity(0.08));
300 (bg_color, colors.border_variant)
301 }
302 SwitchColor::Accent => {
303 let status = cx.theme().status();
304 (status.info.opacity(0.4), status.info.opacity(0.2))
305 }
306 SwitchColor::Error => {
307 let status = cx.theme().status();
308 (status.error.opacity(0.4), status.error.opacity(0.2))
309 }
310 SwitchColor::Warning => {
311 let status = cx.theme().status();
312 (status.warning.opacity(0.4), status.warning.opacity(0.2))
313 }
314 SwitchColor::Success => {
315 let status = cx.theme().status();
316 (status.success.opacity(0.4), status.success.opacity(0.2))
317 }
318 SwitchColor::Custom(color) => (*color, color.opacity(0.6)),
319 }
320 }
321}
322
323impl From<SwitchColor> for Color {
324 fn from(color: SwitchColor) -> Self {
325 match color {
326 SwitchColor::Default => Color::Default,
327 SwitchColor::Accent => Color::Accent,
328 SwitchColor::Error => Color::Error,
329 SwitchColor::Warning => Color::Warning,
330 SwitchColor::Success => Color::Success,
331 SwitchColor::Custom(_) => Color::Default,
332 }
333 }
334}
335
336/// Defines the color for a switch component.
337#[derive(Debug, PartialEq, Eq, PartialOrd, Ord, Hash, Clone, Copy, Default)]
338pub enum SwitchLabelPosition {
339 Start,
340 #[default]
341 End,
342}
343
344/// # Switch
345///
346/// Switches are used to represent opposite states, such as enabled or disabled.
347#[derive(IntoElement, RegisterComponent)]
348pub struct Switch {
349 id: ElementId,
350 toggle_state: ToggleState,
351 disabled: bool,
352 on_click: Option<Rc<dyn Fn(&ToggleState, &mut Window, &mut App) + 'static>>,
353 label: Option<SharedString>,
354 label_position: Option<SwitchLabelPosition>,
355 label_size: LabelSize,
356 full_width: bool,
357 key_binding: Option<KeyBinding>,
358 color: SwitchColor,
359 tab_index: Option<isize>,
360}
361
362impl Switch {
363 /// Creates a new [`Switch`].
364 pub fn new(id: impl Into<ElementId>, state: ToggleState) -> Self {
365 Self {
366 id: id.into(),
367 toggle_state: state,
368 disabled: false,
369 on_click: None,
370 label: None,
371 label_position: None,
372 label_size: LabelSize::Small,
373 full_width: false,
374 key_binding: None,
375 color: SwitchColor::default(),
376 tab_index: None,
377 }
378 }
379
380 /// Sets the color of the switch using the specified [`SwitchColor`].
381 pub fn color(mut self, color: SwitchColor) -> Self {
382 self.color = color;
383 self
384 }
385
386 /// Sets the disabled state of the [`Switch`].
387 pub fn disabled(mut self, disabled: bool) -> Self {
388 self.disabled = disabled;
389 self
390 }
391
392 /// Binds a handler to the [`Switch`] that will be called when clicked.
393 pub fn on_click(
394 mut self,
395 handler: impl Fn(&ToggleState, &mut Window, &mut App) + 'static,
396 ) -> Self {
397 self.on_click = Some(Rc::new(handler));
398 self
399 }
400
401 /// Sets the label of the [`Switch`].
402 pub fn label(mut self, label: impl Into<SharedString>) -> Self {
403 self.label = Some(label.into());
404 self
405 }
406
407 pub fn label_position(
408 mut self,
409 label_position: impl Into<Option<SwitchLabelPosition>>,
410 ) -> Self {
411 self.label_position = label_position.into();
412 self
413 }
414
415 pub fn label_size(mut self, size: LabelSize) -> Self {
416 self.label_size = size;
417 self
418 }
419
420 pub fn full_width(mut self, full_width: bool) -> Self {
421 self.full_width = full_width;
422 self
423 }
424
425 /// Display the keybinding that triggers the switch action.
426 pub fn key_binding(mut self, key_binding: impl Into<Option<KeyBinding>>) -> Self {
427 self.key_binding = key_binding.into();
428 self
429 }
430
431 pub fn tab_index(mut self, tab_index: impl Into<isize>) -> Self {
432 self.tab_index = Some(tab_index.into());
433 self
434 }
435}
436
437impl RenderOnce for Switch {
438 fn render(self, _window: &mut Window, cx: &mut App) -> impl IntoElement {
439 let is_on = self.toggle_state == ToggleState::Selected;
440 let adjust_ratio = if is_light(cx) { 1.5 } else { 1.0 };
441
442 let base_color = cx.theme().colors().text;
443 let thumb_color = base_color;
444 let (bg_color, border_color) = self.color.get_colors(is_on, cx);
445
446 let bg_hover_color = if is_on {
447 bg_color.blend(base_color.opacity(0.16 * adjust_ratio))
448 } else {
449 bg_color.blend(base_color.opacity(0.05 * adjust_ratio))
450 };
451
452 let thumb_opacity = match (is_on, self.disabled) {
453 (_, true) => 0.2,
454 (true, false) => 1.0,
455 (false, false) => 0.5,
456 };
457
458 let group_id = format!("switch_group_{:?}", self.id);
459 let label = self.label;
460
461 let switch = div()
462 .id((self.id.clone(), "switch"))
463 .p(px(1.0))
464 .border_2()
465 .border_color(cx.theme().colors().border_transparent)
466 .rounded_full()
467 .when_some(
468 self.tab_index.filter(|_| !self.disabled),
469 |this, tab_index| {
470 this.tab_index(tab_index)
471 .focus_visible(|mut style| {
472 style.border_color = Some(cx.theme().colors().border_focused);
473 style
474 })
475 .when_some(self.on_click.clone(), |this, on_click| {
476 this.on_click(move |_, window, cx| {
477 on_click(&self.toggle_state.inverse(), window, cx)
478 })
479 })
480 },
481 )
482 .child(
483 h_flex()
484 .w(DynamicSpacing::Base32.rems(cx))
485 .h(DynamicSpacing::Base20.rems(cx))
486 .group(group_id.clone())
487 .child(
488 h_flex()
489 .when(is_on, |on| on.justify_end())
490 .when(!is_on, |off| off.justify_start())
491 .size_full()
492 .rounded_full()
493 .px(DynamicSpacing::Base02.px(cx))
494 .bg(bg_color)
495 .when(!self.disabled, |this| {
496 this.group_hover(group_id.clone(), |el| el.bg(bg_hover_color))
497 })
498 .border_1()
499 .border_color(border_color)
500 .child(
501 div()
502 .size(DynamicSpacing::Base12.rems(cx))
503 .rounded_full()
504 .bg(thumb_color)
505 .opacity(thumb_opacity),
506 ),
507 ),
508 );
509
510 h_flex()
511 .id(self.id)
512 .cursor_pointer()
513 .gap(DynamicSpacing::Base06.rems(cx))
514 .when(self.full_width, |this| this.w_full().justify_between())
515 .when(
516 self.label_position == Some(SwitchLabelPosition::Start),
517 |this| {
518 this.when_some(label.clone(), |this, label| {
519 this.child(Label::new(label).size(self.label_size))
520 })
521 },
522 )
523 .child(switch)
524 .when(
525 self.label_position == Some(SwitchLabelPosition::End),
526 |this| {
527 this.when_some(label, |this, label| {
528 this.child(Label::new(label).size(self.label_size))
529 })
530 },
531 )
532 .children(self.key_binding)
533 .when_some(
534 self.on_click.filter(|_| !self.disabled),
535 |this, on_click| {
536 this.on_click(move |_, window, cx| {
537 on_click(&self.toggle_state.inverse(), window, cx)
538 })
539 },
540 )
541 }
542}
543
544/// # SwitchField
545///
546/// A field component that combines a label, description, and switch into one reusable component.
547///
548/// # Examples
549///
550/// ```
551/// use ui::prelude::*;
552/// use ui::{SwitchField, ToggleState};
553///
554/// let switch_field = SwitchField::new(
555/// "feature-toggle",
556/// Some("Enable feature"),
557/// Some("This feature adds new functionality to the app.".into()),
558/// ToggleState::Unselected,
559/// |state, window, cx| {
560/// // Logic here
561/// }
562/// );
563/// ```
564#[derive(IntoElement, RegisterComponent)]
565pub struct SwitchField {
566 id: ElementId,
567 label: Option<SharedString>,
568 description: Option<SharedString>,
569 toggle_state: ToggleState,
570 on_click: Arc<dyn Fn(&ToggleState, &mut Window, &mut App) + 'static>,
571 disabled: bool,
572 color: SwitchColor,
573 tooltip: Option<Rc<dyn Fn(&mut Window, &mut App) -> AnyView>>,
574 tab_index: Option<isize>,
575}
576
577impl SwitchField {
578 pub fn new(
579 id: impl Into<ElementId>,
580 label: Option<impl Into<SharedString>>,
581 description: Option<SharedString>,
582 toggle_state: impl Into<ToggleState>,
583 on_click: impl Fn(&ToggleState, &mut Window, &mut App) + 'static,
584 ) -> Self {
585 Self {
586 id: id.into(),
587 label: label.map(Into::into),
588 description,
589 toggle_state: toggle_state.into(),
590 on_click: Arc::new(on_click),
591 disabled: false,
592 color: SwitchColor::Accent,
593 tooltip: None,
594 tab_index: None,
595 }
596 }
597
598 pub fn description(mut self, description: impl Into<SharedString>) -> Self {
599 self.description = Some(description.into());
600 self
601 }
602
603 pub fn disabled(mut self, disabled: bool) -> Self {
604 self.disabled = disabled;
605 self
606 }
607
608 /// Sets the color of the switch using the specified [`SwitchColor`].
609 /// This changes the color scheme of the switch when it's in the "on" state.
610 pub fn color(mut self, color: SwitchColor) -> Self {
611 self.color = color;
612 self
613 }
614
615 pub fn tooltip(mut self, tooltip: impl Fn(&mut Window, &mut App) -> AnyView + 'static) -> Self {
616 self.tooltip = Some(Rc::new(tooltip));
617 self
618 }
619
620 pub fn tab_index(mut self, tab_index: isize) -> Self {
621 self.tab_index = Some(tab_index);
622 self
623 }
624}
625
626impl RenderOnce for SwitchField {
627 fn render(self, _window: &mut Window, _cx: &mut App) -> impl IntoElement {
628 let tooltip = self
629 .tooltip
630 .zip(self.label.clone())
631 .map(|(tooltip_fn, label)| {
632 h_flex().gap_0p5().child(Label::new(label)).child(
633 IconButton::new("tooltip_button", IconName::Info)
634 .icon_size(IconSize::XSmall)
635 .icon_color(Color::Muted)
636 .shape(crate::IconButtonShape::Square)
637 .style(ButtonStyle::Transparent)
638 .tooltip({
639 let tooltip = tooltip_fn.clone();
640 move |window, cx| tooltip(window, cx)
641 })
642 .on_click(|_, _, _| {}), // Intentional empty on click handler so that clicking on the info tooltip icon doesn't trigger the switch toggle
643 )
644 });
645
646 h_flex()
647 .id((self.id.clone(), "container"))
648 .when(!self.disabled, |this| {
649 this.hover(|this| this.cursor_pointer())
650 })
651 .w_full()
652 .gap_4()
653 .justify_between()
654 .flex_wrap()
655 .child(match (&self.description, tooltip) {
656 (Some(description), Some(tooltip)) => v_flex()
657 .gap_0p5()
658 .max_w_5_6()
659 .child(tooltip)
660 .child(Label::new(description.clone()).color(Color::Muted))
661 .into_any_element(),
662 (Some(description), None) => v_flex()
663 .gap_0p5()
664 .max_w_5_6()
665 .when_some(self.label, |this, label| this.child(Label::new(label)))
666 .child(Label::new(description.clone()).color(Color::Muted))
667 .into_any_element(),
668 (None, Some(tooltip)) => tooltip.into_any_element(),
669 (None, None) => {
670 if let Some(label) = self.label.clone() {
671 Label::new(label).into_any_element()
672 } else {
673 gpui::Empty.into_any_element()
674 }
675 }
676 })
677 .child(
678 Switch::new((self.id.clone(), "switch"), self.toggle_state)
679 .color(self.color)
680 .disabled(self.disabled)
681 .when_some(
682 self.tab_index.filter(|_| !self.disabled),
683 |this, tab_index| this.tab_index(tab_index),
684 )
685 .on_click({
686 let on_click = self.on_click.clone();
687 move |state, window, cx| {
688 (on_click)(state, window, cx);
689 }
690 }),
691 )
692 .when(!self.disabled, |this| {
693 this.on_click({
694 let on_click = self.on_click.clone();
695 let toggle_state = self.toggle_state;
696 move |_click, window, cx| {
697 (on_click)(&toggle_state.inverse(), window, cx);
698 }
699 })
700 })
701 }
702}
703
704impl Component for SwitchField {
705 fn scope() -> ComponentScope {
706 ComponentScope::Input
707 }
708
709 fn description() -> Option<&'static str> {
710 Some("A field component that combines a label, description, and switch")
711 }
712
713 fn preview(_window: &mut Window, _cx: &mut App) -> Option<AnyElement> {
714 Some(
715 v_flex()
716 .gap_6()
717 .children(vec![
718 example_group_with_title(
719 "States",
720 vec![
721 single_example(
722 "Unselected",
723 SwitchField::new(
724 "switch_field_unselected",
725 Some("Enable notifications"),
726 Some("Receive notifications when new messages arrive.".into()),
727 ToggleState::Unselected,
728 |_, _, _| {},
729 )
730 .into_any_element(),
731 ),
732 single_example(
733 "Selected",
734 SwitchField::new(
735 "switch_field_selected",
736 Some("Enable notifications"),
737 Some("Receive notifications when new messages arrive.".into()),
738 ToggleState::Selected,
739 |_, _, _| {},
740 )
741 .into_any_element(),
742 ),
743 ],
744 ),
745 example_group_with_title(
746 "Colors",
747 vec![
748 single_example(
749 "Default",
750 SwitchField::new(
751 "switch_field_default",
752 Some("Default color"),
753 Some("This uses the default switch color.".into()),
754 ToggleState::Selected,
755 |_, _, _| {},
756 )
757 .into_any_element(),
758 ),
759 single_example(
760 "Accent",
761 SwitchField::new(
762 "switch_field_accent",
763 Some("Accent color"),
764 Some("This uses the accent color scheme.".into()),
765 ToggleState::Selected,
766 |_, _, _| {},
767 )
768 .color(SwitchColor::Accent)
769 .into_any_element(),
770 ),
771 ],
772 ),
773 example_group_with_title(
774 "Disabled",
775 vec![single_example(
776 "Disabled",
777 SwitchField::new(
778 "switch_field_disabled",
779 Some("Disabled field"),
780 Some("This field is disabled and cannot be toggled.".into()),
781 ToggleState::Selected,
782 |_, _, _| {},
783 )
784 .disabled(true)
785 .into_any_element(),
786 )],
787 ),
788 example_group_with_title(
789 "No Description",
790 vec![single_example(
791 "No Description",
792 SwitchField::new(
793 "switch_field_disabled",
794 Some("Disabled field"),
795 None,
796 ToggleState::Selected,
797 |_, _, _| {},
798 )
799 .into_any_element(),
800 )],
801 ),
802 example_group_with_title(
803 "With Tooltip",
804 vec![
805 single_example(
806 "Tooltip with Description",
807 SwitchField::new(
808 "switch_field_tooltip_with_desc",
809 Some("Nice Feature"),
810 Some("Enable advanced configuration options.".into()),
811 ToggleState::Unselected,
812 |_, _, _| {},
813 )
814 .tooltip(Tooltip::text("This is content for this tooltip!"))
815 .into_any_element(),
816 ),
817 single_example(
818 "Tooltip without Description",
819 SwitchField::new(
820 "switch_field_tooltip_no_desc",
821 Some("Nice Feature"),
822 None,
823 ToggleState::Selected,
824 |_, _, _| {},
825 )
826 .tooltip(Tooltip::text("This is content for this tooltip!"))
827 .into_any_element(),
828 ),
829 ],
830 ),
831 ])
832 .into_any_element(),
833 )
834 }
835}
836
837impl Component for Checkbox {
838 fn scope() -> ComponentScope {
839 ComponentScope::Input
840 }
841
842 fn description() -> Option<&'static str> {
843 Some("A checkbox component that can be used for multiple choice selections")
844 }
845
846 fn preview(_window: &mut Window, _cx: &mut App) -> Option<AnyElement> {
847 Some(
848 v_flex()
849 .gap_6()
850 .children(vec![
851 example_group_with_title(
852 "States",
853 vec![
854 single_example(
855 "Unselected",
856 Checkbox::new("checkbox_unselected", ToggleState::Unselected)
857 .into_any_element(),
858 ),
859 single_example(
860 "Placeholder",
861 Checkbox::new("checkbox_indeterminate", ToggleState::Selected)
862 .placeholder(true)
863 .into_any_element(),
864 ),
865 single_example(
866 "Indeterminate",
867 Checkbox::new("checkbox_indeterminate", ToggleState::Indeterminate)
868 .into_any_element(),
869 ),
870 single_example(
871 "Selected",
872 Checkbox::new("checkbox_selected", ToggleState::Selected)
873 .into_any_element(),
874 ),
875 ],
876 ),
877 example_group_with_title(
878 "Styles",
879 vec![
880 single_example(
881 "Default",
882 Checkbox::new("checkbox_default", ToggleState::Selected)
883 .into_any_element(),
884 ),
885 single_example(
886 "Filled",
887 Checkbox::new("checkbox_filled", ToggleState::Selected)
888 .fill()
889 .into_any_element(),
890 ),
891 single_example(
892 "ElevationBased",
893 Checkbox::new("checkbox_elevation", ToggleState::Selected)
894 .style(ToggleStyle::ElevationBased(
895 ElevationIndex::EditorSurface,
896 ))
897 .into_any_element(),
898 ),
899 single_example(
900 "Custom Color",
901 Checkbox::new("checkbox_custom", ToggleState::Selected)
902 .style(ToggleStyle::Custom(hsla(142.0 / 360., 0.68, 0.45, 0.7)))
903 .into_any_element(),
904 ),
905 ],
906 ),
907 example_group_with_title(
908 "Disabled",
909 vec![
910 single_example(
911 "Unselected",
912 Checkbox::new(
913 "checkbox_disabled_unselected",
914 ToggleState::Unselected,
915 )
916 .disabled(true)
917 .into_any_element(),
918 ),
919 single_example(
920 "Selected",
921 Checkbox::new("checkbox_disabled_selected", ToggleState::Selected)
922 .disabled(true)
923 .into_any_element(),
924 ),
925 ],
926 ),
927 example_group_with_title(
928 "With Label",
929 vec![single_example(
930 "Default",
931 Checkbox::new("checkbox_with_label", ToggleState::Selected)
932 .label("Always save on quit")
933 .into_any_element(),
934 )],
935 ),
936 ])
937 .into_any_element(),
938 )
939 }
940}
941
942impl Component for Switch {
943 fn scope() -> ComponentScope {
944 ComponentScope::Input
945 }
946
947 fn description() -> Option<&'static str> {
948 Some("A switch component that represents binary states like on/off")
949 }
950
951 fn preview(_window: &mut Window, _cx: &mut App) -> Option<AnyElement> {
952 Some(
953 v_flex()
954 .gap_6()
955 .children(vec![
956 example_group_with_title(
957 "States",
958 vec![
959 single_example(
960 "Off",
961 Switch::new("switch_off", ToggleState::Unselected)
962 .on_click(|_, _, _cx| {})
963 .into_any_element(),
964 ),
965 single_example(
966 "On",
967 Switch::new("switch_on", ToggleState::Selected)
968 .on_click(|_, _, _cx| {})
969 .into_any_element(),
970 ),
971 ],
972 ),
973 example_group_with_title(
974 "Colors",
975 vec![
976 single_example(
977 "Default",
978 Switch::new("switch_default_style", ToggleState::Selected)
979 .color(SwitchColor::Default)
980 .on_click(|_, _, _cx| {})
981 .into_any_element(),
982 ),
983 single_example(
984 "Accent",
985 Switch::new("switch_accent_style", ToggleState::Selected)
986 .color(SwitchColor::Accent)
987 .on_click(|_, _, _cx| {})
988 .into_any_element(),
989 ),
990 single_example(
991 "Error",
992 Switch::new("switch_error_style", ToggleState::Selected)
993 .color(SwitchColor::Error)
994 .on_click(|_, _, _cx| {})
995 .into_any_element(),
996 ),
997 single_example(
998 "Warning",
999 Switch::new("switch_warning_style", ToggleState::Selected)
1000 .color(SwitchColor::Warning)
1001 .on_click(|_, _, _cx| {})
1002 .into_any_element(),
1003 ),
1004 single_example(
1005 "Success",
1006 Switch::new("switch_success_style", ToggleState::Selected)
1007 .color(SwitchColor::Success)
1008 .on_click(|_, _, _cx| {})
1009 .into_any_element(),
1010 ),
1011 single_example(
1012 "Custom",
1013 Switch::new("switch_custom_style", ToggleState::Selected)
1014 .color(SwitchColor::Custom(hsla(300.0 / 360.0, 0.6, 0.6, 1.0)))
1015 .on_click(|_, _, _cx| {})
1016 .into_any_element(),
1017 ),
1018 ],
1019 ),
1020 example_group_with_title(
1021 "Disabled",
1022 vec![
1023 single_example(
1024 "Off",
1025 Switch::new("switch_disabled_off", ToggleState::Unselected)
1026 .disabled(true)
1027 .into_any_element(),
1028 ),
1029 single_example(
1030 "On",
1031 Switch::new("switch_disabled_on", ToggleState::Selected)
1032 .disabled(true)
1033 .into_any_element(),
1034 ),
1035 ],
1036 ),
1037 example_group_with_title(
1038 "With Label",
1039 vec![
1040 single_example(
1041 "Start Label",
1042 Switch::new("switch_with_label_start", ToggleState::Selected)
1043 .label("Always save on quit")
1044 .label_position(SwitchLabelPosition::Start)
1045 .into_any_element(),
1046 ),
1047 single_example(
1048 "End Label",
1049 Switch::new("switch_with_label_end", ToggleState::Selected)
1050 .label("Always save on quit")
1051 .label_position(SwitchLabelPosition::End)
1052 .into_any_element(),
1053 ),
1054 single_example(
1055 "Default Size Label",
1056 Switch::new(
1057 "switch_with_label_default_size",
1058 ToggleState::Selected,
1059 )
1060 .label("Always save on quit")
1061 .label_size(LabelSize::Default)
1062 .into_any_element(),
1063 ),
1064 single_example(
1065 "Small Size Label",
1066 Switch::new("switch_with_label_small_size", ToggleState::Selected)
1067 .label("Always save on quit")
1068 .label_size(LabelSize::Small)
1069 .into_any_element(),
1070 ),
1071 ],
1072 ),
1073 example_group_with_title(
1074 "With Keybinding",
1075 vec![single_example(
1076 "Keybinding",
1077 Switch::new("switch_with_keybinding", ToggleState::Selected)
1078 .key_binding(Some(KeyBinding::from_keystrokes(
1079 vec![KeybindingKeystroke::from_keystroke(
1080 Keystroke::parse("cmd-s").unwrap(),
1081 )]
1082 .into(),
1083 KeybindSource::Base,
1084 )))
1085 .into_any_element(),
1086 )],
1087 ),
1088 ])
1089 .into_any_element(),
1090 )
1091 }
1092}