Merge pull request #535 from Kaiden42/toggler

Implement `Toggler` widget for iced_native

examples/styling/src/main.rs

@@ -1,7 +1,7 @@
 use iced::{
     button, scrollable, slider, text_input, Align, Button, Checkbox, Column,
     Container, Element, Length, ProgressBar, Radio, Row, Rule, Sandbox,
-    Scrollable, Settings, Slider, Space, Text, TextInput,
+    Scrollable, Settings, Slider, Space, Text, TextInput, Toggler,
 };
 
 pub fn main() -> iced::Result {
@@ -17,7 +17,8 @@ struct Styling {
     button: button::State,
     slider: slider::State,
     slider_value: f32,
-    toggle_value: bool,
+    checkbox_value: bool,
+    toggler_value: bool,
 }
 
 #[derive(Debug, Clone)]
@@ -27,6 +28,7 @@ enum Message {
     ButtonPressed,
     SliderChanged(f32),
     CheckboxToggled(bool),
+    TogglerToggled(bool),
 }
 
 impl Sandbox for Styling {
@@ -46,7 +48,8 @@ impl Sandbox for Styling {
             Message::InputChanged(value) => self.input_value = value,
             Message::ButtonPressed => {}
             Message::SliderChanged(value) => self.slider_value = value,
-            Message::CheckboxToggled(value) => self.toggle_value = value,
+            Message::CheckboxToggled(value) => self.checkbox_value = value,
+            Message::TogglerToggled(value) => self.toggler_value = value,
         }
     }
 
@@ -101,11 +104,19 @@ impl Sandbox for Styling {
             .push(Text::new("You did it!"));
 
         let checkbox = Checkbox::new(
-            self.toggle_value,
+            self.checkbox_value,
-            "Toggle me!",
+            "Check me!",
             Message::CheckboxToggled,
         )
-        .width(Length::Fill)
+        .style(self.theme);
+
+        let toggler = Toggler::new(
+            self.toggler_value,
+            String::from("Toggle me!"),
+            Message::TogglerToggled,
+        )
+        .width(Length::Shrink)
+        .spacing(10)
         .style(self.theme);
 
         let content = Column::new()
@@ -124,7 +135,13 @@ impl Sandbox for Styling {
                     .align_items(Align::Center)
                     .push(scrollable)
                     .push(Rule::vertical(38).style(self.theme))
-                    .push(checkbox),
+                    .push(
+                        Column::new()
+                            .width(Length::Shrink)
+                            .spacing(20)
+                            .push(checkbox)
+                            .push(toggler),
+                    ),
             );
 
         Container::new(content)
@@ -140,7 +157,7 @@ impl Sandbox for Styling {
 mod style {
     use iced::{
         button, checkbox, container, progress_bar, radio, rule, scrollable,
-        slider, text_input,
+        slider, text_input, toggler,
     };
 
     #[derive(Debug, Clone, Copy, PartialEq, Eq)]
@@ -231,6 +248,15 @@ mod style {
         }
     }
 
+    impl From<Theme> for Box<dyn toggler::StyleSheet> {
+        fn from(theme: Theme) -> Self {
+            match theme {
+                Theme::Light => Default::default(),
+                Theme::Dark => dark::Toggler.into(),
+            }
+        }
+    }
+
     impl From<Theme> for Box<dyn rule::StyleSheet> {
         fn from(theme: Theme) -> Self {
             match theme {
@@ -269,7 +295,7 @@ mod style {
     mod dark {
         use iced::{
             button, checkbox, container, progress_bar, radio, rule, scrollable,
-            slider, text_input, Color,
+            slider, text_input, toggler, Color,
         };
 
         const SURFACE: Color = Color::from_rgb(
@@ -520,6 +546,35 @@ mod style {
             }
         }
 
+        pub struct Toggler;
+
+        impl toggler::StyleSheet for Toggler {
+            fn active(&self, is_active: bool) -> toggler::Style {
+                toggler::Style {
+                    background: if is_active { ACTIVE } else { SURFACE },
+                    background_border: None,
+                    foreground: if is_active { Color::WHITE } else { ACTIVE },
+                    foreground_border: None,
+                }
+            }
+
+            fn hovered(&self, is_active: bool) -> toggler::Style {
+                toggler::Style {
+                    background: if is_active { ACTIVE } else { SURFACE },
+                    background_border: None,
+                    foreground: if is_active {
+                        Color {
+                            a: 0.5,
+                            ..Color::WHITE
+                        }
+                    } else {
+                        Color { a: 0.5, ..ACTIVE }
+                    },
+                    foreground_border: None,
+                }
+            }
+        }
+
         pub struct Rule;
 
         impl rule::StyleSheet for Rule {

examples/tour/src/main.rs

@@ -1,7 +1,7 @@
 use iced::{
     button, scrollable, slider, text_input, Button, Checkbox, Color, Column,
     Container, Element, HorizontalAlignment, Image, Length, Radio, Row,
-    Sandbox, Scrollable, Settings, Slider, Space, Text, TextInput,
+    Sandbox, Scrollable, Settings, Slider, Space, Text, TextInput, Toggler,
 };
 
 pub fn main() -> iced::Result {
@@ -135,6 +135,9 @@ impl Steps {
                     color: Color::BLACK,
                 },
                 Step::Radio { selection: None },
+                Step::Toggler {
+                    can_continue: false,
+                },
                 Step::Image {
                     width: 300,
                     slider: slider::State::new(),
@@ -206,6 +209,9 @@ enum Step {
     Radio {
         selection: Option<Language>,
     },
+    Toggler {
+        can_continue: bool,
+    },
     Image {
         width: u16,
         slider: slider::State,
@@ -232,6 +238,7 @@ pub enum StepMessage {
     InputChanged(String),
     ToggleSecureInput(bool),
     DebugToggled(bool),
+    TogglerChanged(bool),
 }
 
 impl<'a> Step {
@@ -287,6 +294,11 @@ impl<'a> Step {
                     *is_secure = toggle;
                 }
             }
+            StepMessage::TogglerChanged(value) => {
+                if let Step::Toggler { can_continue, .. } = self {
+                    *can_continue = value;
+                }
+            }
         };
     }
 
@@ -294,6 +306,7 @@ impl<'a> Step {
         match self {
             Step::Welcome => "Welcome",
             Step::Radio { .. } => "Radio button",
+            Step::Toggler { .. } => "Toggler",
             Step::Slider { .. } => "Slider",
             Step::Text { .. } => "Text",
             Step::Image { .. } => "Image",
@@ -309,6 +322,7 @@ impl<'a> Step {
         match self {
             Step::Welcome => true,
             Step::Radio { selection } => *selection == Some(Language::Rust),
+            Step::Toggler { can_continue } => *can_continue,
             Step::Slider { .. } => true,
             Step::Text { .. } => true,
             Step::Image { .. } => true,
@@ -324,6 +338,7 @@ impl<'a> Step {
         match self {
             Step::Welcome => Self::welcome(),
             Step::Radio { selection } => Self::radio(*selection),
+            Step::Toggler { can_continue } => Self::toggler(*can_continue),
             Step::Slider { state, value } => Self::slider(state, *value),
             Step::Text {
                 size_slider,
@@ -545,6 +560,21 @@ impl<'a> Step {
             ))
     }
 
+    fn toggler(can_continue: bool) -> Column<'a, StepMessage> {
+        Self::container("Toggler")
+            .push(Text::new(
+                "A toggler is mostly used to enable or disable something.",
+            ))
+            .push(
+                Container::new(Toggler::new(
+                    can_continue,
+                    String::from("Toggle me to continue..."),
+                    StepMessage::TogglerChanged,
+                ))
+                .padding([0, 40]),
+            )
+    }
+
     fn image(
         width: u16,
         slider: &'a mut slider::State,

glow/src/widget.rs

@@ -20,6 +20,7 @@ pub mod rule;
 pub mod scrollable;
 pub mod slider;
 pub mod text_input;
+pub mod toggler;
 pub mod tooltip;
 
 #[doc(no_inline)]
@@ -45,6 +46,8 @@ pub use slider::Slider;
 #[doc(no_inline)]
 pub use text_input::TextInput;
 #[doc(no_inline)]
+pub use toggler::Toggler;
+#[doc(no_inline)]
 pub use tooltip::Tooltip;
 
 #[cfg(feature = "canvas")]

glow/src/widget/toggler.rs

@@ -0,0 +1,9 @@
+//! Show toggle controls using togglers.
+use crate::Renderer;
+
+pub use iced_graphics::toggler::{Style, StyleSheet};
+
+/// A toggler that can be toggled.
+///
+/// This is an alias of an `iced_native` checkbox with an `iced_wgpu::Renderer`.
+pub type Toggler<Message> = iced_native::Toggler<Message, Renderer>;

graphics/src/widget.rs

@@ -20,6 +20,7 @@ pub mod scrollable;
 pub mod slider;
 pub mod svg;
 pub mod text_input;
+pub mod toggler;
 pub mod tooltip;
 
 mod column;
@@ -50,6 +51,8 @@ pub use slider::Slider;
 #[doc(no_inline)]
 pub use text_input::TextInput;
 #[doc(no_inline)]
+pub use toggler::Toggler;
+#[doc(no_inline)]
 pub use tooltip::Tooltip;
 
 pub use column::Column;

graphics/src/widget/toggler.rs

@@ -0,0 +1,99 @@
+//! Show toggle controls using togglers.
+use crate::backend::{self, Backend};
+use crate::{Primitive, Renderer};
+use iced_native::mouse;
+use iced_native::toggler;
+use iced_native::Rectangle;
+
+pub use iced_style::toggler::{Style, StyleSheet};
+
+/// Makes sure that the border radius of the toggler looks good at every size.
+const BORDER_RADIUS_RATIO: f32 = 32.0 / 13.0;
+
+/// The space ratio between the background Quad and the Toggler bounds, and
+/// between the background Quad and foreground Quad.
+const SPACE_RATIO: f32 = 0.05;
+
+/// A toggler that can be toggled.
+///
+/// This is an alias of an `iced_native` toggler with an `iced_wgpu::Renderer`.
+pub type Toggler<Message, Backend> =
+    iced_native::Toggler<Message, Renderer<Backend>>;
+
+impl<B> toggler::Renderer for Renderer<B>
+where
+    B: Backend + backend::Text,
+{
+    type Style = Box<dyn StyleSheet>;
+
+    const DEFAULT_SIZE: u16 = 20;
+
+    fn draw(
+        &mut self,
+        bounds: Rectangle,
+        is_active: bool,
+        is_mouse_over: bool,
+        label: Option<Self::Output>,
+        style_sheet: &Self::Style,
+    ) -> Self::Output {
+        let style = if is_mouse_over {
+            style_sheet.hovered(is_active)
+        } else {
+            style_sheet.active(is_active)
+        };
+
+        let border_radius = bounds.height as f32 / BORDER_RADIUS_RATIO;
+        let space = SPACE_RATIO * bounds.height as f32;
+
+        let toggler_background_bounds = Rectangle {
+            x: bounds.x + space,
+            y: bounds.y + space,
+            width: bounds.width - (2.0 * space),
+            height: bounds.height - (2.0 * space),
+        };
+
+        let toggler_background = Primitive::Quad {
+            bounds: toggler_background_bounds,
+            background: style.background.into(),
+            border_radius,
+            border_width: 1.0,
+            border_color: style.background_border.unwrap_or(style.background),
+        };
+
+        let toggler_foreground_bounds = Rectangle {
+            x: bounds.x
+                + if is_active {
+                    bounds.width - 2.0 * space - (bounds.height - (4.0 * space))
+                } else {
+                    2.0 * space
+                },
+            y: bounds.y + (2.0 * space),
+            width: bounds.height - (4.0 * space),
+            height: bounds.height - (4.0 * space),
+        };
+
+        let toggler_foreground = Primitive::Quad {
+            bounds: toggler_foreground_bounds,
+            background: style.foreground.into(),
+            border_radius,
+            border_width: 1.0,
+            border_color: style.foreground_border.unwrap_or(style.foreground),
+        };
+
+        (
+            Primitive::Group {
+                primitives: match label {
+                    Some((l, _)) => {
+                        vec![l, toggler_background, toggler_foreground]
+                    }
+                    None => vec![toggler_background, toggler_foreground],
+                },
+            },
+            if is_mouse_over {
+                mouse::Interaction::Pointer
+            } else {
+                mouse::Interaction::default()
+            },
+        )
+    }
+}

native/src/renderer/null.rs

@@ -1,6 +1,6 @@
 use crate::{
     button, checkbox, column, container, pane_grid, progress_bar, radio, row,
-    scrollable, slider, text, text_input, Color, Element, Font,
+    scrollable, slider, text, text_input, toggler, Color, Element, Font,
     HorizontalAlignment, Layout, Padding, Point, Rectangle, Renderer, Size,
     VerticalAlignment,
 };
@@ -288,3 +288,19 @@ impl pane_grid::Renderer for Null {
     ) {
     }
 }
+
+impl toggler::Renderer for Null {
+    type Style = ();
+
+    const DEFAULT_SIZE: u16 = 20;
+
+    fn draw(
+        &mut self,
+        _bounds: Rectangle,
+        _is_checked: bool,
+        _is_mouse_over: bool,
+        _label: Option<Self::Output>,
+        _style: &Self::Style,
+    ) {
+    }
+}

native/src/widget.rs

@@ -36,6 +36,7 @@ pub mod space;
 pub mod svg;
 pub mod text;
 pub mod text_input;
+pub mod toggler;
 pub mod tooltip;
 
 #[doc(no_inline)]
@@ -73,6 +74,8 @@ pub use text::Text;
 #[doc(no_inline)]
 pub use text_input::TextInput;
 #[doc(no_inline)]
+pub use toggler::Toggler;
+#[doc(no_inline)]
 pub use tooltip::Tooltip;
 
 use crate::event::{self, Event};

native/src/widget/toggler.rs

@@ -0,0 +1,277 @@
+//! Show toggle controls using togglers.
+use std::hash::Hash;
+
+use crate::{
+    event, layout, mouse, row, text, Align, Clipboard, Element, Event, Hasher,
+    HorizontalAlignment, Layout, Length, Point, Rectangle, Row, Text,
+    VerticalAlignment, Widget,
+};
+
+/// A toggler widget
+///
+/// # Example
+///
+/// ```
+/// # type Toggler<Message> = iced_native::Toggler<Message, iced_native::renderer::Null>;
+/// #
+/// pub enum Message {
+///     TogglerToggled(bool),
+/// }
+///
+/// let is_active = true;
+///
+/// Toggler::new(is_active, String::from("Toggle me!"), |b| Message::TogglerToggled(b));
+/// ```
+#[allow(missing_debug_implementations)]
+pub struct Toggler<Message, Renderer: self::Renderer + text::Renderer> {
+    is_active: bool,
+    on_toggle: Box<dyn Fn(bool) -> Message>,
+    label: Option<String>,
+    width: Length,
+    size: u16,
+    text_size: Option<u16>,
+    text_alignment: HorizontalAlignment,
+    spacing: u16,
+    font: Renderer::Font,
+    style: Renderer::Style,
+}
+
+impl<Message, Renderer: self::Renderer + text::Renderer>
+    Toggler<Message, Renderer>
+{
+    /// Creates a new [`Toggler`].
+    ///
+    /// It expects:
+    ///   * a boolean describing whether the [`Toggler`] is checked or not
+    ///   * An optional label for the [`Toggler`]
+    ///   * a function that will be called when the [`Toggler`] is toggled. It
+    ///     will receive the new state of the [`Toggler`] and must produce a
+    ///     `Message`.
+    pub fn new<F>(
+        is_active: bool,
+        label: impl Into<Option<String>>,
+        f: F,
+    ) -> Self
+    where
+        F: 'static + Fn(bool) -> Message,
+    {
+        Toggler {
+            is_active,
+            on_toggle: Box::new(f),
+            label: label.into(),
+            width: Length::Fill,
+            size: <Renderer as self::Renderer>::DEFAULT_SIZE,
+            text_size: None,
+            text_alignment: HorizontalAlignment::Left,
+            spacing: 0,
+            font: Renderer::Font::default(),
+            style: Renderer::Style::default(),
+        }
+    }
+
+    /// Sets the size of the [`Toggler`].
+    pub fn size(mut self, size: u16) -> Self {
+        self.size = size;
+        self
+    }
+
+    /// Sets the width of the [`Toggler`].
+    pub fn width(mut self, width: Length) -> Self {
+        self.width = width;
+        self
+    }
+
+    /// Sets the text size o the [`Toggler`].
+    pub fn text_size(mut self, text_size: u16) -> Self {
+        self.text_size = Some(text_size);
+        self
+    }
+
+    /// Sets the horizontal alignment of the text of the [`Toggler`]
+    pub fn text_alignment(mut self, alignment: HorizontalAlignment) -> Self {
+        self.text_alignment = alignment;
+        self
+    }
+
+    /// Sets the spacing between the [`Toggler`] and the text.
+    pub fn spacing(mut self, spacing: u16) -> Self {
+        self.spacing = spacing;
+        self
+    }
+
+    /// Sets the [`Font`] of the text of the [`Toggler`]
+    pub fn font(mut self, font: Renderer::Font) -> Self {
+        self.font = font;
+        self
+    }
+
+    /// Sets the style of the [`Toggler`].
+    pub fn style(mut self, style: impl Into<Renderer::Style>) -> Self {
+        self.style = style.into();
+        self
+    }
+}
+
+impl<Message, Renderer> Widget<Message, Renderer> for Toggler<Message, Renderer>
+where
+    Renderer: self::Renderer + text::Renderer + row::Renderer,
+{
+    fn width(&self) -> Length {
+        self.width
+    }
+
+    fn height(&self) -> Length {
+        Length::Shrink
+    }
+
+    fn layout(
+        &self,
+        renderer: &Renderer,
+        limits: &layout::Limits,
+    ) -> layout::Node {
+        let mut row = Row::<(), Renderer>::new()
+            .width(self.width)
+            .spacing(self.spacing)
+            .align_items(Align::Center);
+
+        if let Some(label) = &self.label {
+            row = row.push(
+                Text::new(label)
+                    .horizontal_alignment(self.text_alignment)
+                    .font(self.font)
+                    .width(self.width)
+                    .size(self.text_size.unwrap_or(renderer.default_size())),
+            );
+        }
+
+        row = row.push(
+            Row::new()
+                .width(Length::Units(2 * self.size))
+                .height(Length::Units(self.size)),
+        );
+
+        row.layout(renderer, limits)
+    }
+
+    fn on_event(
+        &mut self,
+        event: Event,
+        layout: Layout<'_>,
+        cursor_position: Point,
+        _renderer: &Renderer,
+        _clipboard: &mut dyn Clipboard,
+        messages: &mut Vec<Message>,
+    ) -> event::Status {
+        match event {
+            Event::Mouse(mouse::Event::ButtonPressed(mouse::Button::Left)) => {
+                let mouse_over = layout.bounds().contains(cursor_position);
+
+                if mouse_over {
+                    messages.push((self.on_toggle)(!self.is_active));
+
+                    event::Status::Captured
+                } else {
+                    event::Status::Ignored
+                }
+            }
+            _ => event::Status::Ignored,
+        }
+    }
+
+    fn draw(
+        &self,
+        renderer: &mut Renderer,
+        defaults: &Renderer::Defaults,
+        layout: Layout<'_>,
+        cursor_position: Point,
+        _viewport: &Rectangle,
+    ) -> Renderer::Output {
+        let bounds = layout.bounds();
+        let mut children = layout.children();
+
+        let label = match &self.label {
+            Some(label) => {
+                let label_layout = children.next().unwrap();
+
+                Some(text::Renderer::draw(
+                    renderer,
+                    defaults,
+                    label_layout.bounds(),
+                    &label,
+                    self.text_size.unwrap_or(renderer.default_size()),
+                    self.font,
+                    None,
+                    self.text_alignment,
+                    VerticalAlignment::Center,
+                ))
+            }
+
+            None => None,
+        };
+
+        let toggler_layout = children.next().unwrap();
+        let toggler_bounds = toggler_layout.bounds();
+
+        let is_mouse_over = bounds.contains(cursor_position);
+
+        self::Renderer::draw(
+            renderer,
+            toggler_bounds,
+            self.is_active,
+            is_mouse_over,
+            label,
+            &self.style,
+        )
+    }
+
+    fn hash_layout(&self, state: &mut Hasher) {
+        struct Marker;
+        std::any::TypeId::of::<Marker>().hash(state);
+
+        self.label.hash(state)
+    }
+}
+
+/// The renderer of a [`Toggler`].
+///
+/// Your [renderer] will need to implement this trait before being
+/// able to use a [`Toggler`] in your user interface.
+///
+/// [renderer]: ../../renderer/index.html
+pub trait Renderer: crate::Renderer {
+    /// The style supported by this renderer.
+    type Style: Default;
+
+    /// The default size of a [`Toggler`].
+    const DEFAULT_SIZE: u16;
+
+    /// Draws a [`Toggler`].
+    ///
+    /// It receives:
+    ///   * the bounds of the [`Toggler`]
+    ///   * whether the [`Toggler`] is activated or not
+    ///   * whether the mouse is over the [`Toggler`] or not
+    ///   * the drawn label of the [`Toggler`]
+    ///   * the style of the [`Toggler`]
+    fn draw(
+        &mut self,
+        bounds: Rectangle,
+        is_active: bool,
+        is_mouse_over: bool,
+        label: Option<Self::Output>,
+        style: &Self::Style,
+    ) -> Self::Output;
+}
+
+impl<'a, Message, Renderer> From<Toggler<Message, Renderer>>
+    for Element<'a, Message, Renderer>
+where
+    Renderer: 'a + self::Renderer + text::Renderer + row::Renderer,
+    Message: 'a,
+{
+    fn from(
+        toggler: Toggler<Message, Renderer>,
+    ) -> Element<'a, Message, Renderer> {
+        Element::new(toggler)
+    }
+}

src/widget.rs

@@ -17,8 +17,8 @@
 mod platform {
     pub use crate::renderer::widget::{
         button, checkbox, container, pane_grid, pick_list, progress_bar, radio,
-        rule, scrollable, slider, text_input, tooltip, Column, Row, Space,
+        rule, scrollable, slider, text_input, toggler, tooltip, Column, Row,
-        Text,
+        Space, Text,
     };
 
     #[cfg(any(feature = "canvas", feature = "glow_canvas"))]
@@ -53,7 +53,7 @@ mod platform {
         button::Button, checkbox::Checkbox, container::Container, image::Image,
         pane_grid::PaneGrid, pick_list::PickList, progress_bar::ProgressBar,
         radio::Radio, rule::Rule, scrollable::Scrollable, slider::Slider,
-        svg::Svg, text_input::TextInput, tooltip::Tooltip,
+        svg::Svg, text_input::TextInput, toggler::Toggler, tooltip::Tooltip,
     };
 
     #[cfg(any(feature = "canvas", feature = "glow_canvas"))]

style/src/lib.rs

@@ -18,3 +18,4 @@ pub mod rule;
 pub mod scrollable;
 pub mod slider;
 pub mod text_input;
+pub mod toggler;

style/src/toggler.rs

@@ -0,0 +1,57 @@
+//! Show toggle controls using togglers.
+use iced_core::Color;
+
+/// The appearance of a toggler.
+#[derive(Debug)]
+pub struct Style {
+    pub background: Color,
+    pub background_border: Option<Color>,
+    pub foreground: Color,
+    pub foreground_border: Option<Color>,
+}
+
+/// A set of rules that dictate the style of a toggler.
+pub trait StyleSheet {
+    fn active(&self, is_active: bool) -> Style;
+
+    fn hovered(&self, is_active: bool) -> Style;
+}
+
+struct Default;
+
+impl StyleSheet for Default {
+    fn active(&self, is_active: bool) -> Style {
+        Style {
+            background: if is_active {
+                Color::from_rgb(0.0, 1.0, 0.0)
+            } else {
+                Color::from_rgb(0.7, 0.7, 0.7)
+            },
+            background_border: None,
+            foreground: Color::WHITE,
+            foreground_border: None,
+        }
+    }
+
+    fn hovered(&self, is_active: bool) -> Style {
+        Style {
+            foreground: Color::from_rgb(0.95, 0.95, 0.95),
+            ..self.active(is_active)
+        }
+    }
+}
+
+impl std::default::Default for Box<dyn StyleSheet> {
+    fn default() -> Self {
+        Box::new(Default)
+    }
+}
+
+impl<T> From<T> for Box<dyn StyleSheet>
+where
+    T: 'static + StyleSheet,
+{
+    fn from(style: T) -> Self {
+        Box::new(style)
+    }
+}

web/src/css.rs

@@ -14,6 +14,9 @@ pub enum Rule {
 
     /// Spacing between elements
     Spacing(u16),
+
+    /// Toggler input for a specific size
+    Toggler(u16),
 }
 
 impl Rule {
@@ -23,6 +26,7 @@ impl Rule {
             Rule::Column => String::from("c"),
             Rule::Row => String::from("r"),
             Rule::Spacing(spacing) => format!("s-{}", spacing),
+            Rule::Toggler(size) => format!("toggler-{}", size),
         }
     }
 
@@ -55,6 +59,46 @@ impl Rule {
                 class
             )
             .into_bump_str(),
+            Rule::Toggler(size) => bumpalo::format!(
+                in bump,
+                ".toggler-{} {{ display: flex; cursor: pointer; justify-content: space-between; }} \
+                 .toggler-{} input {{ display:none; }} \
+                 .toggler-{} span {{ background-color: #b1b1b1; position: relative; display: inline-flex; width:{}px; height: {}px; border-radius: {}px;}} \
+                 .toggler-{} span > span {{ background-color: #FFFFFF; width: {}px; height: {}px; border-radius: 50%; top: 1px; left: 1px;}} \
+                 .toggler-{}:hover span > span {{ background-color: #f1f1f1 !important; }} \
+                 .toggler-{} input:checked + span {{ background-color: #00FF00; }} \
+                 .toggler-{} input:checked + span > span {{ -webkit-transform: translateX({}px); -ms-transform:translateX({}px); transform: translateX({}px); }}
+                ",
+                // toggler
+                size,
+
+                // toggler input
+                size,
+
+                // toggler span
+                size,
+                size*2,
+                size,
+                size,
+
+                // toggler span > span
+                size,
+                size-2,
+                size-2,
+
+                // toggler: hover + span > span
+                size,
+
+                // toggler input:checked + span
+                size,
+
+                // toggler input:checked + span > span
+                size,
+                size,
+                size,
+                size
+            )
+            .into_bump_str(),
         }
     }
 }

web/src/widget.rs

@@ -24,6 +24,7 @@ pub mod radio;
 pub mod scrollable;
 pub mod slider;
 pub mod text_input;
+pub mod toggler;
 
 mod column;
 mod row;
@@ -40,6 +41,8 @@ pub use slider::Slider;
 pub use text::Text;
 #[doc(no_inline)]
 pub use text_input::TextInput;
+#[doc(no_inline)]
+pub use toggler::Toggler;
 
 pub use checkbox::Checkbox;
 pub use column::Column;

web/src/widget/toggler.rs

@@ -0,0 +1,171 @@
+//! Show toggle controls using togglers.
+use crate::{css, Bus, Css, Element, Length, Widget};
+
+pub use iced_style::toggler::{Style, StyleSheet};
+
+use dodrio::bumpalo;
+use std::rc::Rc;
+
+/// A toggler that can be toggled.
+///
+/// # Example
+///
+/// ```
+/// # use iced_web::Toggler;
+///
+/// pub enum Message {
+///     TogglerToggled(bool),
+/// }
+///
+/// let is_active = true;
+///
+/// Toggler::new(is_active, String::from("Toggle me!"), Message::TogglerToggled);
+/// ```
+///
+#[allow(missing_debug_implementations)]
+pub struct Toggler<Message> {
+    is_active: bool,
+    on_toggle: Rc<dyn Fn(bool) -> Message>,
+    label: Option<String>,
+    id: Option<String>,
+    width: Length,
+    style: Box<dyn StyleSheet>,
+}
+
+impl<Message> Toggler<Message> {
+    /// Creates a new [`Toggler`].
+    ///
+    /// It expects:
+    ///   * a boolean describing whether the [`Toggler`] is active or not
+    ///   * An optional label for the [`Toggler`]
+    ///   * a function that will be called when the [`Toggler`] is toggled. It
+    ///     will receive the new state of the [`Toggler`] and must produce a
+    ///     `Message`.
+    ///
+    /// [`Toggler`]: struct.Toggler.html
+    pub fn new<F>(
+        is_active: bool,
+        label: impl Into<Option<String>>,
+        f: F,
+    ) -> Self
+    where
+        F: 'static + Fn(bool) -> Message,
+    {
+        Toggler {
+            is_active,
+            on_toggle: Rc::new(f),
+            label: label.into(),
+            id: None,
+            width: Length::Shrink,
+            style: Default::default(),
+        }
+    }
+
+    /// Sets the width of the [`Toggler`].
+    ///
+    /// [`Toggler`]: struct.Toggler.html
+    pub fn width(mut self, width: Length) -> Self {
+        self.width = width;
+        self
+    }
+
+    /// Sets the style of the [`Toggler`].
+    ///
+    /// [`Toggler`]: struct.Toggler.html
+    pub fn style(mut self, style: impl Into<Box<dyn StyleSheet>>) -> Self {
+        self.style = style.into();
+        self
+    }
+
+    /// Sets the id of the [`Toggler`].
+    ///
+    /// [`Toggler`]: struct.Toggler.html
+    pub fn id(mut self, id: impl Into<String>) -> Self {
+        self.id = Some(id.into());
+        self
+    }
+}
+
+impl<Message> Widget<Message> for Toggler<Message>
+where
+    Message: 'static,
+{
+    fn node<'b>(
+        &self,
+        bump: &'b bumpalo::Bump,
+        bus: &Bus<Message>,
+        style_sheet: &mut Css<'b>,
+    ) -> dodrio::Node<'b> {
+        use dodrio::builder::*;
+        use dodrio::bumpalo::collections::String;
+
+        let toggler_label = &self
+            .label
+            .as_ref()
+            .map(|label| String::from_str_in(&label, bump).into_bump_str());
+
+        let event_bus = bus.clone();
+        let on_toggle = self.on_toggle.clone();
+        let is_active = self.is_active;
+
+        let row_class = style_sheet.insert(bump, css::Rule::Row);
+        let toggler_class = style_sheet.insert(bump, css::Rule::Toggler(16));
+
+        let (label, input) = if let Some(id) = &self.id {
+            let id = String::from_str_in(id, bump).into_bump_str();
+
+            (label(bump).attr("for", id), input(bump).attr("id", id))
+        } else {
+            (label(bump), input(bump))
+        };
+
+        let checkbox = input
+            .attr("type", "checkbox")
+            .bool_attr("checked", self.is_active)
+            .on("click", move |_root, vdom, _event| {
+                let msg = on_toggle(!is_active);
+                event_bus.publish(msg);
+
+                vdom.schedule_render();
+            })
+            .finish();
+
+        let toggler = span(bump).children(vec![span(bump).finish()]).finish();
+
+        label
+            .attr(
+                "class",
+                bumpalo::format!(in bump, "{} {}", row_class, toggler_class)
+                    .into_bump_str(),
+            )
+            .attr(
+                "style",
+                bumpalo::format!(in bump, "width: {}; align-items: center", css::length(self.width))
+                .into_bump_str()
+            )
+            .children(
+                if let Some(label) = toggler_label {
+                    vec![
+                        text(label),
+                        checkbox,
+                        toggler,
+                    ]
+                } else {
+                    vec![
+                        checkbox,
+                        toggler,
+                    ]
+                }
+            )
+            .finish()
+    }
+}
+
+impl<'a, Message> From<Toggler<Message>> for Element<'a, Message>
+where
+    Message: 'static,
+{
+    fn from(toggler: Toggler<Message>) -> Element<'a, Message> {
+        Element::new(toggler)
+    }
+}

wgpu/src/widget.rs

@@ -20,6 +20,7 @@ pub mod rule;
 pub mod scrollable;
 pub mod slider;
 pub mod text_input;
+pub mod toggler;
 pub mod tooltip;
 
 #[doc(no_inline)]
@@ -45,6 +46,8 @@ pub use slider::Slider;
 #[doc(no_inline)]
 pub use text_input::TextInput;
 #[doc(no_inline)]
+pub use toggler::Toggler;
+#[doc(no_inline)]
 pub use tooltip::Tooltip;
 
 #[cfg(feature = "canvas")]

wgpu/src/widget/toggler.rs

@@ -0,0 +1,9 @@
+//! Show toggle controls using togglers.
+use crate::Renderer;
+
+pub use iced_graphics::toggler::{Style, StyleSheet};
+
+/// A toggler that can be toggled
+///
+/// This is an alias of an `iced_native` toggler with an `iced_wgpu::Renderer`.
+pub type Toggler<Message> = iced_native::Toggler<Message, Renderer>;