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)

Examples

Basic Accordion Container

{
  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

{
  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*

Multiple Accordion Containers

const schema = [
  {
    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'],
      },
    ],
  },
  {
    name: 'addressInfo',
    type: 'container',
    label: 'Address Information',
    view: 'accordion',
    title: 'Address Details',
    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'],
      },
    ],
  },
];

Personal Information

First Name*

Last Name*

Email*

Address Information

Street Address*

City*

ZIP Code*

Mixed Container Types

const schema = [
  {
    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'],
      },
    ],
  },
  {
    name: 'preferences',
    type: 'container',
    label: 'Preferences',
    view: 'switcher',
    title: 'User Preferences',
    schema: [
      {
        name: 'newsletter',
        type: 'switcher',
        label: 'Subscribe to newsletter',
        rules: [],
      },
      {
        name: 'darkMode',
        type: 'switcher',
        label: 'Enable dark mode',
        rules: [],
      },
      {
        name: 'notifications',
        type: 'switcher',
        label: 'Email notifications',
        rules: [],
      },
    ],
  },
];

Personal Information

First Name*

Last Name*

Email*

Preferences

User Preferences

Subscribe to newsletter

Enable dark mode

Email notifications

Complex Form with Nested Containers

const schema = [
  {
    name: 'userProfile',
    type: 'container',
    label: 'User Profile',
    view: 'accordion',
    title: 'Profile Information',
    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'],
      },
      {
        name: 'phone',
        type: 'text',
        label: 'Phone',
        placeholder: 'Enter your phone number',
        rules: ['required'],
      },
      {
        name: 'age',
        type: 'number',
        label: 'Age',
        placeholder: 'Enter your age',
        rules: ['required'],
      },
      {
        name: 'gender',
        type: 'radio',
        label: 'Gender',
        options: [
          { id: 'male', text: 'Male' },
          { id: 'female', text: 'Female' },
          { id: 'other', text: 'Other' },
        ],
        rules: ['required'],
      },
    ],
  },
  {
    name: 'addressSection',
    type: 'container',
    label: 'Address Section',
    view: 'switcher',
    title: 'Address Information',
    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: 'state',
        type: 'text',
        label: 'State/Province',
        placeholder: 'Enter state or province',
        rules: ['required'],
      },
      {
        name: 'zipCode',
        type: 'text',
        label: 'ZIP Code',
        placeholder: 'Enter ZIP code',
        rules: ['required'],
      },
      {
        name: 'country',
        type: 'select',
        label: 'Country',
        placeholder: 'Select your country',
        options: [
          { id: 'us', text: 'United States' },
          { id: 'uk', text: 'United Kingdom' },
          { id: 'ca', text: 'Canada' },
          { id: 'au', text: 'Australia' },
        ],
        rules: ['required'],
      },
    ],
  },
];

User Profile

First Name*

Last Name*

Email*

Phone*

Age*

Gender*

MaleFemaleOther

Address Section

Address Information

Street Address*

City*

State/Province*

ZIP Code*

Country*

Settings Form with Containers

const schema = [
  {
    name: 'accountSettings',
    type: 'container',
    label: 'Account Settings',
    view: 'accordion',
    title: 'Account Configuration',
    schema: [
      {
        name: 'username',
        type: 'text',
        label: 'Username',
        placeholder: 'Enter username',
        rules: ['required'],
      },
      {
        name: 'password',
        type: 'text',
        label: 'Password',
        placeholder: 'Enter password',
        rules: [
          'required',
          {
            type: 'custom',
            function: '(value) => value.length >= 8',
            message: 'Password must be at least 8 characters',
          },
        ],
      },
      {
        name: 'confirmPassword',
        type: 'text',
        label: 'Confirm Password',
        placeholder: 'Confirm password',
        rules: ['required'],
      },
    ],
  },
  {
    name: 'notificationSettings',
    type: 'container',
    label: 'Notification Settings',
    view: 'switcher',
    title: 'Notification Preferences',
    schema: [
      {
        name: 'emailNotifications',
        type: 'switcher',
        label: 'Email notifications',
        rules: [],
      },
      {
        name: 'pushNotifications',
        type: 'switcher',
        label: 'Push notifications',
        rules: [],
      },
      {
        name: 'smsNotifications',
        type: 'switcher',
        label: 'SMS notifications',
        rules: [],
      },
      {
        name: 'marketingEmails',
        type: 'switcher',
        label: 'Marketing emails',
        rules: [],
      },
    ],
  },
];

Account Settings

Username*

Password*

Confirm Password*

Notification Settings

Notification Preferences

Email notifications

Push notifications

SMS notifications

Marketing emails

Product Configuration with Containers

const schema = [
  {
    name: 'basicInfo',
    type: 'container',
    label: 'Basic Information',
    view: 'accordion',
    title: 'Product Basic Info',
    schema: [
      {
        name: 'productName',
        type: 'text',
        label: 'Product Name',
        placeholder: 'Enter product name',
        rules: ['required'],
      },
      {
        name: 'category',
        type: 'select',
        label: 'Category',
        placeholder: 'Select category',
        options: [
          { id: 'electronics', text: 'Electronics' },
          { id: 'clothing', text: 'Clothing' },
          { id: 'books', text: 'Books' },
          { id: 'home', text: 'Home & Garden' },
        ],
        rules: ['required'],
      },
      {
        name: 'description',
        type: 'text',
        label: 'Description',
        placeholder: 'Enter product description',
        rules: ['required'],
      },
    ],
  },
  {
    name: 'pricingInfo',
    type: 'container',
    label: 'Pricing Information',
    view: 'switcher',
    title: 'Pricing Details',
    schema: [
      {
        name: 'price',
        type: 'number',
        label: 'Price',
        placeholder: 'Enter price',
        rules: [
          'required',
          {
            type: 'custom',
            function: '(value) => value > 0',
            message: 'Price must be greater than 0',
          },
        ],
      },
      {
        name: 'discount',
        type: 'number',
        label: 'Discount (%)',
        placeholder: 'Enter discount percentage',
        rules: [
          {
            type: 'custom',
            function: '(value) => value >= 0 && value <= 100',
            message: 'Discount must be between 0 and 100%',
          },
        ],
      },
      {
        name: 'inStock',
        type: 'switcher',
        label: 'In stock',
        rules: [],
      },
      {
        name: 'featured',
        type: 'switcher',
        label: 'Featured product',
        rules: [],
      },
    ],
  },
];

Basic Information

Product Name*

Category*

Description*

Pricing Information

Pricing Details

Price*

Discount (%)

In stock

Featured product

Container View Types

Accordion View

• 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

Switcher View

• 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

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