Booking Guests Sheet

ProNew

A sheet to set adults, children and infants with steppers that enforce limits (at least one adult, a maximum total), a plain-language summary on the trigger and clear messages when a limit is reached. Use this when a phone booking flow asks how many of each kind of guest, with rules between them.

Customize

Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.

max8

Guide and examples

When to use it

Use it when a phone booking flow asks how many of each kind of guest, with rules between them.

Do not use it for a single quantity (use the quantity sheet) or free-text names.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`max`	`number`	`8`	Most guests in total.
`value`	`Guests`	`required`	`{ adults, children, infants }`.
`onValueChange`	`(guests: Guests) => void`	`required`	Called when Done is pressed.

Accessibility

Each row has a label, a description (age range) and a stepper with named buttons ("Add adult"), disabled at limits with a text reason ("Up to 8 guests").
The trigger text is the summary ("2 adults, 1 child"); the counts announce in a status as they change.
Done applies the choice; closing otherwise leaves the previous value.

Testing

The pattern ships with a Testing Library test (booking-guests-sheet.test.tsx) that drives it through roles and the keyboard.

Guide and examples

When to use it

Use it when a phone booking flow asks how many of each kind of guest, with rules between them.

Do not use it for a single quantity (use the quantity sheet) or free-text names.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`max`	`number`	`8`	Most guests in total.
`value`	`Guests`	`required`	`{ adults, children, infants }`.
`onValueChange`	`(guests: Guests) => void`	`required`	Called when Done is pressed.

Accessibility

Each row has a label, a description (age range) and a stepper with named buttons ("Add adult"), disabled at limits with a text reason ("Up to 8 guests").
The trigger text is the summary ("2 adults, 1 child"); the counts announce in a status as they change.
Done applies the choice; closing otherwise leaves the previous value.

Testing

The pattern ships with a Testing Library test (booking-guests-sheet.test.tsx) that drives it through roles and the keyboard.