Numbers and money

Money Field for Slint

KitMoneyField · Slint Kit 0.3.0

Numeric text input connected to Money with CurrencyCode CAD 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 CAD amount with at most two decimal places, then accept. Rust stores Money with an explicit CAD currency and exact decimal amount.

ui/app.slint

export { KitFormValidation, HtmlInputKind, NumberInputFormat, KitInputConstraints, KitValidationResult, KitValidityState } from "@kit/kit.slint";
import { KitMoneyField, KitButton, KitThemes, ValidationPresentation } from "@kit/kit.slint";
export component App inherits Window {
    title: "Amount (CAD)"; 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 := KitMoneyField {
            required: true;
            label: "Amount (CAD)"; text <=> root.draft; error: root.error;
            validation: root.error != "" ? ValidationPresentation.invalid : ValidationPresentation.pristine;
            placeholder: "12.50";
            edited(value) => { root.edited(value); }
            commit-requested(value) => { root.commit(); }
            cancelled => { root.cancel(); }
            focus-observed(focused) => { if (!focused) { root.blurred(); } }
            prefix: "CAD";
        }
        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 = Money;
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) => DraftValue::Parsed(Money {
            amount: value,
            currency: CurrencyCode::new("CAD").unwrap(),
        }),
        DraftValue::Empty => DraftValue::Empty,
        DraftValue::Incomplete => DraftValue::Incomplete,
        DraftValue::Invalid(issue) => DraftValue::Invalid(issue),
    }
}
fn format(value: &Value) -> String {
    value.amount.to_string()
}
fn main() -> Result<(), slint::PlatformError> {
    let app = App::new()?;
    slint_kit::init_form_validation!(self, app);
    let initial = Money {
        amount: DecimalValue::from_integer(12),
        currency: CurrencyCode::new("CAD").unwrap(),
    };
    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::Number, required: true,
        step: Some("any".into()),
        ..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-money-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 fixes CAD and accepts nonnegative amounts with at most two decimal places.

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 { KitMoneyField, KitTheme, KitThemes } from "@kit/kit.slint";

export component Example inherits Window {
    title: "KitMoneyField 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: "Money Field"; color: root.theme.text-primary; font-size: 20px * root.theme.text-scale; font-weight: 600; }
        KitMoneyField { theme: root.theme; label: "Budget"; text: "129.95"; prefix: "$"; 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

• Decimal Field
• Quantity Field