Skip to content

radogado/n-select

Repository files navigation

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