Widgets#

Slint provides a series of built-in widgets that can be imported from "std-widgets.slint".

The widget appearance depends on the selected style. The following styles are available:

  • fluent: The Fluent style implements the Fluent Design System.

  • material: The Material style implements the Material Design.

  • native: The Native style resembles the appearance of the controls that are native to the platform they are used on. This specifically includes support for the look and feel of controls on macOS and Windows. This style is only available if you have Qt installed on your system.

See Selecting a Widget Style for details how to select the style. If no style is selected, native is the default. If native isn’t available, fluent is the default.

All widgets support all properties common to builtin elements.

AboutSlint#

This element displays a “Made with Slint” badge.

import { AboutSlint } from "std-widgets.slint";
export component Example inherits Window {
    height: 175px;
    AboutSlint {
    }
}

Button#

A simple button. Common types of buttons can also be created with StandardButton.

Properties#

  • checkable (in bool): Shows whether the button can be checked or not. This enables the checked property to possibly become true.

  • checked (inout bool): Shows whether the button is checked or not. Needs checkable to be true to work.

  • enabled: (in bool): Defaults to true. When false, the button cannot be pressed

  • has-focus: (out bool): Set to true when the button has keyboard focus.

  • icon (in image): The image to show in the button. Note that not all styles support drawing icons.

  • pressed: (out bool): Set to true when the button is pressed.

  • text (in string): The text written in the button.

  • primary (in bool): If set to true the button is displayed with the primary accent color (default: false).

Callbacks#

  • clicked()

Example#

import { Button, VerticalBox } from "std-widgets.slint";
export component Example inherits Window {
    VerticalBox {
        Button {
            text: "Click Me";
            clicked => { self.text = "Clicked"; }
        }
    }
}

CheckBox#

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: (inout bool): Whether the checkbox is checked or not (default: false).

  • enabled: (in bool): Defaults to true. When false, the checkbox can’t be pressed (default: true)

  • has-focus: (out bool): Set to true when the checkbox has keyboard focus (default: false).

  • text (in string): The text written next to the checkbox.

Callbacks#

  • toggled(): The checkbox value changed

Example#

import { CheckBox } from "std-widgets.slint";
export component Example inherits Window {
    width: 200px;
    height: 25px;
    CheckBox {
        width: parent.width;
        height: parent.height;
        text: "Hello World";
    }
}

ComboBox#

A button that, when clicked, opens a popup to select a value.

Properties#

  • current-index: (in-out int): The index of the selected value (-1 if no value is selected)

  • current-value: (in-out string): The currently selected text

  • enabled: (in bool): Defaults to true. When false, the combobox can’t be interacted with

  • has-focus: (out bool): Set to true when the combobox has keyboard focus.

  • model (in [string]): The list of possible values

Callbacks#

  • selected(string): A value was selected from the combo box. The argument is the currently selected value.

Example#

import { ComboBox } from "std-widgets.slint";
export component Example inherits Window {
    width: 200px;
    height: 130px;
    ComboBox {
        y: 0px;
        width: self.preferred-width;
        height: self.preferred-height;
        model: ["first", "second", "third"];
        current-value: "first";
    }
}

GridBox#

A GridBox is a GridLayout where the spacing and padding values depend on the style instead of defaulting to 0.

GroupBox#

A GroupBox is a container that groups its children together under a common title.

Properties#

  • enabled: (in bool): Defaults to true. When false, the groupbox can’t be interacted with

  • title (in string): A text written as the title of the group box.

Example#

import { GroupBox , VerticalBox, CheckBox } from "std-widgets.slint";
export component Example inherits Window {
    width: 200px;
    height: 100px;
    GroupBox {
        title: "Groceries";
        VerticalLayout {
            CheckBox { text: "Bread"; checked: true ;}
            CheckBox { text: "Fruits"; }
        }
    }
}

HorizontalBox#

A HorizontalBox is a HorizontalLayout where the spacing and padding values depend on the style instead of defaulting to 0.

LineEdit#

A widget used to enter a single line of text. See TextEdit for a widget able to handle several lines of text.

Properties#

  • enabled: (in bool): Defaults to true. When false, nothing can be entered selecting text is still enabled as well as editing text programmatically (default value: false)

  • font-size (in length): the size of the font of the input text

  • has-focus: (out bool): Set to true when the line edit currently has the focus

  • horizontal-alignment (in enum TextHorizontalAlignment): The horizontal alignment of the text.

  • input-type (in enum InputType): The way to allow special input viewing properties such as password fields (default value: text).

  • placeholder-text: (in string): A placeholder text being shown when there is no text in the edit field

  • read-only (in bool): When set to true, text editing via keyboard and mouse is disabled but

  • text (in-out string): The text being edited

Functions#

  • focus() Call this function to focus the LineEdit and make it receive future keyboard events.

  • select-all() Selects all text.

  • clear-selection() Clears the selection.

  • copy() Copies the selected text to the clipboard.

  • cut() Copies the selected text to the clipboard and removes it from the editable area.

  • paste() Pastes the text content of the clipboard at the cursor position.

Callbacks#

  • accepted(string): Enter was pressed

  • edited(string): Emitted when the text has changed because the user modified it

Example#

import { LineEdit } from "std-widgets.slint";
export component Example inherits Window {
    width: 200px;
    height: 25px;
    LineEdit {
        font-size: 14px;
        width: parent.width;
        height: parent.height;
        placeholder-text: "Enter text here";
    }
}

ListView#

A ListView is like a Scrollview but it should have a for element, and the content are automatically laid out in a list. Elements are only instantiated if they are visible

Properties#

Same as ScrollView

Example#

import { ListView } from "std-widgets.slint";
export component Example inherits Window {
    width: 150px;
    height: 150px;
    ListView {
        width: 150px;
        height: 150px;
        for data in [
            { text: "Blue", color: #0000ff, bg: #eeeeee},
            { text: "Red", color: #ff0000, bg: #eeeeee},
            { text: "Green", color: #00ff00, bg: #eeeeee},
            { text: "Yellow", color: #ffff00, bg: #222222 },
            { text: "Black", color: #000000, bg: #eeeeee },
            { text: "White", color: #ffffff, bg: #222222 },
            { text: "Magenta", color: #ff00ff, bg: #eeeeee },
            { text: "Cyan", color: #00ffff, bg: #222222 },
        ] : Rectangle {
            height: 30px;
            background: data.bg;
            width: parent.width;
            Text {
                x: 0;
                text: data.text;
                color: data.color;
            }
        }
    }
}

ProgressIndicator#

The ProgressIndicator informs the user about the status of an on-going operation, such as loading data from the network.

Properties#

  • indeterminate: (in bool): Set to true if the progress of the operation cannot be determined by value (default value: false).

  • progress (in float): Percentage of completion, as value between 0 and 1. Values less than 0 or greater than 1 are capped.

Example#

import { ProgressIndicator } from "std-widgets.slint";
export component Example inherits Window {
    width: 200px;
    height: 25px;
    ProgressIndicator {
        width: parent.width;
        height: parent.height;
        progress: 50%;
    }
}

ScrollView#

A Scrollview contains a viewport that is bigger than the view and can be scrolled. It has scrollbar to interact with. The viewport-width and viewport-height are calculated automatically to create a scollable view except for when using a for loop to populate the elements. In that case the viewport-width and viewport-height aren’t calculated automatically and must be set manually for scrolling to work. The ability to automatically calculate the viewport-width and viewport-height when using for loops may be added in the future and is tracked in issue #407.

Properties#

  • enabled (in bool): Used to render the frame as disabled or enabled, but doesn’t change behavior of the widget.

  • has-focus (in-out bool): Used to render the frame as focused or unfocused, but doesn’t change the behavior of the widget.

  • viewport-width and viewport-height (in-out length): The width and length properties of the viewport

  • viewport-x and viewport-y (in-out length): The x and y properties of the viewport. Usually these are negative

  • visible-width and visible-height (out length): The size of the visible area of the ScrollView (not including the scrollbar)

Example#

import { ScrollView } from "std-widgets.slint";
export component Example inherits Window {
    width: 200px;
    height: 200px;
    ScrollView {
        width: 200px;
        height: 200px;
        viewport-width: 300px;
        viewport-height: 300px;
        Rectangle { width: 30px; height: 30px; x: 275px; y: 50px; background: blue; }
        Rectangle { width: 30px; height: 30px; x: 175px; y: 130px; background: red; }
        Rectangle { width: 30px; height: 30px; x: 25px; y: 210px; background: yellow; }
        Rectangle { width: 30px; height: 30px; x: 98px; y: 55px; background: orange; }
    }
}

Slider#

Properties#

  • enabled: (in bool): Defaults to true. You can’t interact with the slider if enabled is false.

  • has-focus: (out bool): Set to true when the slider currently has the focus

  • value (in-out float): The value.

  • minimum (in float): The minimum value (default: 0)

  • maximum (in float): The maximum value (default: 100)

Callbacks#

  • changed(float): The value was changed

Example#

import { Slider } from "std-widgets.slint";
export component Example inherits Window {
    width: 200px;
    height: 25px;
    Slider {
        width: parent.width;
        height: parent.height;
        value: 42;
    }
}

SpinBox#

Properties#

  • enabled: (in bool): Defaults to true. You can’t interact with the spinbox if enabled is false.

  • has-focus: (out bool): Set to true when the spinbox currently has the focus

  • value (in-out int): The value.

  • minimum (in int): The minimum value (default: 0).

  • maximum (in int): The maximum value (default: 100).

Example#

import { SpinBox } from "std-widgets.slint";
export component Example inherits Window {
    width: 200px;
    height: 25px;
    SpinBox {
        width: parent.width;
        height: parent.height;
        value: 42;
    }
}

StandardButton#

The StandardButton looks like a button, but instead of customizing with text and icon, it can used one of the pre-defined kind and the text and icon will depend on the style.

Properties#

  • enabled: (in bool): Defaults to true. When false, the button can’t be pressed

  • has-focus: (out bool): Set to true when the button currently has the focus

  • kind (in enum StandardButtonKind): The kind of button, one of ok cancel, apply, close, reset, help, yes, no, abort, retry or ignore

  • pressed: (out bool): Set to true when the button is pressed.

Callbacks#

  • clicked()

Example#

import { StandardButton, VerticalBox } from "std-widgets.slint";
export component Example inherits Window {
  VerticalBox {
    StandardButton { kind: ok; }
    StandardButton { kind: apply; }
    StandardButton { kind: cancel; }
  }
}

StandardListView#

Like ListView, but with a default delegate, and a model property which is a model of type StandardListViewItem.

Properties#

Same as ListView, and in addition:

  • current-item (in-out int): The index of the currently active item. -1 mean none is selected, which is the default

  • model (in StandardListViewItem): The model

Functions#

  • set-current-item(_index: int_): Sets the current item and brings it into view

Example#

import { StandardListView } from "std-widgets.slint";
export component Example inherits Window {
    width: 150px;
    height: 150px;
    StandardListView {
        width: 150px;
        height: 150px;
        model: [ { text: "Blue"}, { text: "Red" }, { text: "Green" },
            { text: "Yellow" }, { text: "Black"}, { text: "White"},
            { text: "Magenta" }, { text: "Cyan" },
        ];
    }
}

StandardTableView#

The StandardTableView represents a table of data with columns and rows. Cells are organised in a model where each row is a model of [StandardListViewItem].

Properties#

Same as ListView, and in addition:

  • current-sort-column (out int): Indicates the sorted column. -1 mean no column is sorted.

  • columns (in-out [TableColumn]): Defines the model of the table columns.

  • rows ([[StandardListViewItem]]): Defines the model of table rows.

  • current-row (in-out int): The index of the currently active row. -1 mean none is selected, which is the default.

Callbacks#

  • sort-ascending(int): Emitted if the model should be sorted by the given column in ascending order.

  • sort-descending(int): Emitted if the model should be sorted by the given column in descending order.

Functions#

  • **set-current-row(index: int): Sets the current row and brings it into view

Example#

import { StandardTableView } from "std-widgets.slint";
export component Example inherits Window {
    width: 230px;
    height: 200px;
    StandardTableView {
        width: 230px;
        height: 200px;
        columns: [
            { title: "Header 1" },
            { title: "Header 2" },
        ];
        rows: [
            [
                { text: "Item 1" }, { text: "Item 2" },
            ],
            [
                { text: "Item 1" }, { text: "Item 2" },
            ],
            [
                { text: "Item 1" }, { text: "Item 2" },
            ]
        ];
    }
}

Switch#

A Switch is a representation of a physical switch that allows users to turn things on or off. Consider using a CheckBox instead if you want the user to select or deselect values, for example in a list with multiple options.

Properties#

  • checked: (inout bool): Whether the switch is checked or not (default: false).

  • enabled: (in bool): Defaults to true. When false, the switch can’t be pressed (default: true).

  • has-focus: (out bool): Set to true when the switch has keyboard focue (default: false).

  • text (in string): The text written next to the switch.

Callbacks#

  • toggled(): The switch value changed

Example#

import { Switch } from "std-widgets.slint";
export component Example inherits Window {
    width: 200px;
    height: 25px;
    Switch {
        width: parent.width;
        height: parent.height;
        text: "Hello World";
    }
}

TabWidget#

TabWidget is a container for a set of tabs. It can only have Tab elements as children and only one tab will be visible at a time.

Properties#

  • content-min-width and content-min-height (out length): The minimum width and height of the contents

  • content-width and content-height (out length): The width and height of the contents

  • content-x and content-y (out length): The x and y position of the contents

  • current-focused (in int): The index of the tab that has focus. This tab may or may not be visible.

  • current-index (in int): The index of the currently visible tab

  • tabbar-preferred-width and tabbar-preferred-height (in length): The preferred width and height of the tab bar

  • tabbar-width and tabbar-height (out length): The width and height of the tab bar

  • tabbar-x and tabbar-y (out length): The x and y position of the tab bar

Properties of the Tab element#

  • current-focused (out int): The index of this tab that has focus at this time or -1 if none is focused

  • enabled: (in bool): Defaults to true. When false, the tab can’t be activated

  • icon (in image): The image on the tab

  • num-tabs (out int): The number of tabs in the current TabBar

  • tab-index (out int): The index of this tab

  • title (in string): The text written on the tab

Example#

import { TabWidget } from "std-widgets.slint";
export component Example inherits Window {
    width: 200px;
    height: 200px;
    TabWidget {
        Tab {
            title: "First";
            Rectangle { background: orange; }
        }
        Tab {
            title: "Second";
            Rectangle { background: pink; }
        }
    }
}

TextEdit#

Similar to LineEdit`, but can be used to enter several lines of text

Note: The current implementation only implement very few basic shortcut. More shortcut will be implemented in a future version: https://github.com/slint-ui/slint/issues/474

Properties#

  • font-size (in length): the size of the font of the input text

  • text (in-out string): The text being edited

  • has-focus: (in_out bool): Set to true when the widget currently has the focus

  • enabled: (in bool): Defaults to true. When false, nothing can be entered

  • read-only (in bool): When set to true, text editing via keyboard and mouse is disabled but selecting text is still enabled as well as editing text programmatically (default value: false)

  • wrap (in enum TextWrap): The way the text wraps (default: word-wrap).

  • horizontal-alignment (in enum TextHorizontalAlignment): The horizontal alignment of the text.

Functions#

  • focus() Call this function to focus the TextEdit and make it receive future keyboard events.

  • select-all() Selects all text.

  • clear-selection() Clears the selection.

  • copy() Copies the selected text to the clipboard.

  • cut() Copies the selected text to the clipboard and removes it from the editable area.

  • paste() Pastes the text content of the clipboard at the cursor position.

Callbacks#

  • edited(string): Emitted when the text has changed because the user modified it

Example#

import { TextEdit } from "std-widgets.slint";
export component Example inherits Window {
    width: 200px;
    height: 200px;
    TextEdit {
        font-size: 14px;
        width: parent.width;
        height: parent.height;
        text: "Lorem ipsum dolor sit amet,\n consectetur adipisici elit";
    }
}

VerticalBox#

A VerticalBox is a VerticalLayout where the spacing and padding values depend on the style instead of defaulting to 0.

Selecting a Widget Style#

The widget style is selected at compile time of your project. The details depend on which programming language you’re using Slint with.

Selecting a Widget Style when using Slint with Rust:

Before you start your compilation, you can select the style by setting the SLINT_STYLE variable to one of the style names, such as fluent for example.

Selecting the Widget Style When Using the slint_build Crate#

Select the style with the slint_build::compile_with_config() function in the compiler configuration argument.

Selecting the Widget Style When Using the slint_interpreter Crate#

Select the style with the slint_interpreter::ComponentCompiler::set_style() function.

Selecting a Widget Style when using Slint with C++:

Select the style by defining a SLINT_STYLE CMake cache variable to hold the style name as a string. This can be done for example on the command line:

cmake -DSLINT_STYLE="material" /path/to/source

Selecting the Widget Style When Previewing Designs With slint-viewer#

Select the style either by setting the SLINT_STYLE environment variable, or passing the style name with the --style argument:

slint-viewer --style material /path/to/design.slint

Selecting the Widget Style When Previewing Designs With The Slint Visual Studio Code Extension#

Select the style by first opening the Visual Studio Code settings editor:

  • On Windows/Linux - File > Preferences > Settings

  • On macOS - Code > Preferences > Settings

Then enter the style name under Extensions > Slint > Preview:Style

Selecting the Widget Style When Previewing Designs With The Generic LSP Process#

Select the style by setting the SLINT_STYLE environment variable before launching the process. Alternatively, if your IDE integration allows passing command line parameters, you can specify the style via --style.