CheckboxWithLabel -> ToggleWithLabel

crates/assistant/src/inline_assistant.rs

@@ -56,7 +56,7 @@ use terminal_view::terminal_panel::TerminalPanel;
 use text::{OffsetRangeExt, ToPoint as _};
 use theme::ThemeSettings;
 use ui::{
-    prelude::*, text_for_action, CheckboxWithLabel, IconButtonShape, KeyBinding, Popover, Tooltip,
+    prelude::*, text_for_action, ToggleWithLabel, IconButtonShape, KeyBinding, Popover, Tooltip,
 };
 use util::{RangeExt, ResultExt};
 use workspace::{notifications::NotificationId, ItemHandle, Toast, Workspace};
@@ -2129,7 +2129,7 @@ impl PromptEditor {
                 .child(
                     h_flex()
                         .justify_between()
-                        .child(CheckboxWithLabel::new(
+                        .child(ToggleWithLabel::new(
                             "dont-show-again",
                             Label::new("Don't show again"),
                             if dismissed_rate_limit_notice() {

crates/assistant2/src/inline_assistant.rs

@@ -53,7 +53,7 @@ use telemetry_events::{AssistantEvent, AssistantKind, AssistantPhase};
 use terminal_view::{terminal_panel::TerminalPanel, TerminalView};
 use text::{OffsetRangeExt, ToPoint as _};
 use theme::ThemeSettings;
-use ui::{prelude::*, CheckboxWithLabel, IconButtonShape, KeyBinding, Popover, Tooltip};
+use ui::{prelude::*, ToggleWithLabel, IconButtonShape, KeyBinding, Popover, Tooltip};
 use util::{RangeExt, ResultExt};
 use workspace::{dock::Panel, ShowConfiguration};
 use workspace::{notifications::NotificationId, ItemHandle, Toast, Workspace};
@@ -2061,7 +2061,7 @@ impl PromptEditor {
                 .child(
                     h_flex()
                         .justify_between()
-                        .child(CheckboxWithLabel::new(
+                        .child(ToggleWithLabel::new(
                             "dont-show-again",
                             Label::new("Don't show again"),
                             if dismissed_rate_limit_notice() {

crates/assistant2/src/message_editor.rs

@@ -7,7 +7,7 @@ use language_model_selector::{LanguageModelSelector, LanguageModelSelectorPopove
 use settings::Settings;
 use theme::ThemeSettings;
 use ui::{
-    prelude::*, ButtonLike, CheckboxWithLabel, ElevationIndex, IconButtonShape, KeyBinding,
+    prelude::*, ButtonLike, ToggleWithLabel, ElevationIndex, IconButtonShape, KeyBinding,
     PopoverMenu, PopoverMenuHandle, Tooltip,
 };
 use workspace::Workspace;
@@ -262,7 +262,7 @@ impl Render for MessageEditor {
             .child(
                 h_flex()
                     .justify_between()
-                    .child(h_flex().gap_2().child(CheckboxWithLabel::new(
+                    .child(h_flex().gap_2().child(ToggleWithLabel::new(
                         "use-tools",
                         Label::new("Tools"),
                         self.use_tools.into(),

crates/collab_ui/src/collab_panel/channel_modal.rs

@@ -11,7 +11,7 @@ use gpui::{
 };
 use picker::{Picker, PickerDelegate};
 use std::sync::Arc;
-use ui::{prelude::*, Avatar, CheckboxWithLabel, ContextMenu, ListItem, ListItemSpacing};
+use ui::{prelude::*, Avatar, ToggleWithLabel, ContextMenu, ListItem, ListItemSpacing};
 use util::TryFutureExt;
 use workspace::{notifications::DetachAndPromptErr, ModalView};
 
@@ -155,7 +155,7 @@ impl Render for ChannelModal {
                             .h(rems_from_px(22.))
                             .justify_between()
                             .line_height(rems(1.25))
-                            .child(CheckboxWithLabel::new(
+                            .child(ToggleWithLabel::new(
                                 "is-public",
                                 Label::new("Public").size(LabelSize::Small),
                                 if visibility == ChannelVisibility::Public {

crates/editor/src/editor_settings_controls.rs

@@ -5,7 +5,7 @@ use project::project_settings::{InlineBlameSettings, ProjectSettings};
 use settings::{EditableSettingControl, Settings};
 use theme::{FontFamilyCache, ThemeSettings};
 use ui::{
-    prelude::*, CheckboxWithLabel, ContextMenu, DropdownMenu, NumericStepper, SettingsContainer,
+    prelude::*, ToggleWithLabel, ContextMenu, DropdownMenu, NumericStepper, SettingsContainer,
     SettingsGroup,
 };
 
@@ -258,7 +258,7 @@ impl RenderOnce for BufferFontLigaturesControl {
     fn render(self, cx: &mut WindowContext) -> impl IntoElement {
         let value = Self::read(cx);
 
-        CheckboxWithLabel::new(
+        ToggleWithLabel::new(
             "buffer-font-ligatures",
             Label::new(self.name()),
             value.into(),
@@ -311,7 +311,7 @@ impl RenderOnce for InlineGitBlameControl {
     fn render(self, cx: &mut WindowContext) -> impl IntoElement {
         let value = Self::read(cx);
 
-        CheckboxWithLabel::new(
+        ToggleWithLabel::new(
             "inline-git-blame",
             Label::new(self.name()),
             value.into(),
@@ -364,7 +364,7 @@ impl RenderOnce for LineNumbersControl {
     fn render(self, cx: &mut WindowContext) -> impl IntoElement {
         let value = Self::read(cx);
 
-        CheckboxWithLabel::new(
+        ToggleWithLabel::new(
             "line-numbers",
             Label::new(self.name()),
             value.into(),

crates/extensions_ui/src/extensions_ui.rs

@@ -23,7 +23,7 @@ use project::DirectoryLister;
 use release_channel::ReleaseChannel;
 use settings::Settings;
 use theme::ThemeSettings;
-use ui::{prelude::*, CheckboxWithLabel, ContextMenu, PopoverMenu, ToggleButton, Tooltip};
+use ui::{prelude::*, ToggleWithLabel, ContextMenu, PopoverMenu, ToggleButton, Tooltip};
 use vim_mode_setting::VimModeSetting;
 use workspace::{
     item::{Item, ItemEvent},
@@ -994,7 +994,7 @@ impl ExtensionsPage {
                 .docs_url("https://zed.dev/docs/git#git-integrations"),
                 Feature::Vim => FeatureUpsell::new(telemetry, "Vim support is built-in to Zed!")
                     .docs_url("https://zed.dev/docs/vim")
-                    .child(CheckboxWithLabel::new(
+                    .child(ToggleWithLabel::new(
                         "enable-vim",
                         Label::new("Enable vim mode"),
                         if VimModeSetting::get_global(cx).0 {

crates/settings_ui/src/appearance_settings_controls.rs

@@ -4,7 +4,7 @@ use gpui::{AppContext, FontFeatures, FontWeight};
 use settings::{EditableSettingControl, Settings};
 use theme::{FontFamilyCache, SystemAppearance, ThemeMode, ThemeRegistry, ThemeSettings};
 use ui::{
-    prelude::*, CheckboxWithLabel, ContextMenu, DropdownMenu, NumericStepper, SettingsContainer,
+    prelude::*, ToggleWithLabel, ContextMenu, DropdownMenu, NumericStepper, SettingsContainer,
     SettingsGroup, ToggleButton,
 };
 
@@ -368,7 +368,7 @@ impl RenderOnce for UiFontLigaturesControl {
     fn render(self, cx: &mut WindowContext) -> impl IntoElement {
         let value = Self::read(cx);
 
-        CheckboxWithLabel::new(
+        ToggleWithLabel::new(
             "ui-font-ligatures",
             Label::new(self.name()),
             value.into(),

crates/ui/src/components/toggle.rs

@@ -17,6 +17,38 @@ pub fn switch(id: impl Into<ElementId>, toggle_state: ToggleState) -> Switch {
     Switch::new(id, toggle_state)
 }
 
+/// Creates a new checkbox with a label
+///
+/// [`ToggleWithLabel`] with [`ToggleKind::Checkbox`]
+pub fn labeled_checkbox(
+    id: impl Into<ElementId>,
+    label: Label,
+    toggle_state: ToggleState,
+    on_click: impl Fn(&ToggleState, &mut WindowContext) + 'static,
+) -> ToggleWithLabel {
+    ToggleWithLabel::new(id, label, toggle_state, on_click).kind(ToggleKind::Checkbox)
+}
+
+/// Creates a new switch with a label
+///
+/// [`ToggleWithLabel`] with [`ToggleKind::Switch`]
+pub fn labeled_switch(
+    id: impl Into<ElementId>,
+    label: Label,
+    toggle_state: ToggleState,
+    on_click: impl Fn(&ToggleState, &mut WindowContext) + 'static,
+) -> ToggleWithLabel {
+    ToggleWithLabel::new(id, label, toggle_state, on_click).kind(ToggleKind::Switch)
+}
+
+/// The types of toggles, defaulting to [`Checkbox`]
+#[derive(Debug, Default, Clone, Copy, PartialEq, Eq, Hash)]
+pub enum ToggleKind {
+    #[default]
+    Checkbox,
+    Switch,
+}
+
 /// # Checkbox
 ///
 /// Checkboxes are used for multiple choices, not for mutually exclusive choices.
@@ -132,14 +164,15 @@ impl RenderOnce for Checkbox {
 
 /// A [`Checkbox`] that has a [`Label`].
 #[derive(IntoElement)]
-pub struct CheckboxWithLabel {
+pub struct ToggleWithLabel {
     id: ElementId,
     label: Label,
+    kind: ToggleKind,
     checked: ToggleState,
     on_click: Arc<dyn Fn(&ToggleState, &mut WindowContext) + 'static>,
 }
 
-impl CheckboxWithLabel {
+impl ToggleWithLabel {
     pub fn new(
         id: impl Into<ElementId>,
         label: Label,
@@ -149,22 +182,38 @@ impl CheckboxWithLabel {
         Self {
             id: id.into(),
             label,
+            kind: ToggleKind::default(),
             checked,
             on_click: Arc::new(on_click),
         }
     }
+
+    pub fn kind(mut self, kind: ToggleKind) -> Self {
+        self.kind = kind;
+        self
+    }
 }
 
-impl RenderOnce for CheckboxWithLabel {
+impl RenderOnce for ToggleWithLabel {
     fn render(self, cx: &mut WindowContext) -> impl IntoElement {
         h_flex()
             .gap(DynamicSpacing::Base08.rems(cx))
-            .child(Checkbox::new(self.id.clone(), self.checked).on_click({
-                let on_click = self.on_click.clone();
-                move |checked, cx| {
-                    (on_click)(checked, cx);
-                }
-            }))
+            .when(self.kind == ToggleKind::Checkbox, |this| {
+                this.child(Checkbox::new(self.id.clone(), self.checked).on_click({
+                    let on_click = self.on_click.clone();
+                    move |checked, cx| {
+                        (on_click)(checked, cx);
+                    }
+                }))
+            })
+            .when(self.kind == ToggleKind::Switch, |this| {
+                this.child(Switch::new(self.id.clone(), self.checked).on_click({
+                    let on_click = self.on_click.clone();
+                    move |checked, cx| {
+                        (on_click)(checked, cx);
+                    }
+                }))
+            })
             .child(
                 div()
                     .id(SharedString::from(format!("{}-label", self.id)))
@@ -370,40 +419,70 @@ impl ComponentPreview for Switch {
     }
 }
 
-impl ComponentPreview for CheckboxWithLabel {
+impl ComponentPreview for ToggleWithLabel {
     fn description() -> impl Into<Option<&'static str>> {
-        "A checkbox with an associated label, allowing users to select an option while providing a descriptive text."
+        "A toggle with an associated label, allowing users to select an option while providing a descriptive text. By default, the toggle is presented as a checkbox, but can also render a switch."
     }
 
     fn examples(_: &mut WindowContext) -> Vec<ComponentExampleGroup<Self>> {
-        vec![example_group(vec![
-            single_example(
-                "Unselected",
-                CheckboxWithLabel::new(
-                    "checkbox_with_label_unselected",
-                    Label::new("Always save on quit"),
-                    ToggleState::Unselected,
-                    |_, _| {},
-                ),
+        vec![
+            example_group_with_title(
+                "Checkbox",
+                vec![
+                    single_example(
+                        "Unselected",
+                        ToggleWithLabel::new(
+                            "checkbox_with_label_unselected",
+                            Label::new("Always save on quit"),
+                            ToggleState::Unselected,
+                            |_, _| {},
+                        ),
+                    ),
+                    single_example(
+                        "Indeterminate",
+                        ToggleWithLabel::new(
+                            "checkbox_with_label_indeterminate",
+                            Label::new("Always save on quit"),
+                            ToggleState::Indeterminate,
+                            |_, _| {},
+                        ),
+                    ),
+                    single_example(
+                        "Selected",
+                        ToggleWithLabel::new(
+                            "checkbox_with_label_selected",
+                            Label::new("Always save on quit"),
+                            ToggleState::Selected,
+                            |_, _| {},
+                        ),
+                    ),
+                ],
             ),
-            single_example(
-                "Indeterminate",
-                CheckboxWithLabel::new(
-                    "checkbox_with_label_indeterminate",
-                    Label::new("Always save on quit"),
-                    ToggleState::Indeterminate,
-                    |_, _| {},
-                ),
+            example_group_with_title(
+                "Switch",
+                vec![
+                    single_example(
+                        "Off",
+                        ToggleWithLabel::new(
+                            "switch_with_label_off",
+                            Label::new("Dark mode"),
+                            ToggleState::Unselected,
+                            |_, _| {},
+                        )
+                        .kind(ToggleKind::Switch),
+                    ),
+                    single_example(
+                        "On",
+                        ToggleWithLabel::new(
+                            "switch_with_label_on",
+                            Label::new("Dark mode"),
+                            ToggleState::Selected,
+                            |_, _| {},
+                        )
+                        .kind(ToggleKind::Switch),
+                    ),
+                ],
             ),
-            single_example(
-                "Selected",
-                CheckboxWithLabel::new(
-                    "checkbox_with_label_selected",
-                    Label::new("Always save on quit"),
-                    ToggleState::Selected,
-                    |_, _| {},
-                ),
-            ),
-        ])]
+        ]
     }
 }

crates/welcome/src/welcome.rs

@@ -11,7 +11,7 @@ use gpui::{
 };
 use settings::{Settings, SettingsStore};
 use std::sync::Arc;
-use ui::{prelude::*, CheckboxWithLabel, Tooltip};
+use ui::{labeled_checkbox, prelude::*, Tooltip};
 use vim_mode_setting::VimModeSetting;
 use workspace::{
     dock::DockPosition,
@@ -269,24 +269,26 @@ impl Render for WelcomePage {
                             .child(
                                 h_flex()
                                     .justify_between()
-                                    .child(CheckboxWithLabel::new(
-                                        "enable-vim",
-                                        Label::new("Enable Vim Mode"),
-                                        if VimModeSetting::get_global(cx).0 {
-                                            ui::ToggleState::Selected
-                                        } else {
-                                            ui::ToggleState::Unselected
-                                        },
-                                        cx.listener(move |this, selection, cx| {
-                                            this.telemetry
-                                                .report_app_event("welcome page: toggle vim".to_string());
-                                            this.update_settings::<VimModeSetting>(
-                                                selection,
-                                                cx,
-                                                |setting, value| *setting = Some(value),
-                                            );
-                                        }),
-                                    ))
+                                    .child(
+                                        labeled_checkbox(
+                                            "enable-vim",
+                                            Label::new("Enable Vim Mode"),
+                                            if VimModeSetting::get_global(cx).0 {
+                                                ui::ToggleState::Selected
+                                            } else {
+                                                ui::ToggleState::Unselected
+                                            },
+                                            cx.listener(move |this, selection, cx| {
+                                                this.telemetry
+                                                    .report_app_event("welcome page: toggle vim".to_string());
+                                                this.update_settings::<VimModeSetting>(
+                                                    selection,
+                                                    cx,
+                                                    |setting, value| *setting = Some(value),
+                                                );
+                                            })
+                                        )
+                                    )
                                     .child(
                                         IconButton::new("vim-mode", IconName::Info)
                                             .icon_size(IconSize::XSmall)
@@ -294,58 +296,62 @@ impl Render for WelcomePage {
                                             .tooltip(|cx| Tooltip::text("You can also toggle Vim Mode via the command palette or Editor Controls menu.", cx)),
                                     )
                             )
-                            .child(CheckboxWithLabel::new(
-                                "enable-crash",
-                                Label::new("Send Crash Reports"),
-                                if TelemetrySettings::get_global(cx).diagnostics {
-                                    ui::ToggleState::Selected
-                                } else {
-                                    ui::ToggleState::Unselected
-                                },
-                                cx.listener(move |this, selection, cx| {
-                                    this.telemetry.report_app_event(
-                                        "welcome page: toggle diagnostic telemetry".to_string(),
-                                    );
-                                    this.update_settings::<TelemetrySettings>(selection, cx, {
-                                        let telemetry = this.telemetry.clone();
+                            .child(
+                                labeled_checkbox(
+                                    "enable-crash",
+                                    Label::new("Send Crash Reports"),
+                                    if TelemetrySettings::get_global(cx).diagnostics {
+                                        ui::ToggleState::Selected
+                                    } else {
+                                        ui::ToggleState::Unselected
+                                    },
+                                    cx.listener(move |this, selection, cx| {
+                                        this.telemetry.report_app_event(
+                                            "welcome page: toggle diagnostic telemetry".to_string(),
+                                        );
+                                        this.update_settings::<TelemetrySettings>(selection, cx, {
+                                            let telemetry = this.telemetry.clone();
 
-                                        move |settings, value| {
-                                            settings.diagnostics = Some(value);
+                                            move |settings, value| {
+                                                settings.diagnostics = Some(value);
 
-                                            telemetry.report_setting_event(
-                                                "diagnostic telemetry",
-                                                value.to_string(),
-                                            );
-                                        }
-                                    });
-                                }),
-                            ))
-                            .child(CheckboxWithLabel::new(
-                                "enable-telemetry",
-                                Label::new("Send Telemetry"),
-                                if TelemetrySettings::get_global(cx).metrics {
-                                    ui::ToggleState::Selected
-                                } else {
-                                    ui::ToggleState::Unselected
-                                },
-                                cx.listener(move |this, selection, cx| {
-                                    this.telemetry.report_app_event(
-                                        "welcome page: toggle metric telemetry".to_string(),
-                                    );
-                                    this.update_settings::<TelemetrySettings>(selection, cx, {
-                                        let telemetry = this.telemetry.clone();
+                                                telemetry.report_setting_event(
+                                                    "diagnostic telemetry",
+                                                    value.to_string(),
+                                                );
+                                            }
+                                        });
+                                    })
+                                )
+                            )
+                            .child(
+                                labeled_checkbox(
+                                    "enable-telemetry",
+                                    Label::new("Send Telemetry"),
+                                    if TelemetrySettings::get_global(cx).metrics {
+                                        ui::ToggleState::Selected
+                                    } else {
+                                        ui::ToggleState::Unselected
+                                    },
+                                    cx.listener(move |this, selection, cx| {
+                                        this.telemetry.report_app_event(
+                                            "welcome page: toggle metric telemetry".to_string(),
+                                        );
+                                        this.update_settings::<TelemetrySettings>(selection, cx, {
+                                            let telemetry = this.telemetry.clone();
 
-                                        move |settings, value| {
-                                            settings.metrics = Some(value);
+                                            move |settings, value| {
+                                                settings.metrics = Some(value);
 
-                                            telemetry.report_setting_event(
-                                                "metric telemetry",
-                                                value.to_string(),
-                                            );
-                                        }
-                                    });
-                                }),
-                            )),
+                                                telemetry.report_setting_event(
+                                                    "metric telemetry",
+                                                    value.to_string(),
+                                                );
+                                            }
+                                        });
+                                    })
+                                )
+                            ),
                     ),
             )
     }

crates/workspace/src/theme_preview.rs

@@ -5,8 +5,8 @@ use theme::all_theme_colors;
 use ui::{
     element_cell, prelude::*, string_cell, utils::calculate_contrast_ratio, AudioStatus,
     Availability, Avatar, AvatarAudioStatusIndicator, AvatarAvailabilityIndicator, ButtonLike,
-    Checkbox, CheckboxWithLabel, ContentGroup, DecoratedIcon, ElevationIndex, Facepile,
-    IconDecoration, Indicator, Switch, Table, TintColor, Tooltip,
+    Checkbox, ContentGroup, DecoratedIcon, ElevationIndex, Facepile, IconDecoration, Indicator,
+    Switch, Table, TintColor, ToggleWithLabel, Tooltip,
 };
 
 use crate::{Item, Workspace};
@@ -369,12 +369,12 @@ impl ThemePreview {
             .overflow_scroll()
             .size_full()
             .gap_2()
-            .child(Switch::render_component_previews(cx))
             .child(ContentGroup::render_component_previews(cx))
             .child(IconDecoration::render_component_previews(cx))
             .child(DecoratedIcon::render_component_previews(cx))
             .child(Checkbox::render_component_previews(cx))
-            .child(CheckboxWithLabel::render_component_previews(cx))
+            .child(Switch::render_component_previews(cx))
+            .child(ToggleWithLabel::render_component_previews(cx))
             .child(Facepile::render_component_previews(cx))
             .child(Button::render_component_previews(cx))
             .child(Indicator::render_component_previews(cx))