Match Elements

A match element conditionally renders elements from a set of cases based on the value of an expression. It is a more readable alternative to a chain of if elements when you need to select between several mutually exclusive states.

Note: match is experimental and subject to change. Tracking issue: slint-ui/slint#1307 ↗.

Syntax

match <match-value> {
    <case-value>: ElementType { /* ... */ }
    <case-value>: ElementType { /* ... */ }
    *: ElementType { /* ... */ }   // optional wildcard
}

slint

Each <case-value> is a literal that is compared against the <match_value>. If a wildcard case * is present, it renders when none of the explicit cases match.

Examples

Matching on an integer

export component StatusIndicator {
    in property <int> status: 0;

    match status {
        0: Rectangle { background: green; }
        1: Rectangle { background: yellow; }
        2: Rectangle { background: red; }
        *: Rectangle { background: gray; }
    }
}

slint

Matching on a boolean

export component Toggle {
    in-out property <bool> checked: false;

    match checked {
        true:  Rectangle { background: blue; }
        false: Rectangle { background: lightgray; }
    }
}

slint

Matching on an enum

enum Mode { View, Edit, Preview }

export component Editor {
    in-out property <Mode> mode: Mode.View;

    match mode {
        Mode.View:    Text { text: "Viewing"; }
        Mode.Edit:    TextInput { }
        Mode.Preview: Rectangle { background: black; }
    }
}

slint

Matching on a string

export component Greeting {
    in property <string> lang: "en";

    match lang {
        "en": Text { text: "Hello"; }
        "sp": Text { text: "Hola"; }
        "fr": Text { text: "Bonjour"; }
        *:    Text { text: "Hi"; }
    }
}

slint

Wildcard case

The * case acts as a catch-all that renders when no explicit case matches the expression. It must appear as the last case, and there must be at least one explicit case before it.

match answer {
    42: Text { text: "Correct!"; }
    *:  Text { text: "Incorrect"; }
}

slint

Empty element

Any case that evaluates to the empty element { } will be skipped and not rendered. Any case can evaluate to the empty element, including the wildcard case.

match show {
    true: Text { text: "Hi"; }
    false: { }
}

slint

match toggle {
    0: Rectangle { background: white; }
    1: Rectangle { background: black; }
    *: { }
}

slint

Current limitations

The match element feature is in its early stages. The following restrictions apply:

• Cases must be literal values. Computed expressions, property references, destructured values, and function calls are not allowed as case values. Only plain literals (integers, floats, booleans, strings, enum variants, colors, lengths) are accepted.

  // Property reference as a case value
  match value {
      some-property: Rectangle { }   // error
  }
  
  // String concatenation as a case value
  match greeting {
      "hello " + "world": Text { }   // error
  }
  
  // Function call as a case value
  match count {
      func(5): Rectangle { }   // error
  }

  slint

• Float comparisons produce a warning. Comparing floating-point values for exact equality is not reliable. The compiler emits a warning for each float case value.

• @children cannot appear inside a match case. Placing the @children placeholder inside any case element is an error.

• match cannot appear in global components or interfaces. Only regular components support match elements.

• No exhaustiveness checking. Match elements do not verify that all possible values are covered. A missing case simply renders nothing.

• No duplicate case detection. No warning will be produced if the same value appears in two different cases, and both components will render.