Comprehensive showcase of all input types, states, sizes, and variations available in the framework.
Campos de texto
¡Se ve bien!
Revisa este campo
Este campo es obligatorio
Texto de ayuda de color
Texto de ayuda de color
Texto de ayuda gris (sin clase de color)
Grupos de campos (Prefijo/Sufijo)
@
.00
$
.00
https://www.
.com🔗
Tip: Use width utilities (
wr-* for rem-based, w-* for percentage-based) on prepend/append elements to control their width.
Tipos de campo
Menús desplegables de selección
Áreas de texto
Casillas y radios
Variaciones de ancho
Referencia de clases CSS
Campos de texto
pa-input- Base input stylingpa-input--xs- Extra small inputpa-input--sm- Small inputpa-input--lg- Large inputpa-input--xl- Extra large input
Menús desplegables de selección
pa-select- Base select stylingpa-select--xs- Extra small selectpa-select--sm- Small selectpa-select--lg- Large selectpa-select--xl- Extra large select
Áreas de texto
pa-textarea- Base textarea stylingpa-textarea--xs- Extra small textareapa-textarea--sm- Small textareapa-textarea--lg- Large textareapa-textarea--xl- Extra large textarea
Grupos de campos
pa-input-group- Container for input with addonspa-input-group__prepend- Addon before inputpa-input-group__append- Addon after inputpa-input-group__button- Button addon
Diseño de formulario
pa-form- Form container with label stylingpa-form-group- Form field container with spacingpa-form-group--horizontal- Horizontal label/input layoutpa-form-actions- Container for form buttons
Estados de validación (en form-group)
pa-form-group--success- Success state (green border)pa-form-group--warning- Warning state (yellow border)pa-form-group--error- Error state (red border)
Estados de validación (en el campo)
pa-input--success,pa-select--success,pa-textarea--success- Success statepa-input--warning,pa-select--warning,pa-textarea--warning- Warning statepa-input--error,pa-select--error,pa-textarea--error- Error state
Variantes de color del tema (en el campo)
pa-input--color-1throughpa-input--color-9- Theme color slotspa-select--color-1throughpa-select--color-9- Theme color slotspa-textarea--color-1throughpa-textarea--color-9- Theme color slots
Texto de ayuda
pa-form-help- Help text below inputpa-form-help--success- Success colored help textpa-form-help--warning- Warning colored help textpa-form-help--error- Error colored help textpa-form-help--color-1throughpa-form-help--color-9- Theme color slots
Casillas de verificación
pa-checkbox-group- Container for multiple checkboxespa-checkbox- Checkbox wrapper (label element)pa-checkbox__box- Custom checkbox visualpa-checkbox__label- Checkbox label textpa-checkbox--xsthroughpa-checkbox--xl- Size variantspa-checkbox--disabled- Disabled state
Botones de radio
pa-radio-group- Container for multiple radiospa-radio- Radio button wrapper (label element)pa-radio__label- Radio label textpa-radio--xsthroughpa-radio--xl- Size variants