PhiaUi.Components.TimeSlotList (phia_ui v0.1.17)

TimeSlotList component — a vertical scrollable list of time slots with an optional AM/PM toggle.

Displays time slots as full-width buttons in a single-column layout, ideal for appointment booking forms where a compact list is preferred over a grid. Supports an AM/PM toggle header to filter displayed periods.

Zero JavaScript — state is managed by the LiveView.

States

State	Description
available (default)	Full-width button, foreground text, hover highlight
selected	Blue border, blue text, semibold, light blue background
slot disabled	Muted text, opacity-50, cursor-not-allowed

Slot formats accepted

Plain string: "09:00" — value and label both equal the string
Map with value only: %{value: "09:00"} — label defaults to value
Map with value + label: %{value: "09:00", label: "9:00 AM"}
Full map: %{value: "09:00", label: "9:00 AM", disabled: true}

Examples

<%!-- Basic usage --%>
<.time_slot_list slots={~w(09:00 09:30 10:00)} />

<%!-- With selected slot and LiveView handler --%>
<.time_slot_list
  slots={@available_slots}
  selected={@selected_time}
  on_select="pick_time"
/>

<%!-- With AM/PM toggle --%>
<.time_slot_list
  slots={@filtered_slots}
  show_ampm={true}
  ampm={@ampm}
  on_ampm_change="toggle_ampm"
  selected={@selected_time}
  on_select="pick_time"
/>

Summary

Functions

time_slot_list(assigns)

Renders a scrollable vertical list of time-slot buttons with an optional AM/PM toggle.

Functions

time_slot_list(assigns)

Renders a scrollable vertical list of time-slot buttons with an optional AM/PM toggle.

Examples

<.time_slot_list slots={~w(09:00 09:30 10:00)} selected="09:30" on_select="pick_time" />

Attributes

slots (:list) (required) - List of time slot strings or maps (%{value:, label:, disabled:}).
selected (:string) - Value of the currently selected slot. Defaults to nil.
on_select (:string) - phx-click event name fired when a slot is clicked. Defaults to nil.
show_ampm (:boolean) - Whether to display the AM/PM toggle header. Defaults to false.
ampm (:string) - Currently active AM/PM period. Defaults to "AM". Must be one of "AM", or "PM".
on_ampm_change (:string) - phx-click event name fired when the AM/PM toggle is clicked. Defaults to nil.
max_height (:string) - CSS max-height value for the scrollable slot area. Defaults to "240px".
class (:string) - Additional CSS classes merged via cn/1. Defaults to nil.
Global attributes are accepted. HTML attributes forwarded to the root wrapper element.