Skip to main content

Super Select

An enhanced drop-in replacement for native <select> with a consistent experience across devices.

Read the Docs

Try it out:

Enhanced​

The HTML <select> element is a good way to choose one or more values from a predefined list. It has clear semantics and works naturally with forms.

Its limitations appear when that predefined list becomes large or dynamic, or when the browser's built-in presentation is not a good fit. Native selects expect their options to be rendered in the DOM, provide little support for loading or searching data, and offer limited control over how the field is presented.

Super Select builds on the strengths of the native select while addressing those limitations. It can search and load options in pages, present the same field in several different ways, and adapt or replace the rendered UI. This allows the same selection model to work for both simple local lists and large data sets loaded as needed.

Drop-In Replacement​

Super Select accepts the same props as a native select. Values, default values, validation, change events, and form submission all work the same way. It also accepts normal <option> and <optgroup> children:

<SuperSelect>
  <option value="" disabled hidden>Select an option</option>
  <option value="1">Hello</option>
  <option value="2">World!</option>
  <option value="3">Three</option>
</SuperSelect>

Super Select adds just four custom props, all of which are optional:

  1. optionSource loads options from an API or other data source, with support for search, pagination, and selected value resolution.
  2. mode displays the field as a modal picker, inline option list, set of toggle buttons, or native <select>.
  3. onValueChange provides the selected value directly as a simpler alternative to the native onChange event.
  4. customization allows you to modify or replace any part of the rendered UI.

Consistent Experience Across Devices​

Native selects look and behave differently across platforms, and multiple selects are especially awkward in most desktop browsers.

Instead of switching between a browser dropdown, mobile picker, and desktop list box, Super Select provides a predictable interface designed for mouse, keyboard, and touch. Its values, events, and form behavior remain unchanged.

Where To Start​

Getting Started

Install the package, render a field, and choose a mode.

Option Sources

Load options from an API or other data source.

Customization

Keep the defaults, bring your own classes, or replace rendered components.