Field Error for Slint

KitFieldError · Slint Kit 0.3.0

Visual error message with a polite accessibility announcement.

Composition primitive · shared error option

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.

Run the app: the supplied invalid state and error message are displayed together.

ui/app.slint

export { KitFormValidation, HtmlInputKind, NumberInputFormat, KitInputConstraints, KitValidationResult, KitValidityState } from "@kit/kit.slint";
// SPDX-License-Identifier: GPL-3.0-or-later
import { KitField, KitFieldError, KitTextField, KitTheme, KitThemes, ValidationPresentation } from "@kit/kit.slint";

export component App inherits Window {
    title: "KitFieldError example";
    preferred-width: 420px;
    preferred-height: 220px;
    max-width: 100000px;
    max-height: 100000px;
    background: root.theme.canvas;
    in-out property <KitTheme> theme: KitThemes.light;
    in-out property <string> draft-0: "alex@";
    VerticalLayout {
        padding: 24px; spacing: 16px; alignment: start;
        Text { text: "Field Error"; color: root.theme.text-primary; font-size: 20px * root.theme.text-scale; font-weight: 600; }
        KitField {
            KitTextField { theme: root.theme; label: "Email"; text <=> root.draft-0; validation: ValidationPresentation.invalid; } KitFieldError { theme: root.theme; text: "Enter a complete email address."; }
        }
    }
}

src/main.rs

// SPDX-License-Identifier: GPL-3.0-or-later
slint::include_modules!();

fn main() -> Result<(), slint::PlatformError> {
    let app = App::new()?;
    slint_kit::init_form_validation!(self, app);
    app.run()
}

Cargo.toml and build.rs

Cargo.toml

[package]
name = "slint-kit-field-error-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

Place it near the affected field and supply a message explaining how to correct the value. Control its presence from the controller’s validation result.

It inherits KitFieldDescription and uses the danger color. Its live region is polite; actual announcements depend on the backend and assistive technology.

View source ↗

Shared option `error`

This demonstration uses KitFieldError separately. The controls below expose a built-in error property: use that property for their integrated behavior. Rendering and focus details depend on the selected control.

The 30 components exposing this property

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

// SPDX-License-Identifier: GPL-3.0-or-later
import { KitFieldError, KitTextField, KitTheme, KitThemes, ValidationPresentation } from "@kit/kit.slint";

export component Example inherits Window {
    title: "KitFieldError example";
    preferred-width: 420px;
    preferred-height: 220px;
    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: "Field Error"; color: root.theme.text-primary; font-size: 20px * root.theme.text-scale; font-weight: 600; }
        KitTextField { theme: root.theme; label: "Email"; text: "alex@"; validation: ValidationPresentation.invalid; } KitFieldError { theme: root.theme; text: "Enter a complete email address."; }
        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 KitFieldDescription.

Available inherited properties

Name	Type	Defined on
`theme`	`KitTheme`	`KitFieldDescription`