Slint Kit Documentation

Form structure

Form Error Summary for Slint

KitFormErrorSummary · Slint Kit 0.3.1

Error list that lets users reach affected fields.

Error list that lets users reach affected fields.
Native app built from the example below.

Try the component

Download the complete project, extract it and run cargo run --locked in its folder. Rust 1.92+; Slint Kit 0.3.0 from crates.io. You can also copy the four files below.

Click the error message: Rust publishes a fresh focus request; then type into Project name.

ui/app.slint

export { KitFormValidation, HtmlInputKind, NumberInputFormat, KitInputConstraints, KitValidationResult, KitValidityState } from "@kit/kit.slint";
// SPDX-License-Identifier: GPL-3.0-or-later
import { KitFocusTarget, KitTextField, KitThemes, FocusRequest, KitFormErrorSummary } from "@kit/kit.slint";
export { FocusRequest }
export component App inherits Window {
    title: "KitFormErrorSummary";
    preferred-width: 460px;
    preferred-height: 260px;
    max-width: 100000px;
    max-height: 100000px;
    background: KitThemes.light.canvas;
    in-out property <string> draft;
    in property <FocusRequest> focus-request;
    callback request-focus(FocusRequest);
    VerticalLayout {
        padding: 24px; spacing: 16px; alignment: start;
        KitFormErrorSummary { errors: [{ target: { present: true, token: 42, generation: 1, request: 1 }, message: "Enter a project name." }]; error-activated(target) => { root.request-focus(target); } }
        KitFocusTarget {
            token: 42; generation: 1; request: root.focus-request;
            focus-requested => { editor.take-focus(); }
            editor := KitTextField { label: "Project name"; text <=> root.draft; }
        }
        Text { text: "Draft: " + root.draft; color: KitThemes.light.text-primary; }
    }
}

src/main.rs

// SPDX-License-Identifier: GPL-3.0-or-later
use slint::ComponentHandle;
use std::cell::Cell;
slint::include_modules!();

fn main() -> Result<(), slint::PlatformError> {
    let app = App::new()?;
    slint_kit::init_form_validation!(self, app);
    let sequence = Cell::new(0_i32);
    let weak = app.as_weak();
    app.on_request_focus(move |mut target: FocusRequest| {
        if let Some(app) = weak.upgrade() {
            let request = sequence
                .get()
                .checked_add(1)
                .expect("focus request capacity");
            sequence.set(request);
            target.request = request;
            app.set_focus_request(target);
        }
    });
    app.run()
}
Cargo.toml and build.rs

Cargo.toml

[package]
name = "slint-kit-form-error-summary-example"
version = "0.1.0"
edition = "2024"
rust-version = "1.92"
license = "GPL-3.0-or-later"
publish = false

[dependencies]
slint-kit = "=0.3.0"
slint = { version = "=1.18.1", default-features = false, features = ["std", "compat-1-18", "backend-winit", "renderer-skia", "accessibility"] }

[build-dependencies]
slint-kit-build = "=0.3.0"

[workspace]

build.rs

fn main() {
    slint_kit_build::compile("ui/app.slint").expect("compile component example");
}

Files: Cargo.toml · build.rs · ui/app.slint · src/main.rs

Supply errors with their stable FocusRequest targets. Handle error-activated by requesting focus on the affected editor; the example demonstrates one field.

The heading shows the error count and each message becomes a keyboard action. Its target keeps its token and generation regardless of message position.

View source ↗

Visual composition

The file below produces the screenshot. For controller-driven components, it shows the displayed state without supplying the Rust wiring. Create a project.

Show the screenshot source
Error list that lets users reach affected fields.
Native screenshot of the same example, rendered with Skia.
// SPDX-License-Identifier: GPL-3.0-or-later
import { KitFormErrorSummary, KitTheme, KitThemes } from "@kit/kit.slint";

export component Example inherits Window {
    title: "KitFormErrorSummary example";
    preferred-width: 420px;
    preferred-height: 180px;
    max-width: 100000px;
    max-height: 100000px;
    background: root.theme.canvas;
    in-out property <KitTheme> theme: KitThemes.light;
    in-out property <string> status;
    VerticalLayout {
        padding: 24px; spacing: 16px; alignment: start;
        Text { text: "Form Error Summary"; color: root.theme.text-primary; font-size: 20px * root.theme.text-scale; font-weight: 600; }
        KitFormErrorSummary { theme: root.theme; errors: [{ target: { present: true, token: 42, generation: 1, request: 1 }, message: "Enter a complete email address." }]; error-activated(request) => { root.status = "Focus field " + request.token; } }
        if root.status != "": Text { text: root.status; color: root.theme.text-secondary; font-size: 12px * root.theme.text-scale; wrap: word-wrap; }
    }
}

Download this example

Public API

Inherits KitFieldGroup.

Properties

Name Type Direction
theme KitTheme in
title string in
errors [FormErrorRow] in

Types and variants

Type Declaration
struct FocusRequest present: bool, token: int, generation: int, request: int
struct FormErrorRow target: FocusRequest, message: string

Callbacks

See also