# CheckInKiosk > Self check-in kiosk - scan or type a booking code, or enter a phone number on a big keypad, find the booking, and print a queue ticket with a QR and an auto reset. Source: https://docs.nasaqui.com/components/check-in-kiosk ## Install ```bash npx shadcn@latest add https://docs.nasaqui.com/r/check-in-kiosk.json ``` For a tablet at the front door. A handheld scanner types into the focused code field like a keyboard. The camera is not used: this component has no scanner. It finds today's booking by code or phone, asks which one when there are several, says so when the person is too early, and offers a walk-in ticket. ## When to use - Patients check themselves in. - A scanner or a keypad is the only input. ## When not to use - Booking a new visit: use BookingFlow. ## Import ```tsx import { CheckInRequest, CheckInResult, CheckInKiosk } from "@fadymondy/nasaq/web"; // inside this monorepo: "@nasaq/web" ``` ## Quick start ```tsx import { CheckInKiosk } from "@fadymondy/nasaq/web"; { const entry = await api.checkIn(request); return { entry, position: 3, waitMinutes: 20 }; }} /> ``` ## Anatomy ``` CheckInKiosk data-slot="check-in-kiosk" ├─ mode tabs scan a code, or phone ├─ code field or keypad ├─ result: choose one, too early, not found └─ ticket queue number, QR, position, wait, reset countdown ``` ## API Every `div` prop is passed through unless noted. | Prop | Type | Default | Description | | --- | --- | --- | --- | | `bookings` | `KioskBooking[]` | `required` | Today's bookings for this desk. | | `onCheckIn` | `(request) => Promise` | `required` | Put the person in the queue. | | `allowWalkIn` | `boolean` | `true` | Let people without a booking join. | | `earlyMinutes, windowMinutes` | `number` | 60, 240 | How early is allowed; how far from now a booking counts. | | `resetSeconds` | `number` | `20` | Seconds the ticket stays. 0 keeps it. | | `defaultMode` | `"scan" \| "phone"` | `"scan"` | Start tab. | | `now` | `number` | | Epoch ms for stories. | | `labels` | `Partial` | | Override any string. | ## Examples **Ticket QR** ```tsx // The ticket QR holds queue:A-012, which parseTicketValue reads back. ``` ## Accessibility - Keys are real buttons at a touch size. Results are announced in a status region. - The countdown to reset is stated in text so it can be paused by tapping. ## RTL & i18n - The keypad stays in phone order (left to right) in Arabic, as phones do. - Strings live in a `STRINGS = { en, ar }` object and any of them can be replaced with `labels`. The locale comes from `NasaqProvider`. ## Styling & tokens - Colours, radii and type come from `--nq-*` tokens; nothing is a raw colour. Spacing and alignment use logical classes. - Target `[data-slot="check-in-kiosk"]` and the inner `data-slot` parts shown in the anatomy. ## Do / Don't - Do keep the async callbacks honest: return `{ error }` so the component can show the message. - Do pass `now` in tests and stories so the output stays the same. - Don't fetch inside the component: it is presentational and takes data and callbacks. - Don't rely on colour for state: every state also has a word. ## Related - [`waiting-screen`](https://docs.nasaqui.com/components/waiting-screen) - [`lobby-display`](https://docs.nasaqui.com/components/lobby-display) - [`booking-manage`](https://docs.nasaqui.com/components/booking-manage) - [`qr-code`](https://docs.nasaqui.com/components/qr-code) ## Lab https://docs.nasaqui.com/?path=/docs/components-bookings-check-in-kiosk--docs ## Code ### React ```tsx import { CheckInKiosk } from "@fadymondy/nasaq/web"; { const entry = await api.checkIn(request); return { entry, position: 3, waitMinutes: 20 }; }} /> ``` ### shadcn ```tsx import { CheckInKiosk } from "@/components/ui/check-in-kiosk"; { const entry = await api.checkIn(request); return { entry, position: 3, waitMinutes: 20 }; }} /> ``` ### Vue ```vue ``` ### Blade ```blade @php $t = now()->getTimestamp() * 1000; $bookings = [ ['id' => 'b1', 'code' => 'BK-7F3Q9K', 'phone' => '0100 123 4567', 'name' => 'Layla Hassan', 'startsAt' => $t + 10 * 60000], ['id' => 'b2', 'code' => 'BK-4M8TX2', 'phone' => '0111 222 3333', 'name' => 'Omar Nasser', 'startsAt' => $t + 25 * 60000], ['id' => 'b3', 'code' => 'BK-BBBBBB', 'phone' => '0122 000 1111', 'name' => 'Hadi Mansour', 'startsAt' => $t + 20 * 60000], ['id' => 'b4', 'code' => 'BK-CCCCCC', 'phone' => '0122 000 1111', 'name' => 'Hadi Jr', 'startsAt' => $t + 30 * 60000], ]; @endphp {{-- A real page answers the event with a fetch to the server, which creates the queue entry: x-on:nq-check-in="$event.detail.promise = fetch('/check-in', { method: 'POST', body: JSON.stringify($event.detail) }).then((r) => r.json())" --}} ``` ### HTML + Alpine ```html

Check in

Scan your booking code or type your phone number.

```

Check in

We found more than one booking. Which one is yours?