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🔗
Haz clic en el botón de icono para cambiar entre los modos Filtrar y Buscar
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 styling
  • pa-input--xs - Extra small input
  • pa-input--sm - Small input
  • pa-input--lg - Large input
  • pa-input--xl - Extra large input

Menús desplegables de selección

  • pa-select - Base select styling
  • pa-select--xs - Extra small select
  • pa-select--sm - Small select
  • pa-select--lg - Large select
  • pa-select--xl - Extra large select

Áreas de texto

  • pa-textarea - Base textarea styling
  • pa-textarea--xs - Extra small textarea
  • pa-textarea--sm - Small textarea
  • pa-textarea--lg - Large textarea
  • pa-textarea--xl - Extra large textarea

Grupos de campos

  • pa-input-group - Container for input with addons
  • pa-input-group__prepend - Addon before input
  • pa-input-group__append - Addon after input
  • pa-input-group__button - Button addon

Diseño de formulario

  • pa-form - Form container with label styling
  • pa-form-group - Form field container with spacing
  • pa-form-group--horizontal - Horizontal label/input layout
  • pa-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 state
  • pa-input--warning, pa-select--warning, pa-textarea--warning - Warning state
  • pa-input--error, pa-select--error, pa-textarea--error - Error state

Variantes de color del tema (en el campo)

  • pa-input--color-1 through pa-input--color-9 - Theme color slots
  • pa-select--color-1 through pa-select--color-9 - Theme color slots
  • pa-textarea--color-1 through pa-textarea--color-9 - Theme color slots

Texto de ayuda

  • pa-form-help - Help text below input
  • pa-form-help--success - Success colored help text
  • pa-form-help--warning - Warning colored help text
  • pa-form-help--error - Error colored help text
  • pa-form-help--color-1 through pa-form-help--color-9 - Theme color slots

Casillas de verificación

  • pa-checkbox-group - Container for multiple checkboxes
  • pa-checkbox - Checkbox wrapper (label element)
  • pa-checkbox__box - Custom checkbox visual
  • pa-checkbox__label - Checkbox label text
  • pa-checkbox--xs through pa-checkbox--xl - Size variants
  • pa-checkbox--disabled - Disabled state

Botones de radio

  • pa-radio-group - Container for multiple radios
  • pa-radio - Radio button wrapper (label element)
  • pa-radio__label - Radio label text
  • pa-radio--xs through pa-radio--xl - Size variants

John Doe

Administrator

Configuración

Press Ctrl+K to preview the palette.
Sidebar
Display
Profile Panel
Body text size. All elements scale proportionally.
Comandos
🚀
Desplegar a entorno
Desplegar una rama a un entorno
g d
👤
Asignar a usuario
Asignar un elemento a un miembro del equipo
g a
🧭
Ir a la página
Navegar a una página
g g
🎨
Cambiar tema
Cambiar el tema visual
g t
Buscar
📦
Productos
Buscar productos
:products
📋
Pedidos
Buscar pedidos
:orders
👥
Usuarios
Buscar usuarios
:users
🧾
Facturas
Buscar facturas
:invoices