https://github.com/codingjoe/select-3
State of the art select box replacement.
https://github.com/codingjoe/select-3
Last synced: 2 months ago
JSON representation
State of the art select box replacement.
- Host: GitHub
- URL: https://github.com/codingjoe/select-3
- Owner: codingjoe
- License: bsd-2-clause
- Created: 2025-03-29T10:45:30.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2025-03-29T13:26:28.000Z (9 months ago)
- Last Synced: 2025-10-08T21:06:11.193Z (2 months ago)
- Language: JavaScript
- Size: 5.86 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Select-3 (draft)
_This project is in early development and not yet ready for production use._
**Modern & lightweight select box replacement.**
* Baseline 2024 compliant with all modern browsers.
* Lightweight (less than 1KB minified and gzipped).
* Drop in replacement for `` elements with full native form support.
* Customizable Web Components without interference with native elements.
* Fully accessible with keyboard navigation.
## Installation
```html
```
## Usage
```html
Language:
English
Español
Deutsch
```
### Autocomplete & Dynamic Options (AJAX)
```html
GitHub Users
```
### Customization
```javascript
import { Select3 } from 'https://cdn.jsdelivr.net/npm/select-3@latest/dist/select-3.min.js'
class MySelect extends Select3 {
constructor() {
super();
this.placeholder = 'Select a custom option';
}
connectedCallback() {
super.connectedCallback();
this.addEventListener('change', (e) => {
console.log('Selected value:', e.detail.value);
});
}
}
customElements.define('my-select', MySelect, { extends: 'select-3' });
```
```html
Custom Select
Option 1
Option 2
Option 3
```