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>