Layouts

Form UI - inline, vertical, horizontal, compact

Overview

Layouts control how form fields are displayed and arranged. The form system supports two main layout types: default (vertical) and horizontal. Each layout provides different visual arrangements for labels, inputs, and error messages.

Layout Types

Default Layout (Vertical)

The default layout displays form fields in a vertical arrangement with labels above inputs.

{
  name: 'firstName',
  type: 'text',
  label: 'First Name',
  placeholder: 'Enter your first name',
  layout: 'default',
  rules: ['required']
}

First Name*

Last Name*

Email Address*

Horizontal Layout

The horizontal layout displays labels and inputs side by side, making better use of horizontal space.

{
  name: 'firstName',
  type: 'text',
  label: 'First Name',
  placeholder: 'Enter your first name',
  layout: 'horizontal',
  rules: ['required']
}

First Name *

Last Name *

Email Address *

Mixed Layouts

You can mix different layouts within the same form to optimize space usage and readability.

const schema = [
  {
    name: 'firstName',
    type: 'text',
    label: 'First Name',
    layout: 'horizontal',
    rules: ['required'],
  },
  {
    name: 'lastName',
    type: 'text',
    label: 'Last Name',
    layout: 'horizontal',
    rules: ['required'],
  },
  {
    name: 'email',
    type: 'text',
    label: 'Email Address',
    layout: 'default',
    rules: ['required', 'email'],
  },
];

First Name *

Last Name *

Email Address*

Phone Number*

Input Types with Different Layouts

Default Layout with Various Input Types

const schema = [
  {
    name: 'name',
    type: 'text',
    label: 'Full Name',
    layout: 'default',
    rules: ['required'],
  },
  {
    name: 'age',
    type: 'number',
    label: 'Age',
    layout: 'default',
    rules: ['required'],
  },
  {
    name: 'gender',
    type: 'radio',
    label: 'Gender',
    layout: 'default',
    options: [
      { id: 'male', text: 'Male' },
      { id: 'female', text: 'Female' },
      { id: 'other', text: 'Other' },
    ],
    rules: ['required'],
  },
  {
    name: 'country',
    type: 'select',
    label: 'Country',
    layout: 'default',
    options: [
      { id: 'us', text: 'United States' },
      { id: 'uk', text: 'United Kingdom' },
      { id: 'ca', text: 'Canada' },
    ],
    rules: ['required'],
  },
  {
    name: 'newsletter',
    type: 'switcher',
    label: 'Subscribe to newsletter',
    layout: 'default',
    rules: [],
  },
];

Full Name*

Age*

Gender*

MaleFemaleOther

Country*

Subscribe to newsletter

Horizontal Layout with Various Input Types

const schema = [
  {
    name: 'name',
    type: 'text',
    label: 'Full Name',
    layout: 'horizontal',
    rules: ['required'],
  },
  {
    name: 'age',
    type: 'number',
    label: 'Age',
    layout: 'horizontal',
    rules: ['required'],
  },
  {
    name: 'gender',
    type: 'radio',
    label: 'Gender',
    layout: 'horizontal',
    options: [
      { id: 'male', text: 'Male' },
      { id: 'female', text: 'Female' },
      { id: 'other', text: 'Other' },
    ],
    rules: ['required'],
  },
  {
    name: 'country',
    type: 'select',
    label: 'Country',
    layout: 'horizontal',
    options: [
      { id: 'us', text: 'United States' },
      { id: 'uk', text: 'United Kingdom' },
      { id: 'ca', text: 'Canada' },
    ],
    rules: ['required'],
  },
  {
    name: 'newsletter',
    type: 'switcher',
    label: 'Subscribe to newsletter',
    layout: 'horizontal',
    rules: [],
  },
];

Full Name *

Age *

Gender *

MaleFemaleOther

Country *

Subscribe to newsletter

Complex Form with Validation Errors

const schema = [
  {
    name: 'username',
    type: 'text',
    label: 'Username',
    layout: 'default',
    rules: ['required'],
  },
  {
    name: 'email',
    type: 'text',
    label: 'Email',
    layout: 'horizontal',
    rules: ['required', 'email'],
  },
  {
    name: 'password',
    type: 'text',
    label: 'Password',
    layout: 'default',
    rules: [
      'required',
      {
        type: 'custom',
        function: '(value) => value.length >= 8',
        message: 'Password must be at least 8 characters',
      },
    ],
  },
  {
    name: 'confirmPassword',
    type: 'text',
    label: 'Confirm Password',
    layout: 'horizontal',
    rules: ['required'],
  },
];

Username*

Email *

Password*

Confirm Password *

Properties

Layout Properties

• layout (string): Layout type - 'default' or 'horizontal'
  • default: Vertical layout with labels above inputs
  • horizontal: Horizontal layout with labels beside inputs

Default Layout Features

• Labels appear above input fields
• Full width utilization
• Better for mobile devices
• Clear visual hierarchy
• Error messages appear below inputs

Horizontal Layout Features

• Labels appear to the left of input fields
• More compact design
• Better for desktop applications
• Fixed label width (3/12 of container)
• Error messages appear below inputs

Best Practices

1. Use default layout for mobile-first applications and complex forms
2. Use horizontal layout for desktop applications and compact forms
3. Mix layouts strategically to optimize space usage
4. Consider screen size when choosing layout type
5. Maintain consistency within related form sections
6. Test on different devices to ensure readability
7. Use horizontal layout for forms with short labels
8. Use default layout for forms with long labels or descriptions