How to create a Multi-step form screen

Ionic Design Kit, built on a design base of Ionic Framework components, simplifies app development by providing designers with a range of pre-made elements. Designers can effortlessly pick and place elements, eliminating the need to create components from scratch. For developers, this means no complex coding – all components are sourced from the Ionic Framework. The result is a speedy, efficient, and collaborative process, making the Ionic Design Kit essential for both designers and developers.

The Multi-Step Form is an effective feature in onboarding flows, checkout processes, and data collection apps, breaking down complex forms into manageable steps or slides. A well-designed wizard-style form improves user experience by grouping related fields, providing progress indicators, and allowing navigation between steps. This approach reduces cognitive load, increases completion rates, and helps prevent errors.

This guide will walk you through the steps to design and implement a Multi-Step Form using the Ionic Design Kit. By leveraging its structured UI components and the Ionic Framework, you can create a clear, responsive, and user-friendly form process that guides users smoothly from start to finish.

1. Install Ionic CLI with the command

Creating a project with the Ionic CLI

npm i -g @ionic/cli

2. Create a new project

To create a new project, run the following command.

ionic start multi-step blank --type=react

3. Get inside the project directory

cd multi-step

4. Create a Multi-step page

Create page MultiStep.tsx inside src/pages and add code.

import { IonPage } from '@ionic/react';

const MultiStep: React.FC = () => {
  return (
    <IonPage></IonPage>
  );
};

export default MultiStep;

Please make sure that you've added routing in src/App.tsx for the created page. All Ionic framework components that will be used below should be imported similarly to the IonPage component.

5. Select the layout structure

For convenience, we will be using the layout structure recommended by Ionic for all screens. This allows us to add header code and content inside the IonPage.

<IonPage>
  <IonHeader>
    <IonToolbar>
    ...
    </IonToolbar>
  </IonHeader>
  <IonContent>
  ...
  </IonContent>
</IonPage>

6. Set up page and header

The IonPage component wraps the entire screen. Inside it, IonHeader contains a IonToolbar which is used for top navigation. The IonButtons with slot='start' positions the IonBackButton on the left. defaultHref='/' sets the back navigation route, and icon={arrowBack} sets the custom back icon.

<IonHeader>
    <IonToolbar>
        <IonButtons slot='start' className='ion-padding-start'>
            <IonBackButton defaultHref='/' text='' icon={arrowBack} />
        </IonButtons>
    </IonToolbar>
</IonHeader>

This concludes our work with IonHeader, and the following sections will cover working with IonContent.

7. Show progress bar grid

The IonContent holds the scrollable area. Inside it, IonGrid is used for layout with padding and margin classes. IonRow creates a horizontal layout, and each IonCol contains a IonProgressBar. The first bar has a value of 1, indicating progress, while the others are 0. A paragraph shows the current step text.

...
<IonContent>
    <IonGrid className='ion-padding-top ion-padding-start ion-padding-end ion-margin-top'>
        <IonRow>
            <IonCol>
                <IonProgressBar value={1} />
                <p>
                    Step 1 of 3
                </p>
            </IonCol>
            <IonCol>
                <IonProgressBar value={0} />
            </IonCol>
            <IonCol>
                <IonProgressBar value={0} />
            </IonCol>
        </IonRow>
    </IonGrid>
</IonContent>

8. Add input fields

A heading displays the section title. IonList contains multiple IonItem components used to display form fields. Each IonInput includes a label with label-placement='stacked' to show the label above the input. One item also includes a IonIcon on the right with slot='end'. The last input has helper-text to show a hint below.

<IonContent>
    ...
    <h2 className='ion-padding-start'>
        Fundraiser details
    </h2>
    <IonList>
        <IonItem>
            <IonInput label='How much would you like to raise?' label-placement='stacked' value='US$500' />
        </IonItem>
        <IonItem>
            <IonInput label='What kind of fundraiser are you creating?' label-placement='stacked' value='Creative' />
            <IonIcon slot='end' icon={chevronDown} style={{marginTop: 'auto'}} />
        </IonItem>
        <IonItem lines='none'>
            <IonInput label='Where are you fundraising?' label-placement='stacked' value='Austin, TX, US, 78756' helper-text="Use current location" />
        </IonItem>
    </IonList>
</IonContent>

9. Display legal text

The IonText wraps a paragraph with padding. It informs users about transaction fees and includes clickable IonRouterLink elements for 'terms and conditions' and 'privacy policy'. These links are part of the Ionic Router and allow navigation within the app.

<IonContent>
    ...
    <IonText>
        <p className="ion-padding-start ion-padding-end">
            Please be aware that a transaction fee, including credit and debit
            fees, is deducted from each donation. By continuing, you agree to{" "}
            <IonRouterLink>the terms and conditions </IonRouterLink> and{" "}
            <IonRouterLink>privacy policy</IonRouterLink>.
        </p>
    </IonText>
</IonContent>

IonFooter is placed at the bottom and padded for spacing. It contains an IonButton with expand='block', which makes the button stretch the full width. The button text is 'Continue' and is used to move to the next step in the process.

<IonFooter className='ion-padding'>
    <IonButton expand='block'>
        Continue
    </IonButton>
</IonFooter>

Thank you for joining us on this exciting journey thus far. Stay tuned for more guides in our comprehensive series, where we'll not only delve into various aspects of mobile app development but also showcase how the Ionic Kit can be your game-changer.

Are you prepared to elevate your Ionic experience? Explore the advantages of incorporating the Ionic Design Kit for intuitive designs and seamless development. May your coding journey be marked by continual innovation and triumphant achievements!