---
title: "Repetition and Conditional Elements"
description: "Instantiating elements with for and if."
---
A *repeated element* and a *conditional element* instantiate a single element,
zero or more times, driven by a model or a boolean condition.
Both appear only as a child within the body of another element.
Neither can be the root of a component, and neither may appear in a [global](../globals/) or interface;
each is a compile error.

## Repetition

A `for`-`in` construct instantiates its element once for each entry of a model:

```slint no-test
for name[index] in model : id := Element { }
```

The parts are:

- `name` is an optional identifier bound to the model entry for the current instance.
  It behaves like a read-only pseudo-property in scope within the element and its children.
- `[index]` is optional.
  When present, its identifier is bound to the zero-based position of the current instance and has type `int`.
- `model` is the expression that drives the repetition.
- `id :=` is optional and names the instantiated element as usual.
- `Element { }` is the element to instantiate, and it is a single element.
  That element may itself contain children, including further `for` and `if` elements.

Both `name` and `[index]` are optional and independent; either, both, or neither may be given.

The `model` is evaluated in the scope surrounding the `for`, not inside it,
so `name` and `index` are not in scope within the `model` expression itself.
When the model value changes the element is instantiated, removed, or updated to match.

### Model

The `model` may be:

- an integer, in which case the element is repeated that many times and `name`, if given, is the
  index of the instance and has type `int`;
- an [array or model](../../property-types/arrays-and-models/), in which case the element is
  instantiated once per entry and `name`, if given, is the entry and has the array's element type;
- an array literal such as `[a, b, c]`, which is one form of the array case.

A model of any other type is an error.

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

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

Inside a `for` element, the right-hand side of a [two-way binding](../two-way-bindings/) may reference
the model value, which then stays in sync with the model entry.

## Conditional Elements

An `if` construct instantiates its element only while a boolean condition is true:

```slint no-test
if condition : id := Element { }
```

The `condition` must be a boolean expression.
The element is instantiated when the condition becomes true and removed when it becomes false.
`id :=` is optional, and the body is a single element that may contain children.

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

## Restrictions

- The `@children` placeholder cannot appear inside a repeated or conditional element; this is a compile error.
- A `ListView` may have a single `for` element as its only child.
  Any other child, including a second `for`, a plain element, or a conditional element, is a compile error.