Numbers and money

Duration Field for Slint

KitDurationField · Slint Kit 0.3.0

Numeric text input connected to DurationValue in Rust.

Run preview

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.

Enter a whole number of milliseconds and accept. Rust rejects negative or fractional milliseconds and keeps a DurationValue.

ui/app.slint

export { KitFormValidation, HtmlInputKind, NumberInputFormat, KitInputConstraints, KitValidationResult, KitValidityState } from "@kit/kit.slint";
import { KitDurationField, KitButton, KitThemes, ValidationPresentation } from "@kit/kit.slint";
export component App inherits Window {
    title: "Duration"; preferred-width: 520px; preferred-height: 320px;
    max-width: 100000px; max-height: 100000px; background: KitThemes.light.canvas;
    in-out property <string> draft; in property <string> error; in property <string> accepted;
    callback edited(string); callback commit(); callback blurred(); callback cancel();
    
    VerticalLayout {
        padding: 24px; spacing: 16px; alignment: start;
        control := KitDurationField {
            required: true;
            label: "Duration"; text <=> root.draft; error: root.error;
            validation: root.error != "" ? ValidationPresentation.invalid : ValidationPresentation.pristine;
            placeholder: "1000";
            edited(value) => { root.edited(value); }
            commit-requested(value) => { root.commit(); }
            cancelled => { root.cancel(); }
            focus-observed(focused) => { if (!focused) { root.blurred(); } }
            suffix: "ms";
        }
        KitButton { text: "Accept"; activated => { root.commit(); } }
        Text { text: "Accepted: " + root.accepted; color: KitThemes.light.text-primary; wrap: word-wrap; }
    }
}

src/main.rs

use slint::ComponentHandle;
use slint_kit::*;
slint::include_modules!();
type Value = DurationValue;
fn parse(text: &str) -> DraftValue<Value> {
    match (DecimalRules {
        locale: NumberLocale::EnCa,
        scale: DecimalScale::new(2).unwrap(),
        sign: SignPolicy::NonNegative,
        bounds: None,
    })
    .parse(text)
    {
        DraftValue::Parsed(value) => {
            match DurationValue::from_quantity(value, DurationUnit::Milliseconds) {
                Ok(value) => DraftValue::Parsed(value),
                Err(issue) => DraftValue::Invalid(issue),
            }
        }
        DraftValue::Empty => DraftValue::Empty,
        DraftValue::Incomplete => DraftValue::Incomplete,
        DraftValue::Invalid(issue) => DraftValue::Invalid(issue),
    }
}
fn format(value: &Value) -> String {
    value.milliseconds().to_string()
}
fn main() -> Result<(), slint::PlatformError> {
    let app = App::new()?;
    slint_kit::init_form_validation!(self, app);
    let initial = DurationValue::from_milliseconds(1000);
    app.set_accepted(format(&initial).into());
    let weak = app.as_weak();
    let field = FieldBinding::<Value, ()>::new(
        Some(initial),
        Ownership::Local,
        CommitPolicy::OnBlur,
        AbsencePolicy::Required,
        parse,
        format,
        |_| String::new(),
        move |view| {
            if let Some(app) = weak.upgrade() {
                app.set_draft(view.draft.into());
                app.set_error(view.error.into());
            }
        },
    );
    field.set_html_constraints(slint_kit::HtmlConstraints {
        kind: slint_kit::HtmlInputKind::Text, required: true,
        ..Default::default()
    });
    let weak = app.as_weak();
    field.on_intent(move |intent| {
        if let Some(app) = weak.upgrade() {
            if let FieldIntent::Commit(value) = intent {
                app.set_accepted(format(&value).into());
            }
        }
    });
    let binding = field.clone();
    app.on_edited(move |text| {
        let _ = binding.edited(&text);
    });
    let binding = field.clone();
    app.on_commit(move || {
        let _ = binding.commit(CommitTrigger::Submit);
    });
    let binding = field.clone();
    app.on_blurred(move || {
        let _ = binding.commit(CommitTrigger::Blur);
    });
    let binding = field.clone();
    app.on_cancel(move || binding.cancel());

    app.run()
}

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

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

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

Use FieldBinding with an explicit parser, formatter and commit policy. The example accepts whole, nonnegative milliseconds. Fractional milliseconds are rejected.

Draft text stays separate from the accepted typed value. Invalid or incomplete input shows an error without replacing that value.

View source ↗

Choose between built-in options and custom composition

Shared options

• label — built-in property; custom composition example
• description — built-in property; custom composition example
• error — built-in property; custom composition example

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
// Display projections are fixtures. Validate accepted domain values in Rust.
import { KitDurationField, KitTheme, KitThemes } from "@kit/kit.slint";

export component Example inherits Window {
    title: "KitDurationField 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: "Duration Field"; color: root.theme.text-primary; font-size: 20px * root.theme.text-scale; font-weight: 600; }
        KitDurationField { theme: root.theme; label: "Duration"; text: "01:30"; edited(value) => { root.status = "Draft: " + value; } }
        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 KitDecimalField.

See also

• Integer Field
• Time Field