Complete set of form elements with various styles and states for data input.
Referencia de tamaños de campo
| Tamaño | Clase | Tamaño de fuente | Relleno (v/h) | Campo + Botón | Altura del campo | Altura del botón |
|---|---|---|---|---|---|---|
| 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 |
|
- | - |
Perfil de usuario
Información de contacto
Configuración rápida
Diseño compacto de tres columnas
Grupos de campos
Estados de formulario
Tamaños de campo
Casillas y botones de radio
Posición de la etiqueta
One position per group. End/start stack; top reads best in an auto-flow grid.
Orientación y obligatorio
💡
Cómo se coloca el asterisco de obligatorio
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.
Tamaños de casilla y radio
Diseño de formulario horizontal
Etiquetas a la izquierda, campos a la derecha con anchos variables