Guest Picker

Popover-based guest selector for accommodation booking. Handles adults, children, infants, and pets with occupancy constraints. Supports child age capture (requireChildAges) with per-child selects and a blocked Done state until all ages are provided. Summary includes ages when captured: "2 children (5, 10)". Exports GuestPickerPanel for composition in search bars.

core/guest-picker

Installation

1 · Add registry to components.json

2 · Install component

Examples

Default

Default, child ages required, and constrained (max 4 guests) configurations.

Default

Adults: 2 · Children: 0 · Infants: 0 · Pets: 0

Child ages required

Please enter an age for each child.

2 adults · 2 children (ages pending)

Constrained (max 4 guests, notes)

API Reference

Prop	Type	Default	Description
`value`req	`GuestValue`	—	Controlled { adults, children, infants, pets, childrenAges? } value. childrenAges is an array of ages (0–17) whose length matches children.
`onChange`req	`(value: GuestValue) => void`	—	Called when any category or child age changes.
`config`	`GuestPickerConfig`	—	Occupancy constraints and behavioural flags. Key fields: maxAdults, maxChildren, maxInfants, maxPets, maxTotal, minAdults, allowInfants, allowPets, requireChildAges, ageBands, infantNote, petNote.
`placeholder`	`string`	`"Add guests"`	Trigger placeholder when no guests are selected.
`disabled`	`boolean`	—	Disables the trigger.
`open`	`boolean`	—	Controlled popover open state.
`onOpenChange`	`(open: boolean) => void`	—	Called when the popover open state changes.