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