Guest Picker

Category: Form Inputs
Status: beta— new this release, what that means →
Platforms: ReactAvailable
AngularNot implemented yet · data display wave· package preview
SwiftUIComposition
Jetpack ComposeComposition
FlutterComposition
Verification details
What automated tests prove about each implementation — separate from whether the package itself is a finished product. Derived from the test files; how the levels are earned.
React
Package maturity: stable · Implementation verification: Beta
Buildverified
Interactionverified
Accessibilityverified
RTLverified
Large textverified
Visualno evidence
Publishedverified
This platform’s whole catalogue is verified to React beta. The catalogue figure is the weakest component on that platform, not an average.
Install: ReactReact Setup →
npx @kinetixui/cli add guest-pickernpm i @kinetixui/ui @kinetixui/tokens@kinetixui/ui on npm @kinetixui/tokens on npm
The CLI copies React source. Usage imports from @kinetixui/ui require the npm package; for copied source, use your configured local import instead.
Angular · previewAngular Setup →
Not implemented yet · data display wave.
SwiftUISwiftUI Setup →
Composition · KinetixUI ships no SwiftUI component for this.
Jetpack ComposeJetpack Compose Setup →
Composition · KinetixUI ships no Jetpack Compose component for this.
FlutterFlutter Setup →
Composition · KinetixUI ships no Flutter component for this.
Registry: /r/guest-picker.json
A11y: React: audited in CI →

Several counts chosen together — adults, children, rooms, ticket types — as NumberInput steppers in a popover, with per-type and total limits and a summary on the trigger.

Reduced motion: off · your browser setting

Guests

React installation#

npx @kinetixui/cli add guest-picker

React usage#

import { GuestPicker } from "@kinetixui/ui";
 
const [guests, setGuests] = React.useState({ adults: 2, children: 0 });
 
<GuestPicker
  label="Guests"
  categories={[
    { id: "adults", label: "Adults", description: "13 and over", min: 1 },
    { id: "children", label: "Children", description: "2 to 12" },
  ]}
  value={guests}
  onValueChange={setGuests}
  maxTotal={6}
  totalHint="Up to 6 guests per room."
/>

GuestPicker is a composition, not a new control: one NumberInput per category inside a Popover. Use it for travellers, rooms, ticket types or any set of counts chosen together.

Limits. Each category has min and max; maxTotal caps the sum, and a row's maximum shrinks to the room that is left. When the total is reached, totalHint is announced.
Summary. The trigger shows formatSummary(value) (default "Adults: 2, Children: 1"); pass your own wording and plural rules.
Wording. Every label is yours. The stepper buttons are named Decrease Adults and Increase Adults by default; override decrementLabel and incrementLabel to localise.

Accessibility and RTL#

The trigger's name is the label plus the summary, so a screen reader hears "Guests, Adults: 2, Children: 0".
Each stepper is named after its category. At a limit the button stays focusable and is marked aria-disabled, so keyboard focus is not lost, and each change is announced politely.
The panel uses logical properties and mirrors under RTL. Checked in jsdom and in Chromium; no screen reader run.

React API

The props of @kinetixui/ui, generated from its TypeScript. Props inherited from the underlying DOM element (className, id, event handlers) are accepted too and are not listed.

This table is React-specific. The SwiftUI, Jetpack Compose, Flutter and Angular implementations share the design contract — the same variants, sizes, states and tokens — but each exposes its own idiomatic interface. Their real usage is in the platform tabs on the example above, not here.

GuestPicker

GuestPicker props
Prop	Type	Notes
labelrequired	React.ReactNodeThe field's visible label — "Guests", "Travellers". Also names the trigger.	The field's visible label — "Guests", "Travellers". Also names the trigger.
categoriesrequired	GuestCategory[]
valuerequired	Record<string, number>Counts keyed by category id. Missing ids read as that category's `min`.	Counts keyed by category id. Missing ids read as that category's `min`.
onValueChangerequired	(value: Record<string, number>) => void
maxTotal	numberCap on the sum of all categories.	Cap on the sum of all categories.
totalHint	React.ReactNodeShown in the panel once `maxTotal` is reached — "You can book up to 9 travellers."	Shown in the panel once `maxTotal` is reached — "You can book up to 9 travellers."
formatSummary	((value: Record<string, number>, categories: GuestCategory[]) => string)Trigger text for the current counts.	Trigger text for the current counts.
decrementLabel	((category: GuestCategory) => string)Stepper names, for localisation. Defaults: (label) => `Decrease ${label}` / `Increase ${label}`.	Stepper names, for localisation. Defaults: (label) => `Decrease ${label}` / `Increase ${label}`.
incrementLabel	((category: GuestCategory) => string)
disabled	boolean
className	string
footer	React.ReactNodeExtra content at the end of the panel — a "Done" button, a policy note.	Extra content at the end of the panel — a "Done" button, a policy note.
open	boolean
onOpenChange	((open: boolean) => void)

Form InputsForm Form InputsInput

Guest Picker

Category

Form Inputs

Status

beta— new this release, what that means →

Platforms

ReactAvailable
AngularNot implemented yet · data display wave· package preview
SwiftUIComposition
Jetpack ComposeComposition
FlutterComposition

Verification details

What automated tests prove about each implementation — separate from whether the package itself is a finished product. Derived from the test files; how the levels are earned.

React

Package maturity: stable · Implementation verification: Beta

Buildverified
Interactionverified
Accessibilityverified
RTLverified
Large textverified
Visualno evidence
Publishedverified

This platform’s whole catalogue is verified to React beta. The catalogue figure is the weakest component on that platform, not an average.

Install

ReactReact Setup →
npx @kinetixui/cli add guest-pickernpm i @kinetixui/ui @kinetixui/tokens@kinetixui/ui on npm @kinetixui/tokens on npm
The CLI copies React source. Usage imports from @kinetixui/ui require the npm package; for copied source, use your configured local import instead.
Angular · previewAngular Setup →
Not implemented yet · data display wave.
SwiftUISwiftUI Setup →
Composition · KinetixUI ships no SwiftUI component for this.
Jetpack ComposeJetpack Compose Setup →
Composition · KinetixUI ships no Jetpack Compose component for this.
FlutterFlutter Setup →
Composition · KinetixUI ships no Flutter component for this.

Registry

/r/guest-picker.json

A11y

React: audited in CI →

Several counts chosen together — adults, children, rooms, ticket types — as NumberInput steppers in a popover, with per-type and total limits and a summary on the trigger.

Reduced motion: off · your browser setting

Guests

React usage#

import { GuestPicker } from "@kinetixui/ui";
 
const [guests, setGuests] = React.useState({ adults: 2, children: 0 });
 
<GuestPicker
  label="Guests"
  categories={[
    { id: "adults", label: "Adults", description: "13 and over", min: 1 },
    { id: "children", label: "Children", description: "2 to 12" },
  ]}
  value={guests}
  onValueChange={setGuests}
  maxTotal={6}
  totalHint="Up to 6 guests per room."
/>

GuestPicker is a composition, not a new control: one NumberInput per category inside a Popover. Use it for travellers, rooms, ticket types or any set of counts chosen together.

Limits. Each category has min and max; maxTotal caps the sum, and a row's maximum shrinks to the room that is left. When the total is reached, totalHint is announced.

Summary. The trigger shows formatSummary(value) (default "Adults: 2, Children: 1"); pass your own wording and plural rules.

Wording. Every label is yours. The stepper buttons are named Decrease Adults and Increase Adults by default; override decrementLabel and incrementLabel to localise.

Accessibility and RTL#

The trigger's name is the label plus the summary, so a screen reader hears "Guests, Adults: 2, Children: 0".

Each stepper is named after its category. At a limit the button stays focusable and is marked aria-disabled, so keyboard focus is not lost, and each change is announced politely.

The panel uses logical properties and mirrors under RTL. Checked in jsdom and in Chromium; no screen reader run.

React API

The props of @kinetixui/ui, generated from its TypeScript. Props inherited from the underlying DOM element (className, id, event handlers) are accepted too and are not listed.

GuestPicker

GuestPicker props
Prop	Type	Notes
labelrequired	React.ReactNodeThe field's visible label — "Guests", "Travellers". Also names the trigger.	The field's visible label — "Guests", "Travellers". Also names the trigger.
categoriesrequired	GuestCategory[]
valuerequired	Record<string, number>Counts keyed by category id. Missing ids read as that category's `min`.	Counts keyed by category id. Missing ids read as that category's `min`.
onValueChangerequired	(value: Record<string, number>) => void
maxTotal	numberCap on the sum of all categories.	Cap on the sum of all categories.
totalHint	React.ReactNodeShown in the panel once `maxTotal` is reached — "You can book up to 9 travellers."	Shown in the panel once `maxTotal` is reached — "You can book up to 9 travellers."
formatSummary	((value: Record<string, number>, categories: GuestCategory[]) => string)Trigger text for the current counts.	Trigger text for the current counts.
decrementLabel	((category: GuestCategory) => string)Stepper names, for localisation. Defaults: (label) => `Decrease ${label}` / `Increase ${label}`.	Stepper names, for localisation. Defaults: (label) => `Decrease ${label}` / `Increase ${label}`.
incrementLabel	((category: GuestCategory) => string)
disabled	boolean
className	string
footer	React.ReactNodeExtra content at the end of the panel — a "Done" button, a policy note.	Extra content at the end of the panel — a "Done" button, a policy note.
open	boolean
onOpenChange	((open: boolean) => void)