# Form Source: https://lumeo.nativ.sh/components/form # Form Structured form layout with labels, descriptions, and validation messages. ## Installation .NET CLI PackageReference Lumeo CLI dotnet add package Lumeo One-time app setup (`AddLumeo()`, CSS & JS) is covered in the [installation guide](docs/introduction). ## Usage @using Lumeo
## 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 `` to attach a label, helper text, required marker, and inline error message. The `FormField` cascades a `FormFieldContext` so that child `` and `` components automatically reflect the error state without any extra wiring. Preview Code Input with Validation Email\* We will never share your email. Validate Preview Code Select with Validation Role\* Select an option Validate Preview Code Checkbox and Switch with Validation I accept the terms and conditions Email Notifications Receive updates about your account. Submit ## Examples Preview Code Default Username This is your public display name. Email We will never share your email. Submit Preview Code With Validation Error Email Enter your email address. Please enter a valid email address. Please enter a valid email address. Preview Code Password Change Current Password New Password At least 8 characters. Confirm Password Update Password ## 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. Preview Code Reset to initial values Display name Bio Save Cancel changes **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. ## API Reference ### Form Prop Type Default Description Model TModel? null The form model object to validate. ChildContent RenderFragment? null Form fields and submit button. OnValidSubmit EventCallback — Callback invoked when the form is submitted and validation passes. OnInvalidSubmit EventCallback — Callback invoked when the form is submitted and validation fails. Validator IFormValidator? null Custom validator implementation for the form model. Class string? null Additional CSS classes. AdditionalAttributes Dictionary? null Additional HTML attributes. ### FormField Prop Type Default Description Label string? null Label text for the field. HelpText string? null Helper text shown below the input when there is no error. Error string? null Error message. Turns the label red and displays below the input. Required bool false Shows a red asterisk next to the label. Orientation Lumeo.Orientation Vertical Layout orientation. Values: Vertical, Horizontal. LabelWidth string? null Width of the label column in horizontal orientation. Name string? null Field name identifier for validation. ChildContent RenderFragment? null Input elements for the field. Class string? null Additional CSS classes. AdditionalAttributes Dictionary? null Additional HTML attributes. ### FormItem Prop Type Default Description ChildContent RenderFragment? null Form item content (label, input, description, message). Class string? null Additional CSS classes. AdditionalAttributes Dictionary? null Additional HTML attributes. ### FormLabel Prop Type Default Description ChildContent RenderFragment? null Label text. Turns red when the parent FormField has an error. Class string? null Additional CSS classes. AdditionalAttributes Dictionary? null Additional HTML attributes. ### FormDescription Prop Type Default Description ChildContent RenderFragment? null Helper description text. Class string? null Additional CSS classes. AdditionalAttributes Dictionary? null Additional HTML attributes. ### FormMessage Prop Type Default Description Class string? null Additional CSS classes. AdditionalAttributes Dictionary? null Additional HTML attributes. Automatically displays the error from the parent FormField. ## Related Components - [Input](/components/input) — For individual text input fields used within form fields - [Select](/components/select) — For dropdown selection fields within forms - [Checkbox](/components/checkbox) — For boolean or multi-select options in forms - [Button](/components/button) — For form submission and cancel actions