Function vertical

Creates a vertical layout component that arranges content in a column.

Param: optionsOrContent

Either the content to display or the options object

Param: options

Configuration object

Param: options.flex

if true, the flex property will be set to 1

Param: options.align

align-items property - default is 'stretch'

Param: options.justify

justify-content property - default is 'flex-start'

Param: options.gap

Spacing between items in pixels

Param: options.padding

Padding around the container in pixels (number or array of numbers)

Param: options.margin

Margin around the container in pixels (number or array of numbers)

Param: options.width

Width of the container (default: 'auto')

Param: options.style

Custom CSS styles to apply to the container

Param: content

The content to display (only used when options are provided)

Returns

A JSX element representing the vertical layout component

Example

Basic usage with content

vertical([
  inputField({
    name: 'firstName',
    label: 'First name',
    defaultValue: 'Jane',
  }),
  inputField({
    name: 'lastName',
    label: 'Last name',
    defaultValue: 'Doe',
  }),
]);

Example

Usage with options and content

vertical(
  {
    gap: 8,
    align: 'center',
    justify: 'space-between',
    padding: 16,
  },
  [
    inputField({
      name: 'email',
      label: 'Email',
      type: 'email',
    }),
    inputField({
      name: 'phone',
      label: 'Phone',
      type: 'tel',
    }),
  ]
);

Settings