Form flow

A form told in steps on a screen: the step's question, its fields, the position in words, the main action pinned above the keyboard and clear of the home indicator, dimmed until the step is valid.

Web · n/aMobile · ✓Desktop · n/aBetaLayout

“Sign-up in steps”, its React Native story at a phone's width — the same code on iOS and Android.

Mobile only — React Native, from @krizaka/ui/native. Beta: its API may still change in a minor version.

Web · n/a. On the web a flow is a stepper above a form. → Stepper
Desktop · n/a. The Mac app's window is the web: its flow is the stepper. → Stepper

Why it is here. the native apps: Yomizaka and Akinaza mobile, Orazaka mobile: sign-up and the profile in steps (krizaka-ui#753, #741: Yomizaka and Akinaza switch to the native templates).

When to use

Sign-up, a profile to fill, an application: more than four fields that read better one group at a time.

When not to use

Four fields or fewer.Use instead: Screen
Settings that apply at once.Use instead: Settings layout

Installation

Install

npx expo install react-native-svg
npm install @krizaka/ui

Import

import { FormFlow } from "@krizaka/ui/native";

Wrap the app once in ThemeProvider from @krizaka/ui/native: every component reads its colour roles.

Examples

React Native has no live preview on the web: each example shows the screenshot of its story, tested in both themes, and the code to copy.

Two steps, the position in words, the main action dimmed until the step is valid.

Props

A multi-step form on a Screen: head, the step, the pinned action.

Prop	Type	Default	Description
`labels`required	`{ next: string; done: string; back: string; position: (n: number, total: number) => string; }`	—	The words — passed translated.
`onDone`required	`() => void`	—	The main action on the last step.
`steps`required	`readonly FormFlowStep[]`	—	The steps, in order.
`defaultStep`	`number`	`0`	The step to start on when the flow drives itself (default 0).
`loading`	`boolean`	—	The main action is working (the request is on its way).
`onExit`	`(() => void)`	—	Back on the first step: leave the flow. Without it the first step has no back button.
`onStepChange`	`((step: number) => void)`	—	Called with the new step (from 0) when Next or Back moves it.
`step`	`number`	—	The current step, from 0, when the app drives it.

Accessibility

The position is read in words (Step 2 of 4), and the title of a step is announced when it changes (polite live region).
The main action rises with the keyboard and keeps clear of the home indicator (Screen's keyboard avoidance and the safe area).

Best practices

One question or one group of fields per step; say what the step is in title, why in description.
The fields' values belong to the app, so Back never loses what was typed.
Set valid on a step: the main action is dimmed until it is true. Validate on the server too.
The last step's action says what happens (« Create my account »), not « Done ».
Drive the step yourself (step, onStepChange) to keep it in the address; otherwise the flow keeps it.

Generated from the code of @krizaka/ui 3.65.0: its meta.ts, its examples and its types.Edit this documentation on GitHub