https://github.com/yohn/yoselect
A searchable select and tag component for PicoCSS
https://github.com/yohn/yoselect
css form picocss select tag-input tagging tags vanilla-javascript vanilla-js
Last synced: 4 months ago
JSON representation
A searchable select and tag component for PicoCSS
- Host: GitHub
- URL: https://github.com/yohn/yoselect
- Owner: Yohn
- License: mit
- Created: 2025-01-23T23:36:59.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2025-01-27T00:45:27.000Z (12 months ago)
- Last Synced: 2025-08-09T00:41:17.760Z (5 months ago)
- Topics: css, form, picocss, select, tag-input, tagging, tags, vanilla-javascript, vanilla-js
- Language: JavaScript
- Homepage: https://yohn.github.io/YoSelect/
- Size: 31.3 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# YoSelect
YoSelect is a customizable select component that enhances the native HTML select element with features like searching, multiple selection, image support, and the ability to create new options.
## Installation
```
npm install @yohns/yoselect
```
1. Include the CSS and JS files in your HTML:
```html
```
## Basic Usage
```html
Select an option...
Option 1
Option 2
const select = new YoSelect(document.querySelector('.yoSelect'));
```
## Features & Options
### Configuration Options
| Option | Type | Default | Description |
|--------|------|---------|-------------|
| `search` | boolean | false | Enables search functionality |
| `creatable` | boolean | false | Allows creating new options |
| `clearable` | boolean | false | Adds ability to clear selection |
| `searchPlaceholder` | string | 'Search...' | Placeholder text for search input |
| `noResultsPlaceholder` | string | 'No results found' | Text shown when no options match search |
| `addOptionPlaceholder` | string | 'Press Enter to add "[term]"' | Text shown when creating new option |
| `classTag` | string | '' | Custom CSS class for selected tags in multiple mode |
| `placeholder` | string | '' | Default placeholder text when no option is selected |
### HTML Attributes
You can configure YoSelect using either JavaScript options or data attributes:
```html
```
### Image Support
Add images to options using the `data-yo-img` attribute:
```html
United States
```
### Multiple Selection
Enable multiple selection using the `multiple` attribute:
```html
Option 1
Option 2
```
### Searchable Select
Enable search functionality:
```html
new YoSelect(element, {
search: true,
searchPlaceholder: 'Custom search placeholder...',
noResultsPlaceholder: 'Custom no results message'
});
```
### Creatable Options
Allow users to create new options:
```html
new YoSelect(element, {
creatable: true,
addOptionPlaceholder: 'Press Enter to create "[term]"'
});
```
### Clearable Selection
Enable clearing of selection:
```html
```
### Placeholder Text
Set placeholder text in three ways:
1. Using data-placeholder attribute:
```html
Choose an option...
```
2. Using JavaScript:
```html
Select something...
```
3. Using configuration:
```javascript
new YoSelect(element, {
placeholder: 'Please select...'
});
```
### Custom Styling
Add custom classes to tags in multiple selection mode:
```javascript
new YoSelect(element, {
classTag: 'custom-tag-class'
});
```
### Event Listener
Add an event listener to the select element:
```javascript
const select = new YoSelect(element);
select.element.addEventListener('change', (event) => {
console.log('Selection changed:', event.target.value);
});
```
## Browser Support
YoSelect is compatible with all modern browsers including:
- Chrome
- Firefox
- Safari
- Edge
## Examples
### Basic Single Select with Search
```html
Select a country
United States
United Kingdom
```
### Multiple Select with Create Option
```html
JavaScript
Python
```
### Searchable Tags with Custom Styling
```html
Tag 1
Tag 2
new YoSelect(element, {
classTag: 'custom-tag',
searchPlaceholder: 'Search tags...'
});
```
## License
MIT License