Survey component for Blazor

A dynamic survey / form renderer for Blazor WebAssembly and Blazor Server. Feed it a Form model and it produces a validated, styled questionnaire with real-time value tracking and JSON output.

Play with the full demo

Features

Elements (15 built-in types)

• Text inputs — Textbox (11 HTML input types: text, email, number, date, datetime, month, week, url, tel, password, color), Comment (multi-line with min/max), HTML (static markup block)
• Selection — Radiobutton (horizontal/vertical, default/boxed theme), Checkbox (multi-select), DropdownList (single or multi), ImagePicker (with/without multi-select), Switch (boolean toggle)
• Scales — Slider (custom ticks, center-thumb mode, labelled choices), NPS (0–10 or 1–11 fixed radio), LikertSkill (Agree/Helpful/Satisfied 5-point scales), Rating (1–20 stars)
• Matrix — single-choice grid with configurable rows and columns
• Containers — Panel (groups with optional background colour, supports nested Panels), Repeater (dynamic rows built from a template)

Behaviour

• Conditional visibility — every element and every choice accepts a VisibleIf expression (evaluated via PSC.Evaluator at render time) that references other field values
• Branching / terminate — TerminateIf ends the survey when a condition becomes true
• Required-field validation — standard DataAnnotations flow via EditContext
• Automatic naming convention — names auto-generated (txt_1, rdb_2, chk_3, …) or take your custom Name property
• Question numbering — hierarchical (1, 2, 3.1, 3.2 under panels); toggleable per survey
• Separator lines — visual divider between elements, controllable per render
• Event callbacks — OnFormValuesChanged, OnFormSubmitted (with full JSON payload + typed values), OnFormSubmittedError

Data model

• Strongly typed Form / List<IElement> model from PSC.Survey.Shared (netstandard2.1, so it's consumable outside Blazor)
• Polymorphic JSON round-trip via FormExtensions.SerializeForm() / DeserializeForm() — same bytes accepted by every tool in the suite (Designer, CSV/Excel/JSON importers)
• Typed result DTOs per element type (CheckboxReturn, RadiobuttonReturn, MatrixReturn, SliderChoice, ImagePickerReturn, …)

UX

• Debug panel (toggleable) — live JSON of the form definition and of the collected answers
• Custom submit text, custom CSS classes per element, dark/light theme aware via standard CSS variables
• Multi-language support via bundled resource files (English included)

What's included

• Compiled NuGet package (PSC.Blazor.Components.Survey) targeting .NET 10, tested with Blazor WebAssembly hosted and server-interactive modes
• Shared models library (PSC.Survey.Shared, netstandard2.1) as a transitive dependency
• Standalone SurveyBlazorUI demo — one page per element type with editable code snippets and live JSON preview
• LICENCE.md (one developer, annual commercial licence, unlimited end users, no redistribution)
• README.md with integration examples for every element type

Add to your project

1. Install the package

dotnet add package PSC.Blazor.Components.Survey

2. Build a form in code (or deserialize one from JSON)

@using PSC.Survey.Shared
@using PSC.Survey.Shared.Interfaces

<Survey Form="_form" ShowDebug="true"
        OnFormSubmitted="OnSubmitted" />

@code {
    Form _form = new Form {
        Elements = new List<IElement> {
            new Textbox { Title = "Name", IsRequired = true },
            new Radiobutton {
                Title = "How did you hear about us?",
                Choices = new List<object> { "Friend", "Search", "Ad" }
            },
            new Rating { Title = "Rate your experience" }
        }
    };

    async Task OnSubmitted(FormSubmittedEventArgs e) {
        var json = e.JsonValues;  // post to your API
    }
}

That's the whole integration. No DI registration, no scripts to add to index.html.

Requirements

• .NET 10 SDK
• Blazor Server or Blazor WebAssembly

Pair with

• Survey Designer — drag-and-drop visual builder for the Form model (no more hand-writing JSON)
• Survey.Shared.Imports.CSV / .Excel / .Json — bulk-import answer sets from spreadsheets or pre-filled JSON