---
<!-- Copyright © SixtyFPS GmbH <info@slint.dev> ; SPDX-License-Identifier: MIT -->
title: Types
description: All Slint types
---

import SlintProperty  from '/src/components/SlintProperty.astro';
import Link from '/src/components/Link.astro';

All properties in Slint have a type. Slint knows these basic 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"`.

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.

```slint
export component Example inherits Text {
    text: "hello";
}
```

:::note[Note]
  The `\{...}` syntax is not valid within the `slint!` macro in Rust.
:::
</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>

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

The `image` type is a reference to an image. It's defined using the `@image-url("...")` construct.
The address within the `@image-url` function must be known 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.

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

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

    in property <image> some_image: @image-url("https://slint.dev/logo/slint-logo-full-light.svg");

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

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
</SlintProperty>

## Animation
### easing
<SlintProperty propName="easing" typeName="easing" defaultValue='linear'>
Property animation allow specifying an easing curve.
`easing`: can be any of the following. 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
</SlintProperty>



## Arrays and Models

Arrays are declared by wrapping `[` and `]` square brackets around the type of the array elements.

Array literals as well as properties holding arrays act as models in `for` expressions.

```slint
export component Example {
    in-out property<[int]> list-of-int: [1,2,3];
    in-out property<[{a: int, b: string}]> list-of-structs: [{ a: 1, b: "hello" }, {a: 2, b: "world"}];
}
```

Arrays define the following operations:

-   **`array.length`**: One can query the length of an array and model using the builtin `.length` property.
-   **`array[index]`**: The index operator retrieves individual elements of an array.

Out of bound access into an array will return default-constructed values.

```slint
export component Example {
    in-out property<[int]> list-of-int: [1,2,3];

    out property <int> list-len: list-of-int.length;
    out property <int> first-int: list-of-int[0];
}
```


## 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

```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
}
```
