BeepFormWidget
Form layout widget with ten styles: field groups, validation panels, form sections, input cards, multi-step form steps, fieldsets, inline/compact layouts, validated inputs, and form summaries.
Overview
BeepFormWidget is a paint-based WinForms widget that inherits from BaseControl. It uses an IWidgetPainter pipeline to render rich visuals without child controls. The Style property selects one of 10 built-in render modes; changing it at runtime immediately swaps the painter and triggers a repaint.
Category: Beep Widgets → Forms
Default size: 360 × 280
Namespace: TheTechIdea.Beep.Winform.Controls.Widgets
Key Features
📝 Ten Form Styles
From compact inline to multi-step wizard — every form layout covered.
✅ Validation Display
ValidatedInput and ValidationPanel render per-field error messages.
🔢 FormStep
FormStep style integrates with BeepNavigationWidget WizardSteps for multi-step flows.
📋 FormSummary
Read-only summary style for review-before-submit screens.
🎨 Theme tokens
ValidColor, InvalidColor, and AccentColor default to active theme tokens.
⭐ Required Indicators
ShowRequired renders asterisks on required fields automatically.
Style Variants (10)
| Style Value | Description |
|---|---|
FieldGroup | Grouped set of related labelled input fields. |
ValidationPanel | Form section with live validation state indicators. |
FormSection | Titled section dividing a long form into logical parts. |
InputCard | Single-input styled card — ideal for prominent single fields. |
FormStep | One step in a multi-step form with step number and title. |
FieldSet | Traditional HTML-style fieldset with legend. |
InlineForm | Horizontal side-by-side label/input layout. |
CompactForm | Space-efficient stacked layout for dense UIs. |
ValidatedInput | Single input with inline validation message below. |
FormSummary | Read-only summary of submitted form data. |
Properties
| Property | Type | Default | Description |
|---|---|---|---|
Style | FormWidgetStyle | FieldGroup | Selects the form layout painter. |
Title | string | "Form Widget" | Section or card heading. |
Subtitle | string | "Data Entry" | Secondary sub-heading. |
Description | string | "" | Helper text below the title. |
Fields | List<FormField> | (empty) | Form fields. Each FormField has Label, Value, Type, IsRequired, IsValid, ErrorMessage. |
IsValid | bool | true | Overall form validity state. |
ShowRequired | bool | true | Show asterisks on required fields. |
ShowValidation | bool | true | Show validation icons/messages. |
AccentColor | Color | (theme primary) | Active/focused field border colour. |
ValidColor | Color | (theme success) | Border/icon colour for valid fields. |
InvalidColor | Color | (theme error) | Border/icon colour for invalid fields. |
Inherits all BaseControl properties (Border, Padding, Theme colors, etc.).
Events
| Event | Args Type | Description |
|---|---|---|
FieldClicked | BeepEventDataArgs | Fired when a field area is clicked. Data contains FormField. |
SubmitClicked | BeepEventDataArgs | Fired when a submit button (if rendered) is clicked. |
FieldChanged | BeepEventDataArgs | Fired when a field value changes. Data contains FormField with new value. |
Basic Usage
var form = new BeepFormWidget
{
Style = FormWidgetStyle.ValidationPanel,
Title = "User Registration",
Fields = new List
{
new FormField { Label = "First Name", Value = "", IsRequired = true },
new FormField { Label = "Last Name", Value = "", IsRequired = true },
new FormField { Label = "Email", Value = "", IsRequired = true,
IsValid = false, ErrorMessage = "Enter a valid email" },
new FormField { Label = "Phone", Value = "", IsRequired = false },
},
Size = new Size(380, 280)
};
this.Controls.Add(form);
Event Handling
form.FieldClicked += (s, e) =>
{
var field = (FormField)e.Data;
FocusNativeInput(field.Label);
};
form.SubmitClicked += (s, e) => ValidateAndSubmit();
Best Practices
- Set
Stylebefore adding the widget to the form to avoid double repaints. - Adjust
Sizeto fit your layout — defaults are minimum comfortable sizes. - Read
BeepEventDataArgs.Datain event handlers for context-specific click data. - Call
Invalidate()after updating data properties to trigger a repaint. - Let theme colors flow from
BeepStyling.CurrentTheme— avoid overriding color properties unless customization is explicitly desired.