FormBuilder Component

The FormBuilder component provides a programmatic API for creating responsive form layouts that integrate seamlessly with Vuetify. It allows you to define form layouts in code instead of templates, making it ideal for both backend-driven layouts and programmatically generated forms.

Responsive Layout

The FormBuilder component supports responsive layouts with different configurations for various screen sizes:

Responsive Form Layout

Resize your browser window to see how the form layout adapts to different screen sizes.

• Large screens (md+): Two-column layout
• Small screens (sm): Modified layout with some fields side by side
• Extra small screens (xs): Single column layout

Current breakpoint: xs

Registration

Full NameFull Name

EmailEmail

PhonePhone

AddressAddress

I agree to the terms and conditions

Features

• Programmatic API for defining form layouts
• Full support for responsive designs with breakpoint-specific layouts
  • responsive designs supported at any level (form, row or column)
• Integration with @dynamicforms/vue-forms for state management and validation
• Default editors supported from @dynamicforms/vuetify-inputs
• Nesting capabilities for complex form structures
• Integration with all Vuetify input components

Responsive Designs

Define different layouts for different screen sizes:

const formBuilder = new FormBuilder();

// Default layout (applies to all breakpoints unless overridden)
formBuilder
  .row({ }, (row) => row
    .col({ cols: 6 }, (col) => col
      .component((cmpt) => cmpt
        .generic('VTextField', { label: 'Name' })))
    .col({ cols: 6 }, (col) => col
      .component((cmpt) => cmpt
        .generic('VTextField', { label: 'Email' }))));

// Form-level breakpoint (entire form changes for small screens)
formBuilder.breakpoint('sm', (form) => form
  .row({ }, (row) => row
    .col({ cols: 12 }, (col) => col
      .component((cmpt) => cmpt
        .generic('VTextField', { label: 'Name', dense: true }))))
  .row({ }, (row) => row
    .col({ cols: 12 }, (col) => col
      .component((cmpt) => cmpt
        .generic('VTextField', { label: 'Email', dense: true })))));

// Row-level breakpoint (just this row changes behavior)
formBuilder.row({ }, (row) => row
  // Default layout for this row - 3 equal columns
  .col({ cols: 4 }, (col) => col
    .component((cmpt) => cmpt
      .generic('VTextField', { label: 'City' })))
  .col({ cols: 4 }, (col) => col
    .component((cmpt) => cmpt
      .generic('VTextField', { label: 'State' })))
  .col({ cols: 4 }, (col) => col
    .component((cmpt) => cmpt
      .generic('VTextField', { label: 'Zip' })))
  // Row-level breakpoint - changes to 2 columns for medium screens
  .breakpoint('md', (row) => row
    .col({ cols: 6 }, (col) => col
      .component((cmpt) => cmpt
        .generic('VTextField', { label: 'City' })))
    .col({ cols: 6 }, (col) => col
      .component((cmpt) => cmpt
        .generic('VTextField', { label: 'State/Zip' })))));

// Column-level breakpoint (just this column changes behavior)
formBuilder.row({ }, (row) => row
  .col({ cols: 3 }, (col) => col
    .component((cmpt) => cmpt
      .generic('VTextField', { label: 'First field' })))
  .col({ cols: 9 }, (col) => col
    // Default is 9 columns wide, but changes at different breakpoints
    .breakpoint('md', (col) => { col.props.cols = 6; return col; })
    .breakpoint('sm', (col) => { col.props.cols = 12; return col; })
    .component((cmpt) => cmpt
      .generic('VTextarea', { label: 'Comments' }))));