Form

When to Use

• Data collection forms such as registration, contact, or feedback forms
• Settings pages with multiple fields that need labels and validation
• Multi-field validation workflows like password changes or profile updates
• Any form requiring consistent layout with labels, descriptions, and error messages

Validation Pattern

Lumeo form inputs (Input, Select, Checkbox, Switch, Textarea, and others) do not carry Label, Required, Error, or HelpText props directly. Instead, wrap any input in <FormField> to attach a label, helper text, required marker, and inline error message. The FormField cascades a FormFieldContext so that child <FormLabel> and <FormMessage> components automatically reflect the error state without any extra wiring.

Examples

Reset to initial values

The Form component takes a snapshot of the model when it's first attached. Two reset methods are available:

• Form.Reset() — clears errors, dirty fields, and submission state, but leaves the bound model values alone. Useful after a successful submit when you want to keep what the user typed but drop the validation overlay.
• Form.ResetValues() — restores every property on the model to the snapshot taken at first render, then clears errors / dirty / submission state. The "Cancel changes" button on an edit form.

Snapshot timing. The snapshot is captured on first render against the model reference you passed. If you swap the entire model (e.g. _model = newOne), call Form.CaptureSnapshot() on the new model so the next ResetValues() restores to the right baseline.