Quickpick UI — Fast, Touch-Friendly Picker

Live Demos

These are real widgets running in your browser. Try typing to filter (desktop) or tapping to select (mobile).

Simple List

Pass a plain string array. One line of code.

Selected: none

With Options

Placeholder, label, change callback.

Selected: none

Value:Label Pairs

CSV shorthand — "CA:California,NY:New York"

Selected: none

Pre-Selected Value

Set value to pre-select an item.

Selected: Medium

50 US States (Type to Filter)

Works great with long lists. On desktop, start typing to narrow results — try "new" or "north".

Selected: none

Features

Everything you need from a picker, nothing you don't.

Type to Filter

On desktop, just start typing in the input. The grid filters instantly. Enter selects the first match.

Touch Friendly

On mobile, tap to open a bottom sheet with large tap targets. Tap backdrop to close. Input stays read-only.

Keyboard Navigation

Arrow keys, Home/End, Tab to close, Escape to dismiss. Full keyboard support without a mouse.

Accessible

role="listbox", aria-selected, aria-haspopup. Screen reader tested.

React + Vanilla JS

Use as React components or drop in a single <script> tag. Web Components under the hood.

Smart Defaults

Auto column count based on label length. Auto-positioning above/below. Reduced motion support.

Get Started

Two ways to use Quickpick — pick the one that fits your project.

Vanilla JS (No Build Step)

Include the script

Use it

Quickpick('#el', ['Red', 'Green', 'Blue']);

// With options
Quickpick('#el', {
  data: ['Red', 'Green', 'Blue'],
  placeholder: 'Pick a color',
  label: 'Favorite Color',
  columns: 3,
  value: 'Green',
  onChange: function(item) {
    console.log(item.value, item.label);
  }
});

React

Copy components into your project

import {
  AppointmentTimeSelector,
  BusinessHoursTimeSelector
} from './components';

Time picker

<AppointmentTimeSelector
  selectedTime={time}
  onTimeChange={setTime}
  selectedDate={new Date()}
  businessHours={businessHours}
  label="Appointment Time"
/>

Generic select

<AppointmentTimeSelector
  items={[
    { value: 'CA', label: 'California' },
    { value: 'NY', label: 'New York' },
  ]}
  selectedValue={selected}
  onTimeChange={(item) => setSelected(item.value)}
  label="US State"
/>