Form Container

<pa-form-container> | PaFormContainer

A wrapper component for form elements that provides consistent spacing and layout. The Form Container is specifically designed for form inputs, checkboxes, buttons, and related form controls.

<template>
  <pa-form-container size="grouped">
    <pa-input-group label="Name">
      <pa-input placeholder="Enter your name..." />
    </pa-input-group>
    <pa-input-group label="Email">
      <pa-input placeholder="Enter your email..." />
    </pa-input-group>
    <pa-button variant="primary">Submit</pa-button>
  </pa-form-container>
</template>

Examples

Grouped Size (Default)

The grouped size provides 12px spacing and should be used when form fields relate to each other.

First Name

*

Last Name

*

Email Address

*

<template>
  <pa-form-container size="grouped">
    <pa-input-group label="First Name">
      <pa-input v-model="firstName" placeholder="Enter your first name" />
    </pa-input-group>
    <pa-input-group label="Last Name">
      <pa-input v-model="lastName" placeholder="Enter your last name" />
    </pa-input-group>
    <pa-input-group label="Email Address">
      <pa-input v-model="email" placeholder="Enter your email" />
    </pa-input-group>
    <pa-button variant="primary" @click="submit">Submit</pa-button>
  </pa-form-container>
</template>

<script setup>
import { ref } from 'vue'

const firstName = ref('')
const lastName = ref('')
const email = ref('')

const submit = () => {
  console.log('Form submitted:', { firstName: firstName.value, lastName: lastName.value, email: email.value })
}
</script>

Sparse Grouped Size

The sparse-grouped size provides 18px spacing for fields that relate to each other but require more separation.

Company Name

*

Department

*

Job Title

*

<template>
  <pa-form-container size="sparse-grouped">
    <pa-input-group label="Company Name">
      <pa-input v-model="companyName" placeholder="Enter company name" />
    </pa-input-group>
    <pa-input-group label="Department">
      <pa-input v-model="department" placeholder="Enter department" />
    </pa-input-group>
    <pa-input-group label="Job Title">
      <pa-input v-model="jobTitle" placeholder="Enter job title" />
    </pa-input-group>
    <pa-button variant="primary" @click="updateProfile">Update Profile</pa-button>
  </pa-form-container>
</template>

Ungrouped Size

The ungrouped size provides 24px spacing for fields that do not relate to each other.

Search Query

*

Enable email notifications

<template>
  <pa-form-container size="ungrouped">
    <pa-input-group label="Search Query">
      <pa-input v-model="searchTerm" placeholder="Enter search term..." />
    </pa-input-group>
    <pa-checkbox v-model="notifications">Enable email notifications</pa-checkbox>
    <pa-switch v-model="darkMode">Dark mode theme</pa-switch>
    <pa-button variant="secondary" @click="applySettings">Apply Settings</pa-button>
  </pa-form-container>
</template>

Using Form Dividers

For additional spacing between form sections, use the pa-form-divider component within the container.

Username

*

Email

*

 

Remember my preferences

 

<template>
  <pa-form-container size="grouped">
    <pa-input-group label="Username">
      <pa-input v-model="username" placeholder="Enter username" />
    </pa-input-group>
    <pa-input-group label="Email">
      <pa-input v-model="email" placeholder="Enter email address" />
    </pa-input-group>
    <pa-form-divider size="md" />
    <pa-checkbox v-model="rememberPrefs">Remember my preferences</pa-checkbox>
    <pa-form-divider size="lg" />
    <pa-button variant="primary" @click="saveAccount">Save Account</pa-button>
  </pa-form-container>
</template>

Importing

import { PaFormContainer } from '@payadvantage/ui_components'

Properties

Name	Description	Reflects	Type	Default
size	Controls the spacing between form elements.	no	'grouped' | 'sparse-grouped' | 'ungrouped'	'grouped'

Events

The Form Container component does not emit any events.

Slots

Name	Description
default	The form elements to be contained and spaced.

Dependencies

• CSS Custom Properties: Uses design tokens for consistent spacing values
• No external dependencies: Pure Vue 3 component with CSS styling

Related Components

Form Dividers

For additional spacing control within forms, use PaFormDivider to create custom spacing between form sections:

<template>
  <pa-form-container size="grouped">
    <pa-input-group label="Personal Info" />
    <pa-form-divider size="lg" />
    <pa-input-group label="Contact Details" />
  </pa-form-container>
</template>

Design Notes

The Form Container component provides:

• Semantic spacing: Three distinct spacing levels for different form relationship types
• Consistent layouts: Ensures uniform spacing across all forms in the application
• Form structure: Helps organize form elements into logical groups

Spacing Guidelines

Size	Spacing	Use Case
grouped	12px	Related fields (name parts, address components)
sparse-grouped	18px	Semi-related fields requiring more separation
ungrouped	24px	Unrelated fields or separate form sections

Button Placement

When placing buttons in forms, they should use the largest spacing available to prevent them from appearing to belong to the preceding form group. Consider using pa-form-divider with size lg before important action buttons.

Accessibility Notes

• Uses semantic div structure for proper screen reader navigation
• Maintains logical tab order through form elements
• Does not interfere with form validation or submission
• Preserves all accessibility features of contained form elements