CheckBox - Slint — ContextQMD

import CodeSnippetMD from '@slint/common-files/src/components/CodeSnippetMD.astro'; import SlintProperty from '@slint/common-files/src/components/SlintProperty.astro';

<CodeSnippetMD needsBackground imagePath="/src/assets/generated/std-widgets-checkbox-example.png" scale="3" imageWidth="100" imageHeight="50" imageAlt='checkbox example'> ```slint import { CheckBox } from "std-widgets.slint"; export component Example inherits Window { width: 200px; height: 25px; background: transparent; CheckBox { x: 5px; width: parent.width; height: parent.height; text: "Hello World"; } } ``` </CodeSnippetMD>

Use a CheckBox to let the user select or deselect values, for example in a list with multiple options. Consider using a Switch element instead if the action resembles more something that's turned on or off.

Properties

checked

<SlintProperty propName="checked" typeName="bool" defaultValue="false" propertyVisibility="in-out"> Whether the checkbox is checked or not. ```slint "checked: true;" CheckBox { text: self.checked ? "Checked" : "Not checked"; checked: true; } ``` </SlintProperty>

enabled

<SlintProperty propName="enabled" typeName="bool" defaultValue="true"> Defaults to true. When false, the checkbox can't be pressed. </SlintProperty>

font-size

<SlintProperty propName="font-size" typeName="length"> The size of the font of the label text. </SlintProperty>

font-weight

<SlintProperty propName="font-weight" typeName="int"> The weight of the font of the label text. </SlintProperty>

has-focus

<SlintProperty propName="has-focus" typeName="bool" propertyVisibility="out" > Set to true when the checkbox has keyboard focus. </SlintProperty>

text

<SlintProperty propName="text" typeName="string"> The text written next to the checkbox. ```slint 'text: "CheckBox with text";' CheckBox { text: "CheckBox with text"; } ``` </SlintProperty>

Callbacks

toggled()

The checkbox value changed

slint

CheckBox {
    text: "CheckBox";
    toggled() => {
        debug("CheckBox checked: ", self.checked);
    }
}