Guest pickerhospitality
Adults, children and rooms picker (or a single guests count) with optional child ages, a summary label, a popover on desktop and a drawer on mobile.
설치
pnpm
pnpm dlx shadcn@4.23.0 add @uikit/guest-picker의존 아이템buttondrawerlocalenative-selectpopoverquantity-stepperstyle
Default
guest-picker-demo.tsx
"use client";
import * as React from "react";import { GuestPicker, type PartyValue } from "@/components/ui/guest-picker";
export default function GuestPickerDemo() { const [value, setValue] = React.useState<PartyValue>({ adults: 2, children: 1, rooms: 1, childAges: [null] }); return ( <div className="flex w-72 flex-col gap-2"> <GuestPicker value={value} onValueChange={setValue} childAges={{ min: 0, max: 17 }} /> <p className="text-sm text-muted-foreground">Ages: {value.childAges.map((age) => age ?? "?").join(", ") || "none"}</p> </div> );}