CX

Components

Main Site

Step Form

Multi-step form component with progress tracking, validation, and government-specific features for citizen registration and service applications.

Basic Usage

Create multi-step forms with progress indicators and validation for complex government applications.

Simple Registration Form

1
2
3

Government Registration Form

Complete citizen registration form with step-by-step guidance and bilingual support.

Citizen Registration / নাগরিক নিবন্ধন

Please fill in all required information accurately / সকল প্রয়োজনীয় তথ্য সঠিকভাবে পূরণ করুন

1
2
3
4

Personal Information / ব্যক্তিগত তথ্য

Business License Application

Multi-step business registration form with document collection and verification steps.

Trade License Application / ট্রেড লাইসেন্স আবেদন

Apply for business registration and trade license / ব্যবসা নিবন্ধন ও ট্রেড লাইসেন্সের জন্য আবেদন করুন

1
2
3
4

Business Information / ব্যবসার তথ্য

Use Cases

Application Forms

Create complex government application forms with step-by-step guidance for services like passport, visa, and license applications.

Registration Processes

Implement citizen registration, business registration, and service enrollment processes with validation and progress tracking.

Compliance Workflows

Build compliance and audit workflows with multiple verification steps, document collection, and approval processes.

Survey & Assessment

Create multi-section surveys, assessments, and evaluation forms with conditional logic and progress indicators.

Best Practices

User Experience Design

  • • Keep each step focused on a single topic or category
  • • Provide clear progress indicators and step descriptions
  • • Allow users to navigate back and forth between completed steps
  • • Show validation errors immediately and clearly
  • • Use descriptive step titles in both languages

Data Management

  • • Implement client-side validation with server-side backup
  • • Save form progress automatically to prevent data loss
  • • Provide form data review before final submission
  • • Use proper field types and input constraints
  • • Implement secure data transmission and storage

Government Standards

  • • Follow government accessibility guidelines and standards
  • • Implement proper security measures for sensitive data
  • • Provide bilingual support for all form elements
  • • Include clear instructions and help text
  • • Maintain audit trails for compliance requirements

Usage Guidelines

Do

  • Break complex forms into logical, digestible steps
  • Validate each step before allowing progression
  • Provide clear progress indicators and completion status
  • Allow users to save progress and return later
  • Use consistent bilingual labeling throughout

Don't

  • Create steps with too many fields or overwhelming content
  • Allow progression without proper validation
  • Hide the overall progress from users
  • Force users to complete forms in a single session
  • Use technical jargon without explanations

Component Specifications

Detailed specifications and characteristics of the Step Form component for implementation guidance.

SpecificationDetailsPurpose & Usage
Component TypeMulti-Step Form InterfaceBreaks complex forms into manageable steps with progress tracking
Complexity LevelHighComplex implementation with state management, validation, and navigation logic
Navigation FeaturesStep indicators, Progress bar, Next/Previous buttons, Step validationClear navigation and progress tracking for complex government application processes
State ManagementForm data persistence, Step validation, Progress tracking, Auto-saveMaintains form state across steps and prevents data loss
Validation SystemStep-by-step validation, Conditional fields, Cross-step validation, Error handlingEnsures data quality and provides guided error correction
Accessibility FeaturesKeyboard navigation, Screen reader support, Focus management, ARIA labelsEnsures form accessibility for all citizens including those with disabilities
Language SupportEnglish, Bengali (বাংলা)Bilingual form content and navigation for government applications
Design SystemProgress indicators, Button styles, Layout grid, Animation systemConsistent with CivixUI design principles and government branding
Mobile OptimizationTouch-friendly navigation, Responsive layout, Adaptive step indicatorsOptimized for mobile government service applications
Use CasesApplication forms, Registration processes, Multi-stage workflows, Document submissionEssential for complex government service applications requiring multiple information steps

Accessibility

Keyboard Navigation

All form elements are accessible via keyboard navigation with proper tab order and focus management.

Screen Readers

Proper ARIA labels, roles, and descriptions are provided for all interactive elements and form states.

Visual Indicators

Clear visual feedback for current step, completed steps, validation errors, and progress status.

Language Support

Full bilingual support with proper language attributes and text direction handling.

Radio GroupMain SiteTimeline