Input Types

The form system supports various input types to handle different data formats and user interactions. Each input type has specific properties and behaviors.

Available Input Types

Type	Data Type	Use Case	Validation	Documentation
text	string	General text input	Email, regex, custom	Text Input
number	number	Numeric values	Min/max, custom	Number Input
select	any	Single choice from list	Required	Select Input
radio	any	Single choice from options	Required	Radio Input
switcher	boolean	Toggle on/off	None	Switcher Input
static	any	Display only	None	Static Input
container	object	Group fields	Nested validation	Container Input

Quick Reference

Text Input

Basic text input field for string values.

{
  name: 'username',
  type: 'text',
  label: 'Username',
  placeholder: 'Enter username',
  rules: ['required']
}

Number Input

Numeric input field for integer and decimal values.

{
  name: 'age',
  type: 'number',
  label: 'Age',
  placeholder: 'Enter your age',
  rules: ['required']
}

Select Input

Dropdown selection with predefined options.

{
  name: 'country',
  type: 'select',
  label: 'Country',
  options: [
    { id: 1, text: 'Ukraine' },
    { id: 2, text: 'USA' }
  ],
  rules: ['required']
}

Radio Input

Radio button selection for single choice from multiple options.

{
  name: 'gender',
  type: 'radio',
  label: 'Gender',
  options: [
    { id: 'male', text: 'Male' },
    { id: 'female', text: 'Female' }
  ],
  rules: ['required']
}

Switcher Input

Toggle switch for boolean values.

{
  name: 'notifications',
  type: 'switcher',
  label: 'Enable notifications'
}

Static Input

Read-only display field for showing values.

{
  name: 'id',
  type: 'static',
  label: 'User ID',
  value: '12345'
}

Container Input

Container for grouping related fields.

{
  name: 'address',
  type: 'container',
  label: 'Address Information',
  schema: [
    {
      name: 'street',
      type: 'text',
      label: 'Street Address',
      rules: ['required']
    },
    {
      name: 'city',
      type: 'text',
      label: 'City',
      rules: ['required']
    }
  ]
}

Option Interface

For select and radio inputs, options follow this interface:

interface IOption {
  id: number | string; // Unique identifier
  text: string; // Display text
  color?: string; // Optional color for styling
}

Custom Input Types

You can extend the system with custom input types by:

1. Creating a new input component
2. Adding it to the inputs index
3. Using the new type in your schema

Best Practices

1. Choose appropriate input types for your data
2. Use placeholders to guide user input
3. Provide clear labels for all fields
4. Group related fields using containers
5. Set appropriate validation rules for each type
6. Consider accessibility when choosing input types