COMPONENTS / ATOMS / al-time-selector-list← ALL COMPONENTS

Time Selector List

<al-time-selector-list><ALTimeSelectorList> REACTbeta

Reference generated from the custom elements manifest — 12 properties, 0 slots, 1 events.

PLAYGROUND2 CONTROLS

PREVIEW / al-time-selector-list / ALTITUDE

Loading preview

Hello world

FLAGS

CODE — HTML / REACT

Guidance

NOT YET AUTHORED · 20 COMPONENTS COVERED

NO USAGE GUIDANCE HAS BEEN WRITTEN FOR THIS COMPONENT YET. THE API BELOW IS GENERATED FROM THE MANIFEST AND IS COMPLETE; WHAT IS MISSING IS WHEN TO REACH FOR IT AND WHEN NOT TO.

FIGMA PARITYALTITUDE DESIGN SYSTEM

NOT IN FIGMAAltitude Design System

This component exists in code and has no Figma component set.

DECIDED BY: NEVER SYNCED
FIGMA SIDE: NEVER OBSERVED
LAST CONFIRMED SYNC: NEVER
PUBLIC SURFACE: 12 ATTR · 0 SLOT · 1 EVENT · 0 PART

The two sides have never been confirmed equal, so there is no baseline to compare against.

Known missing in Figma (altitude-figma-sync MISSING_IN_FIGMA) — needs a bespoke build.

ACCESSIBILITYAXE 4.12.1

CHECKEVIDENCEDETAILRESULT

Default stateAXEtime-selector-list--DefaultPASS

Advanced statesAXE1 further storyPASS

Screen readerMANUALNo screen-reader pass has been recorded for this component.NOT RECORDED

Keyboard navigationINTERACTION TESTSNo interaction tests and no manual keyboard pass.NOT RECORDED

MEASURED 2026-09-08 · 2 STORIES · AXE WCAG2A + WCAG2AA + WCAG21A + WCAG21AA + WCAG22AA

COLOR CONTRAST0 RULES FAILING

The CI gate disables color-contrast globally (libs/al-web-components/story-fixture/src/main.ts), so its result never reaches a test run. It is enabled for this measurement, and reported here whichever way it comes out.

NO CONTRAST VIOLATIONS ACROSS THIS COMPONENT’S 2 STORIES.

INSTALL@southleft/al-web-components/components/time-selector-list

import '@southleft/al-web-components/components/time-selector-list';
import { ALTimeSelectorList } from '@southleft/al-react';

API — 12 PROPS12 DOCUMENTED

PROPTYPEDEFAULT

direction'row'Determines the direction of the time selector ('row' renders items in a row).—

activeTimestringSets a specific time to be active (24-hour format, e.g., activeTime="16:00" for 4 PM).—

times{ value: Date; available: boolean }[]Container for the current times within the month.[]

timeIncrementsnumberIncrements in minutes for the time display.30

timeStartnumberThe minimum time displayed between times (24-hour format, e.g., timeStart=${16} for 4 PM).—

timeEndnumberThe maximum time displayed between times (24-hour format, e.g., timeEnd=${16} for 4 PM).—

disabledMinTimestringThe minimum time to disable for time display (24-hour format, e.g., disabledMinTime="16:00" for 4 PM).—

disabledMaxTimestringThe maximum time to disable for time display (24-hour format, e.g., disabledMaxTime="16:00" for 4 PM).—

resetTimebooleanSets the active time selector to an inactive state.—

is24HourFormatbooleanDetermines whether to use a 24-hour time format.—

timeFormatstringSpecifies the date format for UI display (e.g., 'h:mm a').'h:mm a'

timeSelectorLabelstringThe label for the time selector heading.'Time'

SLOTS0

THIS COMPONENT DECLARES NO SLOTS IN THE MANIFEST.

EVENTS1

EVENTDESCRIPTIONTYPE

onTimeSelectorListChangeFired when a time is selected. Detail: `{ value }` — formatted per `timeFormat`.CustomEvent

PUBLIC METHODS5

METHODDESCRIPTION

handleOnChange()Handle on change event when a time is selected. - Emits a 'change' event with the selected time value. 1. Dispatches a 'change' event containing the selected time value in the specified time format. 2. Returns the formatted selected time value.

setTimes()Create times for the time selector list based on specified constraints. 1. Initialize an empty array to store all display times for the month. 2. Iterate through all times starting from the beginning of today until the end of today. 3. If start and end times are set, only consider times within that range. 4. Check if the current time falls within the specified time range and constraints. 5. Push the time object into the 'times' array if it meets the criteria. 6. Increment the time by the specified increments and continue looping until the end of today.

setAvailable()Check if the provided time can be selected based on specified constraints. 1. Parse the minimum time constraints if provided. 2. Parse the maximum time constraints if provided. 3. Check if the provided time falls within the specified range. 4. Return true if the time is within the allowed range, otherwise return false.

setActive()Apply an active state to the provided time if it meets certain conditions. 1. Define the activeTime variable if a specific time is set. 2. Check if the time is available, selected, and the resetTime flag is false; return the selection state. 3. If a specific time is set, check if the provided time matches the activeTime and return true.

handleOnClick()Select the provided time and emit the selection. 1. Clear the time reset flag to prevent resetting the time. 2. If the time is available, update the selectedTime value and trigger the 'change' event.

SOURCE — components/time-selector-list/time-selector-list.ts · Atoms/Form/Time Selector List