https://github.com/afonja14755/ux-select

UX Select is a lightweight Native JavaScript plugin that replace native select elements with customization
https://github.com/afonja14755/ux-select

css-custom-properties javascript lightweight native-javascript options select select-multiple typescript ux-select vanila-javascript

Last synced: about 1 month ago
JSON representation

UX Select is a lightweight Native JavaScript plugin that replace native select elements with customization

• Host: GitHub
• URL: https://github.com/afonja14755/ux-select
• Owner: afonja14755
• License: mit
• Created: 2023-07-21T13:20:52.000Z (almost 2 years ago)
• Default Branch: master
• Last Pushed: 2025-02-17T14:26:02.000Z (3 months ago)
• Last Synced: 2025-03-17T17:51:16.590Z (2 months ago)
• Topics: css-custom-properties, javascript, lightweight, native-javascript, options, select, select-multiple, typescript, ux-select, vanila-javascript
• Language: TypeScript
• Homepage: https://ux-select.com
• Size: 289 KB
• Stars: 30
• Watchers: 5
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# UX Select

Free and lightweight native(vanilla) JavaScript plugin that replace native select elements with customization.

## Status

[![npm](https://img.shields.io/npm/v/ux-select?logo=npm&logoColor=%232088FF&labelColor=%23FFF)](https://www.npmjs.com/package/ux-select)

[![jsDelivr hits (npm scoped)](https://img.shields.io/jsdelivr/npm/hm/ux-select?logo=jsdelivr&logoColor=blue&labelColor=white&color=blue)](https://www.jsdelivr.com/package/npm/ux-select)

[![Static Badge](https://img.shields.io/badge/StackBlitz-examples-blue?logo=stackblitz&logoColor=blue&labelColor=white)](https://stackblitz.com/@afonja14755/collections/ux-select)

![GitHub Workflow Status (with event)](https://img.shields.io/github/actions/workflow/status/afonja14755/ux-select/format.yml?logo=github%20actions&label=Prettier&labelColor=%23fff)

![GitHub Workflow Status (with event)](https://img.shields.io/github/actions/workflow/status/afonja14755/ux-select/lint.yml?logo=github%20actions&label=ESLint&labelColor=%23fff)

## Installation

### ES-module

```shell

npm i ux-select --save

```

### Non ES-module

Install plugin files from **_dist_** directory;

- `css/ux-select.min.css`

- `js/ux-select.iife.js`

## Usage

### ES-module

```javascript

import UxSelect from 'ux-select/dist/js/ux-select.es.js'

```

### Non ES-module

#### Add styles and script to project

```html

```

#### Initialize ux-select in .js file

```javascript

const myUxSelect = new UxSelect(element, params)

```

## Style customization

You can customize styles by replace CSS-variables what contain "--uxs" prefix and placed on :root.

## Documentation

More details on **[ux-select.com](https://ux-select.com/)**.

## License

UX Select is licensed by [MIT](https://choosealicense.com/licenses/mit/)

It can be used **for free** and **without any attribution**, in any personal or commercial project.