Form Flow Input Types

The Form Flow API provides a variety of input types to build rich form experiences. Each input type has specific properties and behaviors.

Common Input Properties

All input types share these base properties:

{
  id: string;             // Unique identifier for the input within the step
  isRequired?: boolean;   // Whether the input is required (default: true)
  isReadonly?: boolean;   // Whether the input is read-only (default: false)
}

Basic Input Types

Text Input

Simple text field for single-line input.

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

textInput({
  id: 'firstName',
  isRequired: true,
});

Email Input

Email field with validation.

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

emailInput({
  id: 'email',
  isRequired: true,
});

Textarea

Multi-line text input field.

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

textarea({
  id: 'comments',
  isRequired: false,
});

Checkbox

Boolean input field.

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

checkbox({
  id: 'agreeTerms',
  isRequired: true,
});

Hidden Input

Hidden field for storing data not visible to users.

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

hiddenInput({
  id: 'userId',
});

Selection Input Types

Dropdown

Select from a list of options.

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

dropdown({
  id: 'country',
  values: [
    { value: 'us', label: 'United States' },
    { value: 'fr', label: 'France' },
    { value: 'de', label: 'Germany' },
  ],
});

Dropdown with Condition

Dropdown whose options depend on another input’s value.

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

dropdownWithCondition({
  id: 'city',
  dependency: 'country', // Depends on the 'country' input
  values: {
    us: [
      { value: 'ny', label: 'New York' },
      { value: 'la', label: 'Los Angeles' },
    ],
    fr: [
      { value: 'paris', label: 'Paris' },
      { value: 'lyon', label: 'Lyon' },
    ],
  },
});

Single Choice

Radio button-like selection with optional icons.

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

singleChoice({
  id: 'paymentMethod',
  options: [
    { id: 'credit', icon: 'credit_card' },
    { id: 'paypal', icon: 'account_balance' },
  ],
  withOther: true, // Allow custom "Other" option
  withHelp: true, // Show help text
});

Select Offer

Card-based selection for offerings or plans.

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

selectOffer({
  id: 'plan',
  options: [
    {
      id: 'basic',
      content: '**Basic Plan**\n$9.99/month',
      description: 'Good for individuals',
    },
    {
      id: 'premium',
      content: '**Premium Plan**\n$19.99/month',
      description: 'Perfect for businesses',
    },
  ],
  selectCTALabel: 'Select',
});

Country Input

Special dropdown for selecting countries.

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

countryInput({
  id: 'country',
});

Date and Time Inputs

Date Input

Input for dates with optional date picker.

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

dateInput({
  id: 'birthdate',
  withDatePicker: true,
  rule: 'adult-birthday', // Validates for adult age
});

// Date with past-only constraint
dateInput({
  id: 'purchaseDate',
  rule: 'only-in-past',
});

Time Input

Input for time values.

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

timeInput({
  id: 'appointmentTime',
});

Number and Currency Inputs

Price Input

Input for price values.

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

priceInput({
  id: 'price',
});

Currency Input

Input for currency values with symbol.

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

currencyInput({
  id: 'amount',
});

Specialized Input Types

File Input

Input for file uploads.

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

file({
  id: 'document',
});

IMEI Input

Input specifically for IMEI numbers with validation.

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

imeiInput({
  id: 'deviceIMEI',
});

Decathlon Store Input

Special input for selecting Decathlon stores.

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

decathlonStoreInput({
  id: 'preferredStore',
});

React Input

Custom React component as an input.

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

reactInput({
  id: 'custom',
  component: ({ value, onChange }) => (
    <CustomComponent value={value} onChange={onChange} />
  ),
});

Input Groups

Address Input Group

Grouped inputs for address information.

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

address({
  id: 'shippingAddress',
});