Fod.UIComponents

Interactive demo showcasing the FOD2 component library with real-time render mode statistics and comprehensive component documentation.

Quick Start

1. Browse Components

Navigate through the sidebar to explore available UI components with live demos.

2. Copy Code

Each demo includes code examples you can copy directly into your project.

3. Check API Reference

Property tables document all component parameters and their usage.

Service Components

Core domain components that model the lifecycle of public service requests.

FodWizard

Multi-step wizard orchestrator. Manages sequential navigation, step validation, auto-save, and dynamic step management across all service request flows.

FodRequestor

Requestor identity and validation. Collects natural person or legal entity data, integrates with MPass, RSP/RSUD validation. 20+ configurable parameters.

FodBeneficiary

Beneficiary management. Manages beneficiary data for service requests, supports both self-service and third-party scenarios.

FodErrorHandler

Enterprise error handling. Intercepts all HTTP 50x errors, displays user-friendly popups with retry, sends automated diagnostic reports via MNotify.

FodReceptionMode

Document reception selection. Supports electronic (EVO web), home delivery (MDelivery), and personal pickup with conditional wizard navigation.

FodConfirmation

Final review step. Displays comprehensive summary of all wizard data, cost breakdown, and handles service request submission.

UI Components

FOD Design System — reusable, accessible, multilingual Blazor components.

Form Components

FodInput, FodSelect, FodCheckbox, FodRadio, FodDatePicker, FodNumericField, FodFileUpload. Built-in validation, localization, accessibility.

Feedback Components

FodAlert, FodTooltip, FodSkeleton. Real-time user feedback with accessible WCAG 2.1 AA compliant interactions.

Action Components

FodButton, FodButtonGroup, FodIconButton. Consistent interaction patterns with multiple variants and sizes.

Data Display

FodTable, FodGrid, FodList. Responsive data presentation with sorting, filtering, and customizable layouts.

Navigation

FodDrawer, Navigation patterns. Mobile-first responsive navigation with single source of truth via NavigationService.

Utility

FodBreakpointProvider, FodCultureProvider, FodLanguageSwitch, ComponentBaseWithState. Infrastructure for responsive, multilingual, stateful components.