Native Rich Select

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>

GitHub

Demos

npm i n-select