●
LIVE DEMO
Generated using
Instruct UI - An AI for Blazor UI Generation
## What's implemented
- Multi-step loan application form with three tabs: Personal Information, Loan Details, Review & Submit.
- Client-side validation via DataAnnotations and validation UI (ValidationMessage, ValidationSummary).
- Review pane showing bound model values and a submit confirmation alert.
- Tab navigation and Next/Previous buttons to move between steps.
## Key components
- EditForm, DataAnnotationsValidator, ValidationMessage, ValidationSummary
- InputText, InputTextArea, InputNumber, InputSelect
- Bootstrap nav tabs and tab-pane structures, card, grid (row/col-*) and buttons
- Model: LoanApplicationModel with [Required], [Range], [EmailAddress], [Phone], [StringLength]
## How it works
- The page binds a LoanApplicationModel instance to EditForm using @bind-Value on inputs (e.g., @bind-Value="LoanApplication.FirstName").
- DataAnnotationsValidator enables model validation; ValidationMessage components display field errors and ValidationSummary shows form-level errors.
- Tab state is managed by an ActiveTab int and SetActiveTab(int) invoked by tab buttons and navigation controls.
- OnValidSubmit calls HandleValidSubmit(EditContext) which sets IsSubmitted; sample data is pre-populated in OnInitialized for demo.
## Styling
- Uses Bootstrap classes throughout: container, row, col-md-*, card, nav, nav-tabs, btn, form-control, form-select, text-utility and spacing utilities.
- Layout follows a two-column grid for most fields and stacks on smaller viewports via Bootstrap responsive columns.
- Visual grouping uses a card header (primary color) and a light review card for submitted values.
## Reuse steps
1. Add a Blazor project (Server or WASM) and ensure Bootstrap CSS is included (default Blazor template or custom bundle).
2. Copy the .razor component and its model class into a Pages or Components folder.
3. Import necessary namespaces (System.ComponentModel.DataAnnotations) and confirm EditForm is available (Microsoft.AspNetCore.Components.Forms).
4. Replace the sample OnInitialized data with real models and wire HandleValidSubmit to a backend service or API client.
5. Adjust validation attributes on LoanApplicationModel to match business rules and localize error messages as needed.
## Limitations & next steps
- This file is a single page demo generated by Instruct UI; it does not include backend services, API clients, authentication or server-side persistence.
- Add service registration and inject HttpClient or a typed API service to send form data to a server.
- Enhance UX with client-side masks (phone, currency), richer validation feedback, progress indicators, and server-side validation handling.
- Consider accessibility checks for tab roles and aria attributes and add unit/integration tests for form flow and validation.