Container

The container input type is used to group related form fields together in collapsible sections. It supports two view types: accordion (expandable/collapsible) and switcher (toggle with switch). Containers help organize complex forms by grouping related fields and reducing visual clutter.

Properties

Required Properties

• name (string): Unique identifier for the container
• type (string): Must be 'container'
• label (string): Display label for the container
• view (string): Container view type - 'accordion' or 'switcher'
• title (string): Title displayed in the container header
• schema (array): Array of form field schemas to display inside the container

Optional Properties

• disabled (boolean): Whether the container is disabled
• layout (string): Layout type for child fields (default, horizontal)
• rules (array): Validation rules (not applicable for containers)

interface

interface ContainerInputProps {
  style?: object;
  title?: string;
  view?: 'accordion' | 'switcher' | 'default';
  schema?: ISchemaItem[];
}

interface ContainerProps {
  style?: object;
  title?: string;
  isOpen?: boolean;
}

interface ContainerSchemaItem {
  name: string;
  type: 'container';
  label?: string;
  rules?: (string | object)[];
  schema?: ISchemaItem[];
  col?: number;
  placeholder?: string;
  conditions?: Conditions | Conditions[];
  multiple?: boolean;
  disabled?: boolean;
}

Basic Accordion Container

• Expandable/Collapsible: Click to expand or collapse sections
• Visual Indicator: Chevron icon shows expand/collapse state
• Smooth Animation: CSS transitions for smooth open/close
• Best for: Long forms with multiple sections

{
  name: 'personalInfo',
  type: 'container',
  label: 'Personal Information',
  view: 'accordion',
  title: 'Personal Details',
  schema: [
    {
      name: 'firstName',
      type: 'text',
      label: 'First Name',
      placeholder: 'Enter your first name',
      rules: ['required']
    },
    {
      name: 'lastName',
      type: 'text',
      label: 'Last Name',
      placeholder: 'Enter your last name',
      rules: ['required']
    },
    {
      name: 'email',
      type: 'text',
      label: 'Email',
      placeholder: 'Enter your email',
      rules: ['required', 'email']
    }
  ]
}

Personal Information

First Name*

Last Name*

Email*

Basic Switcher Container

• Toggle Control: Switch to show/hide sections
• Persistent State: Remembers open/closed state
• Compact Design: Takes less vertical space
• Best for: Optional sections or settings

{
  name: 'addressInfo',
  type: 'container',
  label: 'Address Information',
  view: 'switcher',
  title: 'Shipping Address',
  schema: [
    {
      name: 'street',
      type: 'text',
      label: 'Street Address',
      placeholder: 'Enter street address',
      rules: ['required']
    },
    {
      name: 'city',
      type: 'text',
      label: 'City',
      placeholder: 'Enter city',
      rules: ['required']
    },
    {
      name: 'zipCode',
      type: 'text',
      label: 'ZIP Code',
      placeholder: 'Enter ZIP code',
      rules: ['required']
    }
  ]
}

Address Information

Shipping Address

Street Address*

City*

ZIP Code*

Best Practices

1. Use descriptive titles that clearly explain the container's purpose
2. Group related fields logically within containers
3. Use accordion for required sections and switcher for optional ones
4. Keep container schemas focused on a single topic or purpose
5. Consider mobile experience when choosing container types
6. Use consistent naming for container properties
7. Limit nesting depth to avoid complex hierarchies
8. Test container interactions on different screen sizes