BookingSlots

Code

import { BookingSlots } from "@fadymondy/nasaq/web";export function Times({ slots }) {  const [start, setStart] = useState<Date | null>(null);  return <BookingSlots slots={slots} value={start} onValueChange={setStart} />;}

Bookings · beta

Live examples and controls: BookingSlots in the lab.

InstallCopy Anchor Link

npx shadcn@latest add https://docs.nasaqui.com/r/booking-slots.json

Choose a day and a time. Days with no free time are disabled in the calendar. The times are a radio group so the keyboard and screen readers get one choice out of many.

When to useCopy Anchor Link

• Picking an appointment time from a list you already have.
• Inside a reschedule dialog.
• Showing that a time is taken (full) or briefly reserved by someone else (held).

When not to useCopy Anchor Link

• Free-form time entry: use TimePicker.
• A full day timeline of many bookings: use Scheduler or ClinicSchedule.

ImportCopy Anchor Link

import { BookingSlots } from "@fadymondy/nasaq/web";
// inside this monorepo: "@nasaq/web"

Quick startCopy Anchor Link

import { BookingSlots } from "@fadymondy/nasaq/web";

export function Times({ slots }) {
  const [start, setStart] = useState<Date | null>(null);
  return <BookingSlots slots={slots} value={start} onValueChange={setStart} />;
}

AnatomyCopy Anchor Link

BookingSlots                  data-slot="booking-slots"
├─ Calendar                   days without a free time are disabled
├─ time groups                morning, afternoon, evening
│  └─ slot tiles              Radio, with icon and text for the state
├─ legend                     available, full, held
└─ next free day button

APICopy Anchor Link

Every div prop is passed through unless noted.

ExamplesCopy Anchor Link

Hold-aware slots

// state is "available", "full", "held" or "past".
// A held slot is a temporary reservation, so it can free up again.
<BookingSlots slots={slots} />

AccessibilityCopy Anchor Link

• The tiles are a Base UI radio group: arrow keys move, Space picks.
• Full and held tiles are disabled and say so in text and with an icon.
• The chosen time is announced with its date.

RTL & i18nCopy Anchor Link

• The calendar and the grid mirror. Times stay in a bdi so 09:30 never flips.
• Strings live in a STRINGS = { en, ar } object and any of them can be replaced with labels. The locale comes from NasaqProvider.

Styling & tokensCopy Anchor Link

• Colours, radii and type come from --nq-* tokens; nothing is a raw colour. Spacing and alignment use logical classes.
• Target [data-slot="booking-slots"] and the inner data-slot parts shown in the anatomy.

Do / Don'tCopy Anchor Link

• 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.

RelatedCopy Anchor Link

• booking-flow
• booking-manage
• calendar
• scheduler

LabCopy Anchor Link

https://docs.nasaqui.com/?path=/docs/components-bookings-booking-slots--docs