Time Select

Overview

TimeSelect is the shared time picker used for scheduling and availability UI.

It is built on top of Select and generates a fixed time-option list in 15-minute increments, plus 23:59.

Use it when the user is selecting a clock time from a normal dropdown rather than typing arbitrary time text.

Basic Usage

<TimeSelect
  value={dueTime}
  onChange={setDueTime}
/>

With Bounds

Use minTime, maxTime, and disabled times to constrain the option set.

<TimeSelect
  value={tempDueTime}
  onChange={setTempDueTime}
  minTime="09:00"
  maxTime="18:00"
  disabledTimes={['12:00', '12:15', '12:30', '12:45']}
/>

Time Notation

Pass timeNotation to match the user or workspace preference:

military notation -> HH:mm
otherwise -> h:mm aaa

Props

Prop	Type	Default	Description
`value`	`string`	—	Current time value.
`onChange`	`(value: string \| null) => void`	—	Required. Called when a time is selected.
`timeNotation`	`UserTimeNotation \| null`	—	Controls how labels are formatted.
`className`	`string`	—	Additional classes passed through to `Select`.
`minTime`	`string`	—	Inclusive lower bound unless `minTimeExclusive` is set.
`maxTime`	`string`	—	Inclusive upper bound unless `maxTimeExclusive` is set.
`minTimeExclusive`	`boolean`	`false`	Excludes the minimum time itself.
`maxTimeExclusive`	`boolean`	`false`	Excludes the maximum time itself.
`disabledTimes`	`string[]`	—	Specific time values to disable.
`error`	`string \| null`	—	Inline error message.

Brand Dashboard Usage

Pattern	Path	Notes
Due-date time pairing	`fsai/apps/brand-dashboard/src/pages/Learning/components/DueDatePicker.tsx`	Used alongside `DateInput` for scheduling.
Opening-hours editor	`fsai/packages/shared-ui/src/modules/locations/components/FranchiseLocationDetails/FranchiseLocationDetailsLocation.tsx`	Open/close time selection within bounded schedules.
Brand-dashboard re-export	`fsai/apps/brand-dashboard/src/components/TimeSelect/TimeSelect.tsx`	Brand dashboard re-exports the shared component.

Important Cautions

TimeSelect is not a freeform time text field.
The available options are generated internally in 15-minute increments.
It should be used when the stored value is a normal time string compatible with the shared SDK time helpers.

Guidelines

Do use TimeSelect for schedule and availability choices
Do pair it with DateInput when the user needs both a date and a time
Do use bounds and disabled times to reflect real scheduling constraints
Don't use TimeSelect when arbitrary typed time entry is required

Time Select

On this page