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 · ✓Bureau · n/aBêtaMise en page

« Sign-up in steps », son histoire React Native à la largeur d’un téléphone — le même code sur iOS et Android.

Mobile uniquement — React Native, depuis @krizaka/ui/native. Bêta : son API peut encore changer à une version mineure.

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

Pourquoi il est là. 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).

Quand l’utiliser

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

Quand ne pas l’utiliser

Four fields or fewer.À la place : Screen
Settings that apply at once.À la place : Settings layout

Installation

Installer

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

Importer

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

Enveloppez l’application une fois dans ThemeProvider de @krizaka/ui/native : chaque composant lit ses rôles de couleur.

Exemples

React Native n’a pas d’aperçu en direct sur le web : chaque exemple montre la capture de sa story, testée dans les deux thèmes, et le code à copier.

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	Défaut	Description
`labels`requis	`{ next: string; done: string; back: string; position: (n: number, total: number) => string; }`	—	The words — passed translated.
`onDone`requis	`() => void`	—	The main action on the last step.
`steps`requis	`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.

Accessibilité

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).

Bonnes pratiques

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.

Générée depuis le code de @krizaka/ui 3.65.0 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub