Quickpick Web Component Demos

Download Back To CSSScript.Com

Standalone pickers via <script> tag — no React required. Works as a time picker or a generic data grid. Styles are fully encapsulated in Shadow DOM. On desktop, click the input and type to filter options — Enter selects the first match, Escape closes. Widgets with auto-select-on-tab support tab-through: tab in opens the picker, tab out auto-selects the first option — great for speeding up repetitive data entry.

1. Appointment Time Picker

Pick an appointment time:

2. Multiple Instances

Morning slot:

Afternoon slot:

3. Generic Data — US States (JSON)

Pick a US state:

4. Generic Data — Simple CSV

Pick a color:

5. Generic Data — Value:Label CSV

Pick a service type:

6. Business Hours Picker

Set opening hours: