---
title: Types
description: All Slint types
// cSpell: ignore Farbfeld
---

import SlintProperty from '@slint/common-files/src/components/SlintProperty.astro';
import Link from '@slint/common-files/src/components/Link.astro';
import { Tabs, TabItem } from '@astrojs/starlight/components';
import LangRefLink from '@slint/common-files/src/components/LangRefLink.astro';

Slint is a statically typed language and offers a rich range of primitive types.

## Primitive Types

### bool
<SlintProperty propName="bool" typeName="bool" defaultValue='false'>
boolean whose value can be either `true` or `false`.
</SlintProperty>

### string
<SlintProperty propName="string" typeName="string" defaultValue='""'>
Any sequence of utf-8 encoded characters surrounded by quotes is a `string`: `"foo"`.

```slint
export component Example inherits Text {
    text: "hello";
}
```
Escape sequences may be embedded into strings to insert characters that would
be hard to insert otherwise:

| Escape          | Result                                                                                          |
| --------------- | ----------------------------------------------------------------------------------------------- |
| `\"`            | `"`                                                                                             |
| `\\`            | `\`                                                                                             |
| `\n`            | new line                                                                                        |
| `\u{x}`         | where `x` is a hexadecimal number, expands to the unicode code point represented by this number |
| `\{expression}` | the result of evaluating the expression                                                         |

Anything else following an unescaped `\` is an error.

:::note[Note]
  The `\{...}` syntax is not valid within the `slint!` macro in Rust.
:::


`is-empty` property is true when `string` doesn't contain anything.

```slint
export component LengthOfString {
    property<bool> empty: "".is-empty; // true
    property<bool> not-empty: "hello".is-empty; // false
}
```

`character-count` property returns the number of [grapheme clusters](https://www.unicode.org/reports/tr29/#Grapheme_Cluster_Boundaries).

```slint
export component CharacterCountOfString {
    property<int> empty: "".character-count; // 0
    property<int> hello: "hello".character-count; // 5
    property<int> hiragana: "あいうえお".character-count; // 5
    property<int> surrogate-pair: "😊𩸽".character-count; // 2
    property<int> variation-selectors: "👍🏿".character-count; // 1
    property<int> combining-character: "パ".character-count; // 1
    property<int> zero-width-joiner: "👨‍👩‍👧‍👦".character-count; // 1
    property<int> region-indicator-character: "🇦🇿🇿🇦".character-count; // 2
    property<int> emoji-tag-sequences: "🏴󠁧󠁢󠁥󠁮󠁧󠁿".character-count; // 1
}
```

The `to-lowercase` and `to-uppercase` methods convert `string` to lowercase or uppercase according to the [Unicode Character Property](https://www.unicode.org/versions/Unicode16.0.0/core-spec/chapter-4/#G124722).

```slint
export component ChangeCaseOfString {
    property<string> hello: "HELLO".to-lowercase(); // "hello"
    property<string> bye: "tschüß".to-uppercase(); // "TSCHÜSS"
    property<string> odysseus: "ὈΔΥΣΣΕΎΣ".to-lowercase(); // "ὀδυσσεύς"
    property<string> new_year: "农历新年".to-uppercase(); // "农历新年"
}
```

The `to-float` method can be used to convert `string` to a `float`. It returns 0 if the string isn’t a valid number. You can check with `is-float` if the string contains a valid number.

```slint
export component StringToFloat {
    property<float> hello: "hello".to-float(); // 0
    property<bool> goodbye: "goodbye".is-float(); // false
    property<float> value: "1.5".to-float(); // 1.5
}
```

</SlintProperty>

### styled-text
<SlintProperty propName="styled-text" typeName="styled-text" defaultValue='""'>

A property that is used with the <Link type="StyledText" label="StyledText element"/>.

Create styled text with the `@markdown()` macro. For example: `@markdown("Hello **Bold**")`.

`@markdown()` supports interpolation1: For example, `@markdown("Hello *{}*", "World")` becomes `"Hello *World*"`.

Any text passed as an argument to the macro will be escaped, for example `@markdown("Hello {}", "*World*")` will become `"Hello \*World\*"`.

</SlintProperty>

## Numeric Types

### angle
<SlintProperty propName="angle" typeName="angle" defaultValue='0deg'>
Angle measurement, corresponds to a literal like `90deg`, `1.2rad`, `0 25turn`
</SlintProperty>

### duration
<SlintProperty propName="duration" typeName="duration" defaultValue='0ms'>
Type for the duration of animations. A suffix like `ms` (millisecond) or `s` (second) is used to indicate the precision.
</SlintProperty>

### float
<SlintProperty propName="float" typeName="float" defaultValue='0'>
Signed, 32-bit floating point number. Numbers with a `%` suffix are automatically divided by 100, so for example `30%` is the same as `0.30`.
</SlintProperty>

### int
<SlintProperty propName="int" typeName="int" defaultValue='0'>
Signed integral number.
</SlintProperty>

### length
<SlintProperty propName="length" typeName="length" defaultValue='0px'>
The type used for `x`, `y`, `width` and `height` coordinates. Corresponds to a literal like `1px`, `1pt`, `1in`, `1mm`, or `1cm`. It can be converted to and from length provided the binding is run in a context where there is an access to the device pixel ratio.
</SlintProperty>

### percent
<SlintProperty propName="percent" typeName="percent" defaultValue='0%'>
Signed, 32-bit floating point number that is interpreted as percentage. Literal number assigned to properties of this type must have a `%` suffix.
</SlintProperty>

### physical-length
<SlintProperty propName="physical-length" typeName="physical-length" defaultValue='0phx'>
This is an amount of physical pixels. To convert from an integer to a length unit, one can simply multiply by `1px`. Or to convert from a length to a float, one can divide by `1phx`.
</SlintProperty>

### relative-font-size
<SlintProperty propName="relative-font-size" typeName="relative-font-size" defaultValue='0rem'>
Relative font size factor that is multiplied with the `Window.default-font-size` and can be converted to a `length`.
</SlintProperty>



Please see the language specific API references how these types are mapped to the APIs of the different programming languages.

## Color and Brush Types
### brush
<SlintProperty propName="brush" typeName="brush" defaultValue='transparent'>
A brush is a special type that can be either initialized from a `color` or a `gradient`. See <Link type="ColorsRef" label="Colors & Brushes" />.
</SlintProperty>

### color
<SlintProperty propName="color" typeName="color" defaultValue='transparent'>
RGB color with an alpha channel, with 8 bit precision for each channel. CSS color names as well as the hexadecimal color encodings are supported, such as #RRGGBBAA or #RGB. See <Link type="ColorsRef" label="Colors & Brushes" />.
</SlintProperty>

## Keyboard input

### keys
<SlintProperty propName="keys" typeName="keys" defaultValue='empty keys'>
A keys represents a key combined with a list of modifiers.
This is the primitive type used to detect if a KeyEvent should trigger a given key binding.

Key bindings in Slint are based on **logical keys** — the character a key produces on the current keyboard layout — not the physical position of a key on the keyboard.
See <Link type="KeyBindingOverview" label="Key Bindings" /> for details.

Use the `to-string` function to convert a `keys` instance to `string`.
It returns a platform-native description of the key combination.

```slint
export component KeysToString inherits FocusScope {
    undo := KeyBinding {
        keys: @keys(Control + Z);
        activated => { debug("UNDO") }
    }

    Text {
        text: "Press \{undo.keys.to-string()} to undo!";
        // Results in "Press ⌘Z to undo!" on macOS
        // Results in "Press Ctrl+Z to undo!" on other platforms
    }
}

```


</SlintProperty>

## Images
### image
<SlintProperty propName="image" typeName="image" defaultValue='empty image'>

The `image` type is a reference to an image.

In Slint, an image can be loaded from a file with the `@image-url("...")` construct.
The address within the `@image-url` function must be a string literal and the image is resolved at compile time.

Slint looks for images in the following places:

1. The absolute path or the path relative to the current `.slint` file.
2. The include path used by the compiler to look up `.slint` files.

Loading image from `http` is only supported in [SlintPad](https://slintpad.com).

Supported format are SVG, and formats supported by the [`image` crate](https://crates.io/crates/image):
AVIF, BMP, DDS, Farbfeld, GIF, HDR, ICO, JPEG, EXR, PNG, PNM, QOI, TGA, TIFF, WebP.

For Rust applications, not all formats are enabled by default. Enable them with the `image-default-formats` Cargo feature.

<Tabs syncKey="dev-language">
<TabItem label="C++">
In C++, properties or struct fields of the image type are mapped to <LangRefLink lang="cpp" relpath="api/structslint_1_1Image">`slint::Image`</LangRefLink>.
</TabItem>
<TabItem label="Rust">
In Rust, properties or struct fields of the image type are mapped to <LangRefLink lang="rust-slint" relpath="struct.Image">`slint::Image`</LangRefLink>.
:::note[Note]
Some image formats can be disabled using cargo features to reduce binary size and speed up compilation.
:::
</TabItem>
<TabItem label="NodeJS" >
In JavaScript properties or struct fields of the image type are mapped an object that implement the <LangRefLink lang="nodejs" relpath="interfaces/ImageData.html">ImageData interface</LangRefLink>.
</TabItem>

<TabItem label="Python" >
In Python, properties or struct fields of the image type are mapped to <LangRefLink lang="python" relpath="slint.html#Image">`Image`</LangRefLink>.
</TabItem>

</Tabs>

Access an `image`'s dimension using its `width` and `height` properties.

```slint
export component Example inherits Window {
    preferred-width: 150px;
    preferred-height: 50px;

    // Note: http URL only work on the web version.
    in property <image> some_image: @image-url("https://slint.dev/logo/slint-logo-full-light.svg");

    HorizontalLayout {
        Text {
            text: "The image is " + some_image.width + "x" + some_image.height;
        }

        // Check the size to find out if the image is empty.
        if some_image.width > 0 : Image {
            source: some_image;
        }
    }
}
```

It is also possible to load images supporting [9 slice scaling](https://en.wikipedia.org/wiki/9-slice_scaling) (also called nine patch or border images)
by adding a  `nine-slice(...)` argument. The argument can have either one, two, or four numbers that specifies the size of the edges.
The numbers are either `top right bottom left` or `vertical horizontal`, or one number for everything

```slint
// nine-slice scaling
export component Example inherits Window {
    width: 100px;
    height: 150px;
    VerticalLayout {
        Image {
            source: @image-url("https://interactive-examples.mdn.mozilla.net/media/examples/border-diamonds.png", nine-slice(30 30 30 30));
        }
    }
}
```

See also the <Link type="Image" label="Image element"/>.

</SlintProperty>

## Animation
### easing
<SlintProperty propName="easing" typeName="easing" defaultValue='linear'>
The `easing` type allows defining an easing curve for animations.

To specify an easing curve, use the values from the `Easing` namespace. For example you can use `Easing.ease-out` or `Easing.ease-in-quad`. The namespace consists of the following names (see [`easings.net`](https://easings.net/) for a visual reference):

    -   `linear`
    -   `ease-in-quad`
    -   `ease-out-quad`
    -   `ease-in-out-quad`
    -   `ease`
    -   `ease-in`
    -   `ease-out`
    -   `ease-in-out`
    -   `ease-in-quart`
    -   `ease-out-quart`
    -   `ease-in-out-quart`
    -   `ease-in-quint`
    -   `ease-out-quint`
    -   `ease-in-out-quint`
    -   `ease-in-expo`
    -   `ease-out-expo`
    -   `ease-in-out-expo`
    -   `ease-in-sine`
    -   `ease-out-sine`
    -   `ease-in-out-sine`
    -   `ease-in-back`
    -   `ease-out-back`
    -   `ease-in-out-back`
    -   `ease-in-circ`
    -   `ease-out-circ`
    -   `ease-in-out-circ`
    -   `ease-in-elastic`
    -   `ease-out-elastic`
    -   `ease-in-out-elastic`
    -   `ease-in-bounce`
    -   `ease-out-bounce`
    -   `ease-in-out-bounce`
    -   `cubic-bezier(a, b, c, d)` as in CSS

Additionally, in expressions of type `easing`, those names are available directly.

```slint
struct AnimationData {
    curve: easing,
}

component Custom inherits Rectangle {
    property<AnimationData> animation: {
        // Using the Easing namespace.
        curve: Easing.ease-in-circ,
    };

	animate x {
    	// In easing expressions the names are available via global scope.
    	easing: ease-out-bounce;
	}
}
```
</SlintProperty>




## Type Conversions

Slint supports conversions between different types. Explicit
conversions are required to make the UI description more robust, but implicit
conversions are allowed between some types for convenience.

The following conversions are possible:

-   `int` can be converted implicitly to `float` and vice-versa.
     When converting from `float` to `int`, the value is truncated.
-   `int` and `float` can be converted implicitly to `string`
-   `physical-length`, `relative-font-size`, and `length` can be converted implicitly to each other only in
    context where the pixel ratio is known.
-   the units type (`length`, `physical-length`, `duration`, ...) can't be converted to numbers (`float` or `int`)
    but they can be divided by themselves to result in a number. Similarly, a number can be multiplied by one of
    these unit. The idea is that one would multiply by `1px` or divide by `1px` to do such conversions
-   The literal `0` can be converted to any of these types that have associated unit.
-   Struct types convert with another struct type if they have the same property names and their types can be converted.
    The source struct can have either missing properties, or extra properties. But not both.
-   Arrays generally don't convert between each other. Array literals can be converted if the element types are convertible.
-   String can be converted to float by using the `to-float` function. That function returns 0 if the string isn't
    a valid number. You can check with `is-float()` if the string contains a valid number
-   `float` can be converted to a formatted `string` using `to-fixed` and `to-precision` which can be passed the
    number of digits after the decimal point and and the number of significant digits respectively. They behave like their
    JavaScript counterparts [`toFixed()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed)
    and [`toPrecision()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toPrecision).

```slint
export component Example {
    // OK: int converts to string
    property<{a: string, b: int}> prop1: {a: 12, b: 12 };
    // OK: even if a is missing, it will just have the default value ("")
    property<{a: string, b: int}> prop2: { b: 12 };
    // OK: even if c is too many, it will be discarded
    property<{a: string, b: int}> prop3: { a: "x", b: 12, c: 42 };
    // ERROR: b is missing and c is extra, this doesn't compile, because it could be a typo.
    // property<{a: string, b: int}> prop4: { a: "x", c: 42 };

    property<string> xxx: "42.1";
    property<float> xxx1: xxx.to-float(); // 42.1
    property<bool> xxx2: xxx.is-float(); // true
    property<int> xxx3: 45.8; // 45
}
```
