Rich, accessible, lightweight, dependencies-free select component
- customisable style
- rich content
- native fallback
- seamless loading
- overflow protection
- form data update
- native onchange event
- optional rounded edges
- inline or full width
- colour themes
- right-to-left support
- shadow option
- drop-down navigation support
- click-drag-release to select
- unbreakable
- attached to body to aviod clipping
- click outside to close
- animated reveal
- respecting the reduce motion preference
- browser scaling support
- unique class names
- touch screen, mouse, trackpad, keyboard control
- type to select
- section labels
- vector chevron
- thin scrollbar if needed
- lightweight
- easy to use
- npm package
- no dependencies
<link href="n-select.min.css" rel="styleSheet" />
<script src="n-select.min.js" type="module"></script>
<span class="n-select">
<select name="name">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
<span class="n-select__options">
<button>Option 1</button>
<button>Option 2</button>
<button>Option 3</button>
</span>
</span>