slint/internal/compiler/widgets/material-base/widget-checkbox.slint

// Copyright © SixtyFPS GmbH <info@slint-ui.com>
// SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-commercial


import { md } from "md.slint";

// Selection control that can be toggled between checked und unchecked by click.
export CheckBox := Rectangle {
    callback toggled;

    property <string> text <=> label.text;
    property <bool> checked;
    property <bool> has-focus: fs.has-focus;
    property<bool> enabled: true;
    height: 18px;

    accessible-label <=> label.text;
    accessible-checkable: true;
    accessible-checked <=> checked;
    accessible-role: checkbox;

    layout := HorizontalLayout {  
        spacing: 16px;

        Rectangle {  
            width: 18px;
            height: 18px;
          
            container := Rectangle {  
                width: 100%;
                height: 100%;
                border-radius: 2px;
                border-width: 2px;
                border-color: md.sys.color.on-surface;
            }

            state-layer := Rectangle {
                width: 40px;
                height: 40px;
                x: (parent.width - width) / 2;
                y: (parent.height - height) / 2;
                opacity: 0;
                background: md.sys.color.primary;
                border-radius: 20px;
                animate opacity { duration: 300ms; easing: ease; }
            }

            if (checked) : Path {
                width: 66%;
                height: 66%;
                x: (parent.width - width) / 2;
                y: (parent.height - height) / 2;
                commands: "M18.9 35.7 7.7 24.5l2.15-2.15 9.05 9.05 19.2-19.2 2.15 2.15Z";
                fill: md.sys.color.on-primary;

                states [
                    disabled when !root.enabled : {
                        fill: md.sys.color.on-surface;
                    }
                    hover-selected when touch.has-hover && root.checked : {
                        fill: md.sys.color.on-primary;
                    }
                ]
            }
        }

        label := Text {
            color: md.sys.color.primary;
            horizontal-alignment: left;
            vertical-alignment: center;
            vertical-stretch: 1;
            font-size: md.sys.typescale.label-medium.size;
            font-weight: md.sys.typescale.label-medium.weight;
        }
    }

    touch := TouchArea {
        x: layout.padding-left;
        width: layout.width - layout.padding-left - layout.padding-right;
        height: 100%;
        enabled <=> root.enabled;
        clicked => {
            if (root.enabled) {
                root.checked = !root.checked;
                root.toggled();
            }
        }
    }

    fs := FocusScope {
        width: 0px; // Do not react on clicks
        enabled <=> root.enabled;

        key-pressed(event) => {
            if (event.text == " " || event.text == "\n") {
                 touch.clicked();
                 return accept;
            }
            return reject;
        }
    }

    states [
        disabled-selected when !enabled && checked  : {
            container.border-width: 0px;
            container.border-color: transparent;
            container.background: md.sys.color.primary;
            container.opacity: 0.38;
            label.opacity: 0.38;
            label.color: md.sys.color.primary;
        }
        disabled when !enabled : {
            container.opacity: 0.38;
            label.opacity: 0.38;
            label.color: md.sys.color.primary;
        }
        pressed when touch.pressed && !root.checked : {
            state-layer.opacity: 0.12;
        }
        pressed-selected when touch.pressed && checked : {
            state-layer.opacity: 0.12;    
            state-layer.background: md.sys.color.on-surface;    
            container.border-width: 0px;
            container.border-color: transparent;
            container.background: md.sys.color.primary;
        }
        hover-selected when touch.has-hover && checked : {
            state-layer.opacity: 0.08;    
            container.border-width: 0px;
            container.border-color: transparent;
            container.background: md.sys.color.primary;
        }
        hover when touch.has-hover && !checked : {
            state-layer.background: md.sys.color.on-surface;
            state-layer.opacity: 0.08;    
        }
        selected when !touch.has-hover && checked : {
            container.border-width: 0px;
            container.border-color: transparent;
            container.background: md.sys.color.primary;
        }
        focused-selected when fs.has-focus && checked : {
            state-layer.opacity: 0.12;
        }
        focused when fs.has-focus && !checked : {
            state-layer.background: md.sys.color.on-surface;
            state-layer.opacity: 0.12;
        }
    ]
}