SlotPicker

SlotPicker recebe slots livres como timestamps ISO UTC e os agrupa por dia no fuso IANA ativo de exibição. Escolha-o para reservas públicas; use TimePicker quando a aplicação coleta um horário local, em vez de mostrar disponibilidade que já existe como instantes.

Exemplos

Escolher e confirmar um slot

Os slots permanecem UTC no limite da API, mas o dia de calendário e o horário mostrados aqui são calculados em timezone. Selecionar um horário mostra uma ação de confirmação separada, na qual o servidor deve revalidar o slot.

SMTWTFS

New York

Monday, August 3

Traduzir o seletor de fuso incorporado

labels.timeZonePicker é encaminhado diretamente ao TimeZonePicker incorporado. Mantenha esses labels aninhados com a tradução de SlotPicker para que o caminho de alterar fuso não volte ao inglês.

SMTWTFS

New York

segunda-feira, 3 de agosto

Quando usar

Use SlotPicker quando uma pessoa precisa navegar por disponibilidade finita fornecida pelo servidor e confirmar um slot.

Prefira outro componente quando:

A pessoa digita um horário local arbitrário — use TimePicker ou TimeInput.
A aplicação está definindo disponibilidade — use WeeklyScheduleEditor antes de produzir instantes reserváveis.
A aplicação mostra um calendário mais amplo de eventos — use CalendarView.

Acessibilidade

Horários disponíveis formam uma role="listbox" nomeada; cada horário é um botão nativo com role="option" e aria-selected. Um slot selecionado é seguido pelo botão nativo de confirmação.
A área de disponibilidade que muda é aria-live="polite", incluindo skeleton de carregamento e estados vazios. O TimeZonePicker incorporado preserva o comportamento de teclado de seu combobox pesquisável.
Dias de calendário com disponibilidade recebem um marcador visual, e dias indisponíveis são desabilitados. Strings visíveis e acessíveis de data, horário, reserva e fuso são configuráveis por locale e labels.

API e código

Nome	Tipo	Obrigatória	Descrição
`slots`	`Slot[]`	—	Free slots in UTC. The component groups them by active display-zone day.
`date`	`string`	—	Controlled visible local YYYY-MM-DD day.
`defaultDate`	`string`	—	Initial visible local YYYY-MM-DD day.
`onDateChange`	`(isoDate: string) => void`	—	Called after the visible local day changes.
`timezone`	`string`	—	Controlled IANA display zone. Defaults to the browser-detected zone.
`onTimezoneChange`	`(zone: string) => void`	—	Called after the active IANA display zone changes.
`detectedZone`	`string`	—	IANA zone shown as detected in the embedded TimeZonePicker.
`onConfirm`	`(slot: Slot) => void`	—	Called after a user confirms a selected slot. Revalidate on the server.
`confirmLabel`	`string`	—	Confirmation button text. Default: Confirm.
`holdExpiresAt`	`string`	—	UTC ISO temporary-hold expiry. Its remaining duration is visible.
`nextAvailableDate`	`string`	—	Local YYYY-MM-DD target for an empty-day shortcut.
`loading`	`boolean`	—	Renders six slot pills while availability loads.
`emptyMessage`	`string`	—	Empty visible-day message.
`fullMessage`	`string`	—	Message when no slots exist in any day.
`locale`	`string`	—	BCP 47 locale used for display times and dates. Default: en-US.
`min`	`Date \| string`	—	Inclusive local calendar lower limit.
`max`	`Date \| string`	—	Inclusive local calendar upper limit.
`children`	`ReactNode`	—	Summary content rendered above the calendar.
`labels`	`SlotPickerLabels`	—	Translatable visible and accessible labels, merged over English defaults.

x-data="lyraSlotPicker({ … })"

Opção	Tipo	Obrigatória	Descrição
`slots`	`readonly LyraSlot[]`	—	Free slots in UTC. They are grouped by the active display-zone day.
`date`	`string \| null`	—	Initial visible local `YYYY-MM-DD` day; modelable after initialization.
`timezone`	`string`	—	Initial IANA display zone; modelable after initialization.
`detectedZone`	`string`	—	IANA zone shown as detected in the embedded time-zone picker.
`holdExpiresAt`	`string \| null`	—	UTC ISO temporary-hold expiry.
`nextAvailableDate`	`string`	—	Local `YYYY-MM-DD` target for an empty-day shortcut.
`loading`	`boolean`	—	Renders six slot pills while availability loads.
`locale`	`string`	—	BCP 47 locale used for display times and dates. Default: `"en-US"`.
`min`	`string`	—	Inclusive local calendar lower limit.
`max`	`string`	—	Inclusive local calendar upper limit.
`labels`	`LyraSlotPickerLabels`	—	Translatable labels merged over English defaults.
`tzLabels`	`LyraTimeZonePickerLabels`	—	Labels forwarded unchanged to the nested time-zone picker.

Sem React, agrupe instantes UTC com o fuso de exibição escolhido antes de renderizar estas classes:

html

<div class="lyra-slotpicker">
  <div class="lyra-slotpicker__side">3 de agosto de 2026 · Nova York</div>
  <div class="lyra-slotpicker__main" aria-live="polite">
    <span class="lyra-slotpicker__daylabel">segunda-feira, 3 de agosto</span>
    <div
      class="lyra-slotpicker__slots"
      role="listbox"
      aria-label="Horários disponíveis para segunda-feira, 3 de agosto"
    >
      <button class="lyra-slotpicker__slot" type="button" role="option" aria-selected="false">
        09:00
      </button>
    </div>
  </div>
</div>

<lyra:slot-picker> Gerado do lyra-ds/blade v0.10.0.

O comportamento vem de lyraSlotPicker() — instale @lyra-ds/alpine e veja a aba HTML + Alpine.

Prop	Padrão	Obrigatória	Valores de exemplo
`slots`	`[]`	—	—
`date`	`null`	—	—
`timezone`	`null`	—	`America/Sao_Paulo`
`detectedZone`	`null`	—	—
`holdExpiresAt`	`null`	—	`2099-08-10T13:02:05Z`
`nextAvailableDate`	`null`	—	—
`loading`	`false`	—	—
`locale`	`'en-US'`	—	—
`min`	`null`	—	—
`max`	`null`	—	—
`labels`	`[]`	—	—
`tzLabels`	`[]`	—	—

blade

<lyra:slot-picker
    date="2026-03-17"
    timezone="America/Sao_Paulo"
    locale="en-US"
    :slots="[
        ['start' => '2026-03-17T13:00:00Z', 'end' => '2026-03-17T13:30:00Z'],
        ['start' => '2026-03-17T14:00:00Z', 'end' => '2026-03-17T14:30:00Z'],
        ['start' => '2026-03-17T15:30:00Z', 'end' => '2026-03-17T16:00:00Z'],
    ]"
/>