Composition and control flow

Compose views with ordinary functions and use F# conditionals and loops directly inside element computation expressions.

On this page

Overview

Compose views with ordinary functions and use F# conditionals and loops directly inside element computation expressions.

Functions as components

let navigationItem current href label =
    li {
        a {
            _href href
            if current then _ariaCurrent "page"
            label
        }
    }

Conditional content

div {
    if validationErrors.IsEmpty then
        p { _class "success"; "Ready to submit." }
    else
        ul {
            for error in validationErrors do
                li { error }
        }
}

Sequences

Element builders accept child collections directly, through yield!, or with an explicit for expression. Collection inputs are enumerated when the element tree is built, preserving source order and deterministic repeated rendering.

let rows = items |> List.map (fun item ->
    li { _data("item-id", item.id); item.label })

ul {
    rows                 // Direct collection
    yield! moreRows      // Explicit flattening
    for item in finalItems do
        li { item.label }
}