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