Form Divider

<pa-form-divider> | PaFormDivider

A spacing component designed to create structured spacing between form elements within pa-form-container. Form dividers help organize form fields into logical groups and improve form readability without adding visual lines.

Usage

First Field

*

 

Second Field

*

<template>
  <pa-form-container size="grouped">
    <pa-input-group label="First Field" />
    <pa-form-divider size="md" />
    <pa-input-group label="Second Field" />
  </pa-form-container>
</template>

Examples

Size Variants

Content before small divider

 

After small (12px)

 

After medium (16px)

 

After large (24px)

<template>
  <pa-form-container size="grouped">
    <div>Content before small divider</div>
    <pa-form-divider size="sm" />
    <div>After small (12px)</div>
    <pa-form-divider size="md" />
    <div>After medium (16px)</div>
    <pa-form-divider size="lg" />
    <div>After large (24px)</div>
  </pa-form-container>
</template>

Form Grouping

Personal Information

First Name

*

Last Name

*

<pa-form-divider size="lg" />

<h3>Contact Details</h3>
<pa-input-group label="Email" />
<pa-input-group label="Phone" />

<pa-form-divider size="md" />

<pa-button variant="primary">Submit</pa-button>

<template>
  <pa-form-container size="grouped">
    <h3>Personal Information</h3>
    <pa-input-group label="First Name" />
    <pa-input-group label="Last Name" />
    
    <pa-form-divider size="lg" />
    
    <h3>Contact Details</h3>
    <pa-input-group label="Email" />
    <pa-input-group label="Phone" />
    
    <pa-form-divider size="md" />
    
    <pa-button variant="primary">Submit</pa-button>
  </pa-form-container>
</template>

Importing

import { PaFormDivider } from '@payadvantage/ui-components'

Properties

Property	Type	Default	Description
size	'sm' | 'md' | 'lg'	Required	Controls spacing amount (12px/16px/24px)

Size Reference

Size	Spacing	Use Case
sm	12px	Subtle separation between related fields
md	16px	Standard separation for field groups
lg	24px	Prominent separation between form sections

Dependencies

• pa-form-container - Works optimally within form containers for proper spacing context

Related Components

• PaDivider - Visual line divider for general content
• PaFormContainer - Container component for forms