@n8d/htwoo-patterns/_patterns/organism/form-sample/form-flow-1.md

hTWOo Patterns to setup custom style guide

---
title: Form Flow Step 1 - Raising Issue
order: 10
---

# Form Flow: Step 1 - Raising Issue

This component demonstrates the first step of a multi-step form flow, where users initiate a process by providing initial information.

## Overview

The first step of a form flow typically introduces the process and collects essential information to begin. This pattern follows progressive disclosure principles to make complex forms more manageable by breaking them into logical steps.

## Features

- Clear introduction to the form process
- Collection of only essential information to start
- Date/time automation for relevant fields
- Navigation controls to proceed to the next step
- Visual indication of the current step in the process

## Usage

Use this pattern in forms that:

- Require multiple pieces of information
- Would be overwhelming as a single page
- Follow a logical sequence of data collection
- Need to validate information at distinct stages

## JavaScript Functionality

The step 1 form includes JavaScript for:
- Automatically populating date/time fields
- Formatting dates according to the user's locale
- Calculating and displaying time intervals