🚧 Under Construction
This component documentation is currently being developed. Some features may be incomplete.
Form Flow Step 1 - Raising Issue
View in Pattern LabHTML Markup
<section class="facility-form">
<fieldset id="new-item-form" class="hoo-fieldset no-outline">
<div class="hoo-field" role="group">
<label class="hoo-label " for="toggle-97">Issue Type</label>
<menu class="hoo-radiobutton-group" role="radiogroup" tabindex="0">
<li tabindex="-1" role="radio">
<input type="radio" name="radio-button-group" id="rbg1" value="Electrical" class="hoo-radio">
<label for="rbg1" >Electrical</label>
</li>
<li tabindex="-1" role="radio">
<input type="radio" name="radio-button-group" id="rbg2" value="Plubming" class="hoo-radio">
<label for="rbg2" >Plumbing</label>
</li>
<li tabindex="-1" role="radio">
<input type="radio" name="radio-button-group" id="rbg3" value="HAVC" class="hoo-radio">
<label for="rbg3" ><abbr>HVAC</abbr>- Heating, Ventilation, and Air Conditioning</label>
</li>
<li tabindex="-1" role="radio">
<input type="radio" name="radio-button-group" id="rbg4" value="Safety Hazard" class="hoo-radio">
<label for="rbg4" >Safety Hazard</label>
</li>
</menu>
</div>
<div class="hoo-field stretched" role="group">
<label class="hoo-label " for="toggle-97">Location</label>
<div class="hoo-select">
<div id='custom-select-status' class='hidden-visually' aria-live="polite">
</div>
<input type="text" id="hoo-select-input" class="hoo-select-text" aria-autocomplete="both"
aria-controls="custom-select-list" autocomplete="off">
<button class="hoo-buttonicon"
><span class="hoo-icon">
<svg class="hoo-icon-svg icon-arrow-down" aria-hidden="true">
<use xlink:href="/htwoo-core/images/icons.svg#icon-arrow-down">
</use>
</svg></span>
</button>
<ul class="hoo-select-dropdown ">
<li class="hoo-optgroup">
<div class="hoo-optgroup-name">Building A</div>
<ul class="hoo-optgroup-items">
<li data-value="A101 - Conference Room - Small" class="hoo-option " aria-disabled="false">A101 - Conference Room - Small</li>
<li data-value="A102 - Meeting Room - Large" class="hoo-option " aria-disabled="false">A102 - Meeting Room - Large</li>
<li data-value="A103 - Kitchen Area - Employee Lounge" class="hoo-option " aria-disabled="false">A103 - Kitchen Area - Employee Lounge</li>
<li data-value="A104 - Breakout Space - Casual" class="hoo-option " aria-disabled="false">A104 - Breakout Space - Casual</li>
<li data-value="A105 - Storage Room - Supplies" class="hoo-option " aria-disabled="false">A105 - Storage Room - Supplies</li>
<li data-value="A106 - Restroom - Men’s" class="hoo-option " aria-disabled="false">A106 - Restroom - Men’s</li>
<li data-value="A107 - Restroom - Women’s" class="hoo-option " aria-disabled="false">A107 - Restroom - Women’s</li>
<li data-value="A108 - Server Room" class="hoo-option " aria-disabled="false">A108 - Server Room</li>
</ul>
</li>
<li class="hoo-optgroup">
<div class="hoo-optgroup-name">Building B</div>
<ul class="hoo-optgroup-items">
<li data-value="B201 - Manager’s Office - John Doe" class="hoo-option " aria-disabled="false">B201 - Manager’s Office - John Doe</li>
<li data-value="B202 - Customer Service - Shared Desk" class="hoo-option " aria-disabled="false">B202 - Customer Service - Shared Desk</li>
<li data-value="B203 - R&D Lab - Prototype Testing" class="hoo-option " aria-disabled="false">B203 - R&D Lab - Prototype Testing</li>
<li data-value="B204 - Lounge - Break Area" class="hoo-option " aria-disabled="false">B204 - Lounge - Break Area</li>
<li data-value="B205 - Conference Room - Middle" class="hoo-option " aria-disabled="false">B205 - Conference Room - Middle</li>
<li data-value="B206 - Storage - Documents" class="hoo-option " aria-disabled="false">B206 - Storage - Documents</li>
<li data-value="B207 - Restroom - Unisex" class="hoo-option " aria-disabled="false">B207 - Restroom - Unisex</li>
<li data-value="B208 - Utility Room" class="hoo-option " aria-disabled="false">B208 - Utility Room</li>
</ul>
</li>
<li class="hoo-optgroup">
<div class="hoo-optgroup-name">Building C</div>
<ul class="hoo-optgroup-items">
<li data-value="C301 - Sales Office - Meeting Area" class="hoo-option " aria-disabled="false">C301 - Sales Office - Meeting Area</li>
<li data-value="C302 - Marketing Department - Creative Team" class="hoo-option " aria-disabled="false">C302 - Marketing Department - Creative Team</li>
<li data-value="C303 - IT Support - Desk Area" class="hoo-option " aria-disabled="false">C303 - IT Support - Desk Area</li>
<li data-value="C304 - Operations Office - Supplies" class="hoo-option " aria-disabled="false">C304 - Operations Office - Supplies</li>
<li data-value="C305 - HR Office - Employee Records" class="hoo-option " aria-disabled="false">C305 - HR Office - Employee Records</li>
<li data-value="C306 - Kitchen Area - Coffee Station" class="hoo-option " aria-disabled="false">C306 - Kitchen Area - Coffee Station</li>
<li data-value="C307 - Meeting Room - Virtual Teams" class="hoo-option " aria-disabled="false">C307 - Meeting Room - Virtual Teams</li>
<li data-value="C308 - Restroom - Gender Neutral" class="hoo-option " aria-disabled="false">C308 - Restroom - Gender Neutral</li>
</ul>
</li>
<li class="hoo-optgroup">
<div class="hoo-optgroup-name">Building D</div>
<ul class="hoo-optgroup-items">
<li data-value="D401 - Executive Office - CEO" class="hoo-option " aria-disabled="false">D401 - Executive Office - CEO</li>
<li data-value="D402 - Creative Space - Design Team" class="hoo-option " aria-disabled="false">D402 - Creative Space - Design Team</li>
<li data-value="D403 - Meeting Room - Large" class="hoo-option " aria-disabled="false">D403 - Meeting Room - Large</li>
<li data-value="D404 - Library - Research Area" class="hoo-option " aria-disabled="false">D404 - Library - Research Area</li>
<li data-value="D405 - Employee Lounge - Relaxation Area" class="hoo-option " aria-disabled="false">D405 - Employee Lounge - Relaxation Area</li>
<li data-value="D406 - Printer Room - Multi-Function" class="hoo-option " aria-disabled="false">D406 - Printer Room - Multi-Function</li>
<li data-value="D407 - Restroom - Women’s" class="hoo-option " aria-disabled="false">D407 - Restroom - Women’s</li>
<li data-value="D408 - Restroom - Men’s" class="hoo-option " aria-disabled="false">D408 - Restroom - Men’s</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="hoo-field" role="group">
<label class="hoo-label " for="toggle-97">Equipment/Asset ID</label>
<input class="hoo-input-text" id="toggle-97" type="text"
placeholder="ACME-1234-5678" size='16'>
<p class="hoo-input-description" id="equipment-asset-id-input-97">Unique identifier assigned to the equipment or asset. Watch out for a label with in the form ACME-1234-5678</p>
</div>
<div class="hoo-field" role="group">
<label class="hoo-label " for="toggle-97">Priority Level</label>
<menu class="hoo-radiobutton-group" role="radiogroup" tabindex="0">
<li tabindex="-1" role="radio">
<input type="radio" name="priority-level" id="proiority-1" value="Low" class="hoo-radio">
<label for="proiority-1" >Low</label>
</li>
<li tabindex="-1" role="radio">
<input type="radio" name="priority-level" id="proiority-2" value="Medium" class="hoo-radio">
<label for="proiority-2" >Medium</label>
</li>
<li tabindex="-1" role="radio">
<input type="radio" name="priority-level" id="proiority" value="High-3" class="hoo-radio">
<label for="proiority" >High</label>
</li>
<li tabindex="-1" role="radio">
<input type="radio" name="priority-level" id="proiority-4" value="Urgent" class="hoo-radio">
<label for="proiority-4" >Urgent</label>
</li>
</menu>
</div>
<div class="hoo-field" role="group">
<label class="hoo-label " for="toggle-97">Issue Description</label>
<p class="hoo-input-description" id="issue-type-radio-97">Please provide a detailed explanation of the issue that help the team understand the situation.<br>Minimum of 20 characters and a maximum of 500 characters.</p>
<textarea class="hoo-input-text" id="toggle-97" maxlength='500' minlength='20' style='max-width: 65ch; width: 100%; height: 5lh;'>
</textarea>
</div>
<div class="hoo-field" role="group">
<label class="hoo-label " for="toggle-97">Reported By</label>
<input class="hoo-input-text" id="toggle-97" type="text"
placeholder="" size='30'>
</div>
<div class="hoo-field" role="group">
<label class="hoo-label " for="toggle-97">Date/Time Reported</label>
<input type="datetime-local" class="hoo-input-date" name="my-date-picker-name" value="2021-10-26" min="2018-01-01" max="2030-12-31" >
</div>
<div class="actions">
<button class="hoo-button"><span class="hoo-button-label">Cancel</span>
</button>
<button class="hoo-button-primary"><span class="hoo-button-label">Report issue</span>
</button>
</div>
</fieldset>
</section>
<script>// Get the current date and time
const now = new Date();
// Format the date and time based on the user's locale
const formattedDateTime = now.toLocaleString(); // Automatically uses the system's locale
// Insert the current date and time into the first<time>field
document.getElementById('current-time').setAttribute('datetime', now.toISOString());
document.getElementById('current-time').textContent = formattedDateTime;
// Calculate the next time (one hour later)
const nextTime = new Date(now.getTime() + 60 * 60 * 1000); // Adds one hour (60 minutes * 60 seconds * 1000 ms)
// Format the next time based on the user's locale
const formattedNextTime = nextTime.toLocaleString();
// Insert the next time into the second<time>field
document.getElementById('next-time').setAttribute('datetime', nextTime.toISOString());
document.getElementById('next-time').textContent = formattedNextTime;</script>
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