Quantity Picker

c2-quantity-picker is the guests picker of Airbnb and Booking.com: a trigger that sums up several counts and opens a panel of labelled counters, each a c2-quantity with its own limits.

Import

import '@c2n/components/quantity-picker'

Usage

import '@c2n/components/quantity-picker'

<style>
  .rooms {
    width: 320px;
    max-width: 100%;
  }
</style>
<div data-label="Popover, at most 6 guests">
  <c2-quantity-picker label="Guests" max-total="6">
    <c2-quantity name="adults" value="2" min="1" singular="adult" plural="adults">Adults<span slot="hint">Ages 13 or above</span></c2-quantity>
    <c2-quantity name="children" value="1" singular="child" plural="children">Children<span slot="hint">Ages 2–12</span></c2-quantity>
    <c2-quantity name="infants" singular="infant" plural="infants">Infants<span slot="hint">Under 2</span></c2-quantity>
  </c2-quantity-picker>
</div>
<div data-label="Inline, in a booking panel">
  <c2-quantity-picker class="rooms" label="Rooms" inline>
    <c2-quantity name="rooms" value="1" min="1" max="8" singular="room" plural="rooms">Rooms</c2-quantity>
    <c2-quantity name="guests" value="2" min="1" max="4" singular="guest" plural="guests">Guests per room</c2-quantity>
  </c2-quantity-picker>
</div>

The summary

The trigger reads each counter’s count with its noun, singular or plural as Intl.PluralRules picks, joined in the reader’s language with Intl.ListFormat, and leaves out the counters at 0 (“2 adults, 1 child”). placeholder shows while every counter is 0, and summary replaces the whole text with a function of your own:

picker.summary = (counters) => `${counters.reduce((sum, counter) => sum + counter.value, 0)} guests`

Limits and values

Each c2-quantity has min, max and step; max-total on the picker caps the sum, and at the limit every + is off and the note says so. values reads { adults: 2, children: 1, … } by each counter’s name (or its label in lower case), and total the sum. input fires on every step and change when the panel closes after a change (on every step when inline), both with { values, total }. The picker is not form-associated: send values with your form.

Keyboard and screen readers

The trigger’s name includes the label (“Guests: 2 adults, 1 child”). The panel opens on the first counter, whose value is a spinbutton: ↑ and ↓ step it, Home and End jump to its limits. Escape, a click outside or Done closes the panel and returns focus to the trigger, and each change is announced with the new summary.