Read-only data display components for showing label-value pairs without form inputs. Useful for profile pages, detail views, order summaries, and anywhere you need to present structured data.
Multiple pa-fields Blocks
Consecutive Fields blocks get automatic spacing via .pa-fields + .pa-fields.
Multi-Column Grid
Uses cols=7. Use full prop to span all columns.
Field Groups
Labeled sections using FieldGroup with title prop.
Personal
Employment
Emergency Contact
Horizontal
Uses horizontal prop.
Table-Style Bordered
Uses table bordered props.
Striped
Uses striped prop.
Compact
compact
Inline
inline
Row
row
Relaxed
relaxed
Filled Fields
Subtle background to distinguish data blocks. Uses filled prop.
Form vs Display
Edit
View
Color Variants
Theme colors for border and isFilled background. Uses color=-8. Combine with filled for tinted backgrounds. Use noBorder to remove the border.
Border Colors
Filled + Color (Tinted Background)
No Border
Copyable Fields
Three styles for copy-to-clipboard functionality. Click to test each variant.
Copy Button (always visible)
Uses copyMode="btn"
sk_live_abc123xyz789 Click Value to Copy
Uses copyMode="click"
Icon on Hover Only
Uses copyMode="hover"
Real-World: Invoice Layout
Customer (full width) + Receipt/Delivery addresses (50/50). Combines FieldGroup with Grid/Column.
Customer
Receipt Address
Delivery Address
Items
| Product | SKU | Qty | Price | Total |
|---|---|---|---|---|
| Mechanical Keyboard | KB-MX-BRN | 2 | $149 | $298 |
| 27" 4K Monitor | MON-27-4K | 4 | $449 | $1,796 |
User Profile
Active
Contact
Skills
CSS Classes Reference
Field Elements
pa-field- Label-value pairpa-field__label- Label elementpa-field__value- Value elementpa-field--full- Span all grid columns
Container & Groups
pa-fields- Field containerpa-field-group- Section wrapperpa-field-group__title- Section title
Grid Columns
pa-fields--cols-2- 2 columnspa-fields--cols-3- 3 columnspa-fields--cols-4- 4 columns
Layout Modifiers
pa-fields--horizontal- Label left, value rightpa-fields--table- Table-like widthspa-fields--bordered- Row separatorspa-fields--striped- Alternating bgpa-fields--compact- Tighter spacingpa-fields--relaxed- Larger spacingpa-fields--inline- Inline flowpa-fields--row- Equal-width columnspa-fields--filled- Background panelpa-fields--color-{1-9}- Border colorpa-fields--no-border- Remove border
Combining
table borderedhorizontal compactfilled cols={2}filled color={1}(tinted bg)
Detail Panel Integration
Headerless detail panel with floating close button. Click a isRow to view order data using Fields components.
| Order | Customer | Date | Status | Total |
|---|---|---|---|---|
| #ORD-001 | Elena Petrova | 28 January 2026 | Delivered | $1,249.00 |
| #ORD-002 | Jan Novak | 27 January 2026 | Pending | $2,847.50 |
| #ORD-003 | Martin Svoboda | 26 January 2026 | Processing | $589.00 |
| #ORD-004 | Petra Konecna | 25 January 2026 | Cancelled | $3,120.00 |
Click a isTable isRow to view order details here.
Full-Screen Overlay Panel
Click a isRow to open a full-screen overlay panel (slides in from right, like profile panel).
| SKU | Product | Category | Price | Stock |
|---|---|---|---|---|
| KB-MX-001 | Mechanical Keyboard Pro | Peripherals | $149.00 | 234 |
| MON-4K-27 | 27" 4K IPS Monitor | Displays | $449.00 | 89 |
| DSK-STD-01 | Standing Desk Frame | Furniture | $599.00 | 42 |
| CHR-ERG-X1 | Ergonomic Office Chair | Furniture | $389.00 | 156 |