Form Flow Content Blocks

In addition to input fields, the Form Flow API allows you to add various content blocks to your forms. These blocks don’t collect data but provide information, instructions, or custom UI elements to enhance the user experience.

Text Block

Display formatted text using Markdown.

import { text } from '@getevy/evy-ui/flow';

text({
  id: 'instructions',
  // The actual text content comes from i18n translations
  // based on the ID
});

The text is interpreted as Markdown, allowing for rich formatting:

• Bold and italic text
• Links
• Lists
• Headers

The actual content is loaded from translation files based on the id and the current locale.

Section Message

Create a colored section with a title and content, useful for highlighting important information.

import { section } from '@getevy/evy-ui/flow';

section({
  id: 'warning',
  color: 'warning', // 'info', 'success', 'error', or 'warning'
});

Like text blocks, the actual content is loaded from translation files based on the id and current locale.

React Element

Add a custom React element to the form. This is useful for complex UI elements that aren’t inputs.

import { reactElement } from '@getevy/evy-ui/flow';

reactElement({
  id: 'custom-ui',
  element: <CustomComponent />,
});

Note: This approach is not compatible with server-side flow creation and is deprecated in favor of reactComponent.

React Component

Add a React component that receives the current form data as props. This allows for dynamic content based on user input.

import { reactComponent } from '@getevy/evy-ui/flow';

reactComponent({
  id: 'summary',
  component: ({ formData }) => {
    // Render UI based on current form data
    return (
      <div>
        <h3>Summary</h3>
        <p>
          Name: {formData.personalInfo.firstName}{' '}
          {formData.personalInfo.lastName}
        </p>
        <p>Email: {formData.personalInfo.email}</p>
      </div>
    );
  },
});

Note: This approach is not compatible with server-side flow creation.

Combining Content and Inputs

Content blocks and input fields can be freely mixed within a step:

import {
  step,
  text,
  section,
  textInput,
  emailInput,
} from '@getevy/evy-ui/flow';

step({
  id: 'registration',
  blocks: [
    // Introduction text
    text({ id: 'registration-intro' }),

    // Personal information inputs
    textInput({ id: 'firstName' }),
    textInput({ id: 'lastName' }),
    emailInput({ id: 'email' }),

    // Important notice in a highlighted section
    section({ id: 'data-policy', color: 'info' }),
  ],
  next: 'next-step',
});

Best Practices

1. Use meaningful IDs: Choose IDs that clearly describe the content’s purpose for easier maintenance.

2. Keep content in translation files: Store the actual content in translation files to support multiple languages.

3. Use Markdown formatting: Take advantage of Markdown in text blocks for better readability.

4. Use sections for important notices: Highlight important information using colored section messages.

5. Limit custom React components: While powerful, custom React components should be used sparingly to maintain form simplicity and compatibility with server-side rendering.

6. Group related content: Place related content and inputs together for a logical flow.