Slot picker

The next free times of a service as tappable chips: a strip of days, then the day's times — each a link to the booking page or a toggle the reader presses.

Web · ✓Mobile · n/aBureau · ✓BêtaFormulaires

import { SlotPicker } from "@krizaka/ui/slot-picker";

Web uniquement — React, depuis @krizaka/ui/slot-picker. Bêta : son API peut encore changer à une version mineure.

Mobile · n/a. The apps pick a time in their own booking flow; a native twin of the weeks follows the first app that needs it. → Date picker

Pourquoi il est là. Used by Akinaza.

Quand l’utiliser

A booking page that offers the real availability in one tap: the next days and their free times.
On a shop's public page, with each time a link that opens the booking with that time chosen.

Quand ne pas l’utiliser

Picking any date of a calendar, free of availability.À la place : Date picker
Choosing between a few options that are not times.À la place : Choice grid

Installation

Installer

npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcss

Styles

@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";

Importer

import { SlotPicker } from "@krizaka/ui/slot-picker";

Exemples

Times

Three days of free times; the reader presses one, and a time with few seats says so.

Weeks

← Today →: the host loads each week; times in Morning and Afternoon, a full time struck out and announced, the time zone and the duration under them.

Oct 19 – 25

Morning
Afternoon

Montréal (UTC−4) · 45 min

Props

Tappable free times by day: the day strip, then the day's chips (in parts of the day if asked) — links or toggles — and, with week, ← Today →.

Prop	Type	Défaut	Description
`days`requis	`readonly PickerDay[]`	—	The days that have free times, in order.
`emptyLabel`requis	`string`	—	Said when no day has a free time.
`label`requis	`string`	—	The name of the group (`Available times`), passed translated.
`defaultDay`	`string`	—	The first day shown. Default: the first of `days`.
`footer`	`ReactNode`	—	The context line under the times: time zone and duration (`Montréal (UTC−4) · 45 min`), formatted by the host.
`linkAs`	`LinkComponent`	—	The app's link component for the times that have an `href`, and for the week buttons when `weekHref` is set.
`maxWeek`	`string`	—	The latest week the host offers (ISO date): → is disabled there.
`minWeek`	`string`	—	The earliest week the host offers (ISO date): ← is disabled there.
`onValueChange`	`((id: string) => void)`	—	Called with the chosen slot's id.
`onWeekChange`	`((week: string) => void)`	—	Called with the ISO date of the week asked for (± 7 days, or `todayWeek`). The host loads that week's days.
`todayWeek`	`string`	—	The current week, where « Today » goes back to. Default: `minWeek`.
`value`	`string \| null`	—	The chosen slot's id (controlled).
`week`	`string`	—	The week shown, the ISO date of its first day (`2026-10-19`; controlled). Setting it turns on ← Today →.
`weekButtons`	`{ previous: string; today: string; next: string; }`	—	Names of the three week buttons, translated: `{ previous: "Previous week", today: "Today", next: "Next week" }`.
`weekHref`	`((week: string) => string)`	—	Makes the week buttons links (the address holds the state: `?week=`), given the week they go to.
`weekLabel`	`string`	—	The week in words, formatted by the host with `@krizaka/intl` (`19 – 25 Oct`); announced politely at every change.

Accessibilité

The days are toggle buttons in a group named by label; the chosen day is aria-pressed.
The times are a list named by the day; each is a link, or a toggle with aria-pressed when it is the chosen one.
With week, the week in words (weekLabel) is a polite live region: a week change is announced. The week buttons are named (weekButtons); at an end (minWeek, maxWeek) they are aria-disabled.
A full time is struck out and disabled, and its note (Full) is read with it — never colour alone. Parts of the day (groups) are lists named day · part.
A time that is no longer offered is a disabled button, never removed silently under the reader's finger.

Clavier

Touches	Action
`Tab, Enter or Space`	Moves through the week buttons, the days, then the times; Enter or Space chooses.
`← →`	Moves between the days, and between the times of a day (a full time is skipped).
`Page Up, Page Down`	Previous or next week (`week`); focus returns to the chosen day.

Bonnes pratiques

Compute the slots on the server from the shop's availability and pass only free ones: the picker never decides what is free.
Format the labels for the reader's locale and the shop's time zone (9 h 30 in French, 9:30 AM in English).
Show the days that have a free time only, a dozen at most; say plainly when none is (emptyLabel).
With week, the host loads the days of the week it is asked for (onWeekChange) and sets minWeek / maxWeek to what it offers; pass weekHref to keep the address as the state (?week=, and ?slot= through each time's href).
Put the time zone and the duration in footer, formatted with @krizaka/intl (Montréal (UTC−4) · 45 min); the labels of the parts of the day come from the host's messages.
Use note for what changes the choice (2 spots left), not for decoration.

Générée depuis le code de @krizaka/ui 3.63.1 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub