All components (204)

Slot picker

Dates and time · SlotPicker · .amset-slots

What it is and when to use it

Booking an appointment: the days at the top, with how many free slots each one has left, and the times of the chosen day below, split into morning, afternoon and night. It starts on the first day that has something free, not on a full one.

When to use it

Booking an appointment, a pickup or a visit among slots provided by the server.
note on a slot for what changes something ("Online only", "With surcharge"): it is read along with the time.
Slots with busy are shown all the same, dimmed and struck through: seeing that the day is filling up is information.

When not to

A free time, with no closed slots: TimeField.
Only the day: Calendar or DatePicker.
Seeing what is already in the agenda: MonthAgenda.

Keyboard: there are two lists and Tab passes from one to the other, with focus entering on whatever is already chosen. The Up Arrow and Down Arrow traverse the whole sequence, whether or not it jumps rows; the side arrows stay inside their row, so they stop at the end of one. Home and End go to the first and the last, and typing jumps to the one that starts with those letters. Enter or Space choose. Full days and busy slots are skipped: they do not swallow focus and cannot be chosen, not even with the keyboard.

Accessibility: the block is a section with the name from label; the lists are named "Day" and "Time on Wednesday, September 23", and each part of the day is a group with its title. Each day is named in full, with what it has left ("Wednesday, September 23, 3 slots available", "…, 1 slot available", "…, no slots available"), and each time, with its note separated by a comma. The strikethrough on the busy ones accompanies the dimming so as not to depend on color alone. Changing day does not move focus, so a status region says what is left ("3 slots available on Wednesday, September 23") or the chosen appointment. The figures and plurals come from the language. With disabled the root carries aria-disabled.

States of days and times: on mouse hover they are shaded and the border darkens; when pressed they give in a little; the chosen one is filled with the accent. A day with no slots and a busy time are dimmed and struck through, out of the traversal. With disabled, everything is dimmed but not struck through (it is not that it is full) and the chosen one can still be seen, in dark gray. Keyboard focus is a 2 px ring: on the outside for the times and on the inside, double, in the day strip, which scrolls and clips whatever sticks out.

Motion: colors and borders change with a short transition, and when the day changes its times enter again with a fade, without focus leaving the day strip.

Sizes: sm, md (default) and lg: times at least 30, 36 or 44 px tall and day cards and font to match. With a finger no time goes below 44 px; the day cards are already taller. At 320 px the day strip scrolls inside its box and the times are spread over as many columns as fit.

Fine-tuning: CSS variables on .amset-slots:

Measurements: --amset-slots-height (that of each time), --amset-slots-column (minimum width of a time), --amset-slots-day-width, --amset-slots-day-padding, --amset-slots-slot (between the strip, the times and the state), --amset-slots-radius and --amset-slots-target.
Font: --amset-slots-number (the day of the month), --amset-slots-font (the time), --amset-slots-description (week, month, how many, titles and notes) and --amset-slots-state.
Colors: --amset-slots-background, --amset-slots-border, --amset-slots-selected and --amset-slots-selected-ink.

Context: it goes inside LocaleProvider (or AmsetProvider), which decides how the days are written.

What it looks like

2 slots available on Wednesday, October 7

<SlotPicker
  label="Choose an appointment"
  days={dias}
  value={hueco}
  onChange={setHueco}
/>

Props

Import it with import { SlotPicker } from '@amset/ui'. Required props are marked.

Prop	Type	What it does
`days`required	`readonly AgendaDay[]`	—
`label`required	`string`	What the quote is about. Required: it names the whole block.
`onChange`required	`(slot: SelectedSlot) => void`	—
`value`required	`SelectedSlot \| null`	—
`className`	`string`	Merged with the library classes; it does not replace them.
`disabled`	`boolean`	Everything turned off: what is there and the chosen appointment can be seen, but it cannot be changed.
`empty`	`string`	Text for when the visible day does not have a single slot.
`size`	`"sm" \| "md" \| "lg"`	The hours 30, 36 or 44 px tall (`sm`, `md`, `lg`) and the day cards and the font to match. With a finger, no hour goes below 44 px.

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

CSS variables

These CSS variables are how you adapt it. Declare them on the component's selector, not on :root: the stylesheet redeclares them in the rule itself, and a declaration on the same element always wins.

Variable	Default
`--amset-slots-height`	`var(--amset-height-control)`
`--amset-slots-column`	`5rem`
`--amset-slots-day-width`	`4rem`
`--amset-slots-day-padding`	`var(--amset-space-2) var(--amset-space-3)`
`--amset-slots-number`	`var(--amset-text-lg)`
`--amset-slots-font`	`var(--amset-text-base)`
`--amset-slots-description`	`var(--amset-text-xs)`
`--amset-slots-state`	`var(--amset-text-sm)`
`--amset-slots-slot`	`var(--amset-space-4)`
`--amset-slots-radius`	`var(--amset-radius)`
`--amset-slots-target`	`1.5rem`
`--amset-slots-background`	`var(--amset-surface)`
`--amset-slots-border`	`var(--amset-border)`
`--amset-slots-selected`	`var(--amset-accent)`
`--amset-slots-selected-ink`	`var(--amset-accent-ink)`

How to change it

.amset-slots {
  --amset-slots-height: ...;
  --amset-slots-column: ...;
}

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech: