Crate egui_form

egui_form

egui_form adds form validation to egui. It can either use validator or garde for validation. This also means, if you use rust you can use the same validation logic on the server and the client.

Check the docs for the validator implementation or the garde implementation to get started.

You can also build a custom implementation by implementing the EguiValidationReport for the result of whatever form validation crate you use.

Showcase

You can try the Signup Form example in hello_egui showcase app.

Also, here’s a screenshot from HelloPaint’s profile form:

Should I use validator or garde?

For small / prototype projects, I’d recommend garde, since it has built in error messages. For bigger projects that might require i18n, it might make sense to use validator, since it allows for custom error messages (garde as of now has no i18n support).

In HelloPaint I’m using garde, since it seems a bit cleaner and more active, hoping that i18n will be solved before it becomes a problem for HelloPaint.

Minimal example using garde

From egui_form_minimal.rs

use eframe::NativeOptions;
use egui::{TextEdit, Ui};
use egui_form::garde::{GardeReport, field_path};
use egui_form::{Form, FormField};
use garde::Validate;


#[derive(Debug, Default, Validate)]
struct Fields {
    #[garde(length(min = 2, max = 50))]
    user_name: String,
}

fn form_ui(ui: &mut Ui, fields: &mut Fields) {
    let mut form = Form::new().add_report(GardeReport::new(fields.validate()));

    FormField::new(&mut form, field_path!("user_name"))
        .label("User Name")
        .ui(ui, TextEdit::singleline(&mut fields.user_name));

    if let Some(Ok(())) = form.handle_submit(&ui.button("Submit"), ui) {
        println!("Submitted: {:?}", fields);
    }
}

Modules

garde

To use garde with egui_form, you need to create a garde::GardeReport and pass it to the Form instance.

validator

To use validator with egui_form, you need to create a validator::ValidatorReport and pass it to the Form instance.

Macros

_garde_field_path

Create a garde::Path to be submitted to crate::FormField::new Example:

_validator_field_path

Create a field path to be submitted to a crate::FormField::new. This macro takes a list of field names and indexes and returns a slice of PathItems.

Structs

Form

Form connects the state of the individual form fields with the validation results. It’s also responsible for handling the submission and focusing the first invalid field on error.

FormField

A form field that can be validated. Will color the field red (using the color from egui::style::Visuals::error_fg_color) if there is an error. Will show the error message below the field if the field is blurred and there is an error.

Traits

EguiValidationReport

A trait telling egui_form how to parse validation errors.

IntoFieldPath

Helper trait to allow constructing non-nested FormFields without using the field_path!() macro