Fast Touch-Friendly Picker Library for JavaScript & React – Quickpick UI

Quickpick UI is a JavaScript library that creates responsive, accessible pickers for both React and Vanilla JS.

Features:

• Type to Filter: Users can type immediately to filter the grid on desktop. It selects the first match automatically.
• Touch Friendly: Mobile users trigger a bottom sheet with large tap targets. The input remains read-only to prevent keyboard flashes.
• Keyboard Navigation: It supports full keyboard control. Users navigate with Arrow keys, Home, End, and Escape.
• Tab-Through Auto-Fill: The autoSelectOnTab feature allows rapid data entry. Tabbing out auto-selects the first option.
• Accessibility: It uses role="listbox" and manages aria-selected states.
• Smart Positioning: The popup flips above or below the input based on available viewport space.

Use Cases:

• Appointment Time Selection: Build a booking form that respects business hours.
• Generic Form Selects: Replace native <select> elements with a consistent, stylable picker.
• Business Hours Editors: Use the pre-built BusinessHoursTimeSelector to let users set opening and closing times.

How To Use It (Vanilla JS):

1. Download quickpick.min.js and insert it into your page.

<script src="quickpick.min.js"></script>

2. Create a simple language picker:

<input id="picker" />

Quickpick('#picker', ['JavaScript', 'CSS', 'HTML', ...]);

3. With configuration options:

Quickpick('#el', {
  data: ['Red', 'Green', 'Blue'],   // The list of options
  placeholder: 'Pick a color',      // Placeholder text shown in the input
  label: 'Favorite Color',          // Label rendered above the input
  columns: 3,                       // Force a 3-column grid layout
  width: '400px',                   // CSS width for the trigger and popup
  value: 'Green',                   // Pre-select this value on init
  onChange: function(item) {
    // Fires whenever the user selects an item
    console.log(item.value, item.label);
  }
});
// Useful when data comes from a server as a compact string
Quickpick('#el', {
  data: 'CA:California,NY:New York,TX:Texas'
  // Each pair is "storedValue:DisplayLabel"
});
// Programmatic handle
var handle = Quickpick('#el', ['A', 'B', 'C']);
handle.el;        // Direct reference to the underlying Web Component element
handle.destroy(); // Tears down the widget and restores the original

4. Create an Appointment Time Picker.

• selectedTime (string): Current time value in HH:MM format. Use this as a controlled input.
• onTimeChange (function): Fires when the user selects a time. Receives the selected HH:MM string.
• selectedDate (Date): A Date object that determines which weekday’s business hours to apply when filtering the time grid.
• businessHours (object): Per-weekday config. Each key (monday through sunday) accepts { enabled, start, end }.
• items (array): An array of { value, label } objects. Passing this prop activates generic select mode.
• selectedValue (string): The currently selected value key when operating in items mode.
• placeholder (string): Placeholder text displayed inside the input field.
• label (string): Label text rendered above the input.
• columns (number): Overrides the automatic column count in the popup grid.
• popupWidth (string): Accepts 'auto', 'match-button', or any valid CSS width value.
• width (string): Sets the CSS width for both the trigger input and the popup.
• disabled (boolean): Disables the selector. The input becomes non-interactive.
• loading (boolean): Renders a shimmer skeleton placeholder in place of the input and popup.
• autoSelectOnTab (boolean): Activates tab-through auto-fill behavior. Defaults to false.

<quickpick-appointment
  id="appt1"
  selected-date="2026-02-09"
  business-hours='{"monday":{"enabled":true,"start":"09:00","end":"17:00"},"tuesday":{"enabled":true,"start":"09:00","end":"17:00"},"wednesday":{"enabled":true,"start":"09:00","end":"17:00"},"thursday":{"enabled":true,"start":"09:00","end":"17:00"},"friday":{"enabled":true,"start":"09:00","end":"12:00"},"saturday":{"enabled":false},"sunday":{"enabled":false}}'
  label="Appointment Time"
  auto-select-on-tab
></quickpick-appointment>

5. Create a Business Hours Picker.

• startTime (string): The opening time in HH:MM format.
• endTime (string): The closing time in HH:MM format.
• onStartTimeChange (function): Fires when the user selects a new start time.
• onEndTimeChange (function): Fires when the user selects a new end time.
• width (string): CSS width override applied to both picker elements.
• disabled (boolean): Disables both the start and end selectors simultaneously.
• loading (boolean): Renders shimmer skeletons for both selectors.
• autoSelectOnTab (boolean): Activates tab-through auto-fill for both selectors. Defaults to false.

<quickpick-hours
  id="hours1"
  start-time="09:00"
  end-time="17:00"
  auto-select-on-tab
></quickpick-hours>

FAQs:

Q: How do I pre-select a value on initialization?
A: Pass the value key in the options object for vanilla JS: Quickpick('#el', { data: [...], value: 'TX' }). In React, pass selectedTime for the time picker or selectedValue for generic select mode.

Q: The popup opens but is hidden behind another element. How do I fix this?
A: The popup uses auto-positioning based on viewport space. If a parent container has overflow: hidden or a low z-index stacking context, it can clip or obscure the popup. Remove overflow: hidden from ancestors that sit between the picker and the viewport, or adjust the stacking context.

Q: Does autoSelectOnTab overwrite a value the user has already set?
A: No. The feature checks for an existing value before applying any auto-selection. If the field already holds a value when the user tabs through, that value is preserved. Auto-select only fires when the field is empty and the user has made no active interaction during that focus cycle.

Q: How do I remove a Quickpick instance and restore the original input?
A: Call handle.destroy() on the object returned by Quickpick(). This tears down the Web Component, removes all event listeners, and restores the original <input> element to the DOM in its pre-widget state.