---
title: "Repetition and Data Models"
description: "Creating elements from data with for and if."
---
Use the `for`-`in` syntax to create an element multiple times, once per entry in a model:

```slint
export component Example inherits Window {
    preferred-width: 300px;
    preferred-height: 100px;
    for my-color[index] in [ #e11, #1a2, #23d ]: Rectangle {
        height: 100px;
        width: 60px;
        x: self.width * index;
        background: my-color;
    }
}
```

The model can be an integer (repeat that many times), an array,
or a model provided by your business logic.
This is how you build lists and tables: the data lives in a model,
and the UI declares what one entry looks like:

```slint
export component Example inherits Window {
    preferred-width: 50px;
    preferred-height: 50px;
    in property <[{foo: string, col: color}]> model: [
        {foo: "abc", col: #f00 },
        {foo: "def", col: #00f },
    ];
    VerticalLayout {
        for data in root.model: my-repeated-text := Text {
            color: data.col;
            text: data.foo;
        }
    }
}
```

Related to `for` is the `if` construct, which instantiates an element only while a condition holds:

```slint
export component Example inherits Window {
    preferred-width: 50px;
    preferred-height: 50px;
    if area.pressed : foo := Rectangle { background: blue; }
    if !area.pressed : Rectangle { background: red; }
    area := TouchArea {}
}
```

See [Repetition and Conditional Elements](../../../../reference/language/repetition-and-conditional-elements/)
in the language reference for the exact syntax, and
[Arrays and Models](../../../../reference/property-types/arrays-and-models/) for the array
operations like `length`, indexing, `push`, `insert`, and `remove`.