Switch

import { Switch } from "material.slint";
export component Example inherits Window {
    width: 200px;
    height: 100px;
    background: transparent;
    Switch {
        x: 10px;
        y: 10px;
    }
}

slint

A Switch is a control that allows users to toggle between two states (on/off). It provides a more prominent visual indication than a checkbox for binary settings.

Properties

checked

bool (in-out) default: false

Whether the switch is in the checked (on) state.

Switch {
    checked: true;
}

slint

enabled

bool default: true

Whether the switch is enabled and can be interacted with.

off_icon

image default: the empty image

An icon displayed when the switch is in the unchecked state.

on_icon

image default: the empty image

An icon displayed when the switch is in the checked state.

string default: ""

A tooltip text that appears when hovering over the switch.

Functions

toggle()

Toggles the switch state between checked and unchecked.

Switch {
    clicked() => {
        self.toggle();
    }
}

slint