Complete set of form elements with various styles and states for data input.
Input Sizes Reference
| Size | Class | Font Size | Padding (v/h) | Input + Button | Input Height | Button Height |
|---|---|---|---|---|---|---|
| XS | --xs |
1.2rem (12px) | 0.6rem / 0.8rem |
|
- | - |
| SM | --sm |
1.4rem (14px) | 0.8rem / 0.8rem |
|
- | - |
| Default | (none) |
1.4rem (14px) | 0.8rem / 0.8rem |
|
- | - |
| LG | --lg |
1.6rem (16px) | 0.8rem / 0.8rem |
|
- | - |
| XL | --xl |
1.8rem (18px) | 0.8rem / 0.8rem |
|
- | - |
User Profile
Contact Information
Quick Settings
Compact Three Column Layout
Input Groups
Form States
Input Sizes
Checkboxes & Radio Buttons
Label Position
One position per group. End/start stack; top reads best in an auto-flow grid.
Orientation & Required
💡
How the required asterisk is placed
The danger * is driven by the native required attribute — no class needed. Where it lands depends on the field's shape:
- Simple fields (input / select / textarea) → the group's
<label>, via.pa-form-group:has(:required) > label. - Grouped choices (radios/checkboxes inside a
.pa-radio-group/.pa-checkbox-group) → the requirement belongs to the group, so the * sits once on the group heading and the per-option markers are suppressed. See Priority below. - Standalone choice (a lone
.pa-checkbox/.pa-radio, e.g. a consent box with no*-groupwrapper) → the * sits on its own option label. See I accept the terms below. - Complex widgets with no native control (image browser, dropzone, web component) → add
.pa-form-group--requiredto the group as the explicit trigger.
The first “Horizontal orientation” group has no required, so it shows no marker.
Checkbox & Radio Sizes
Horizontal Form Layout
Labels on the left, inputs on the right with varying field widths