Comprehensive showcase of all input types, states, sizes, and variations available in the framework.

Text Inputs

Looks good!
Please check this field
This field is required
Colored help text
Colored help text
Gray help text (no color class)

Input Groups (Prepend/Append)

@
.00
$ .00
https:// www. .com 🔗
Tip: Use width utilities (wr-* for rem-based, wp-* for percentage-based) on prepend/append elements to control their width. See CSS Helpers for all available width classes.

Input Types

Select Dropdowns

Textareas

Checkboxes & Radios

Width Variations

CSS Classes Reference

Text Inputs

  • 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

Select Dropdowns

  • 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

Textareas

  • 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

Input Groups

  • 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
  • pa-input-group--xs - Extra small input group
  • pa-input-group--sm - Small input group
  • pa-input-group--lg - Large input group
  • pa-input-group--xl - Extra large input group

Form Layout

  • 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

Validation States (on 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)

Validation States (on input)

  • 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

Theme Color Variants (on input)

  • 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

Help Text

  • 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

Checkboxes

  • 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 - Extra small checkbox
  • pa-checkbox--sm - Small checkbox
  • pa-checkbox--lg - Large checkbox
  • pa-checkbox--xl - Extra large checkbox
  • pa-checkbox--x - X mark instead of checkmark
  • pa-checkbox--disabled - Disabled state

Radio Buttons

  • pa-radio-group - Container for multiple radios
  • pa-radio - Radio button wrapper (label element)
  • pa-radio__label - Radio label text
  • pa-radio--xs - Extra small radio
  • pa-radio--sm - Small radio
  • pa-radio--lg - Large radio
  • pa-radio--xl - Extra large radio
Type to search or use /p for products, /o for orders, /u for users, /i for invoices
↑↓ Navigate
←→ Pages
↵ Select
Esc Close

Settings

👤

John Doe

Administrator
  • 📊 Dashboard
  • 📝 Forms
  • 📋 Tables
  • 📊 Data Grid