@progressive-development/pd-forms

Accessible, themeable form components built with Lit.

Features

• Lit 3 & TypeScript – Modern, type-safe web components
• Accessible – WCAG 2.1 compliant, keyboard navigation, ARIA support
• Themeable – CSS Custom Properties for easy customization
• Localized – Built-in i18n support (EN, DE, BE)
• Lightweight – No heavy dependencies, tree-shakeable
• Framework-agnostic – Works with React, Vue, Angular, or vanilla JS
• Complete Form Toolkit – All form elements covered: inputs, selects, checkboxes, radios, file uploads, ranges, and autocomplete
• Flexible Layout System – Nested containers, rows, fieldsets, and form-fields with 12-column grid alignment
• Async Validation – Promise-based validators for backend checks like email uniqueness
• Centralized Form State – Auto-tracked validity, dirty/pristine, and touched states via <pd-form-container>
• Consistent Cross-Browser UI – Custom-styled checkboxes, radios, and selects that look identical everywhere
• Rich Helper Text – Descriptions, hints, error messages, and character counts per field

Installation

npm install @progressive-development/pd-forms

Quick Start

<script type="module">
  import '@progressive-development/pd-forms';
</script>

<pd-form-container>
  <pd-input label="Name" required></pd-input>
  <pd-button type="submit">Submit</pd-button>
</pd-form-container>

Components

| Component | Description | |-----------|-------------| | <pd-button> | Button with variants and states | | <pd-button-group> | Group multiple buttons | | <pd-button-select-group> | Toggle button selection group | | <pd-panel-button> | Large panel-style button | | <pd-checkbox> | Checkbox with label | | <pd-radio-group> | Radio button group | | <pd-input> | Text input with validation | | <pd-input-area> | Multi-line text input | | <pd-input-file> | File upload input | | <pd-input-time> | Time picker input | | <pd-select> | Dropdown select | | <pd-range> | Range slider | | <pd-suggestion-box> | Autocomplete input | | <pd-form-container> | Form layout container | | <pd-form-field> | Form field wrapper | | <pd-form-row> | Form row layout | | <pd-hover-box> | Hover-triggered content box |

Documentation

📖 Full documentation: pd-components.web.app

License

MIT © PD Progressive Development UG