Time Slot Picker

Category: Form Inputs
Status: beta— new this release, what that means →
Platforms: ReactAvailable
AngularNot implemented yet · data display wave· package preview
SwiftUIComposition
Jetpack ComposeComposition
FlutterComposition
Verification details
What automated tests prove about each implementation — separate from whether the package itself is a finished product. Derived from the test files; how the levels are earned.
React
Package maturity: stable · Implementation verification: Beta
Buildverified
Interactionverified
Accessibilityverified
RTLverified
Large textverified
Visualno evidence
Publishedverified
This platform’s whole catalogue is verified to React beta. The catalogue figure is the weakest component on that platform, not an average.
Install: ReactReact Setup →
npx @kinetixui/cli add time-slot-pickernpm i @kinetixui/ui @kinetixui/tokens@kinetixui/ui on npm @kinetixui/tokens on npm
The CLI copies React source. Usage imports from @kinetixui/ui require the npm package; for copied source, use your configured local import instead.
Angular · previewAngular Setup →
Not implemented yet · data display wave.
SwiftUISwiftUI Setup →
Composition · KinetixUI ships no SwiftUI component for this.
Jetpack ComposeJetpack Compose Setup →
Composition · KinetixUI ships no Jetpack Compose component for this.
FlutterFlutter Setup →
Composition · KinetixUI ships no Flutter component for this.
Registry: /r/time-slot-picker.json
A11y: React: audited in CI →

Choose one time from the slots a product offers, as a radio group of tiles with unavailable and limited slots, periods and a stated time zone.

Reduced motion: off · your browser setting

React installation#

npx @kinetixui/cli add time-slot-picker

React usage#

import { TimeSlotPicker } from "@kinetixui/ui";
 
<TimeSlotPicker
  label="Pickup time"
  timeZoneLabel="Times in Riyadh (GMT+3)"
  groups={[
    { label: "Morning", slots: [
      { value: "09:00", label: "09:00" },
      { value: "09:30", label: "09:30", unavailable: true },
      { value: "10:00", label: "10:00", note: "2 left" },
    ] },
  ]}
  value={slot}
  onValueChange={setSlot}
/>

Availability is data: slots arrive with their state, and nothing here fetches, holds or releases a slot. The labels are shown exactly as given; the component never converts times, and timeZoneLabel says which zone they are in.

Accessibility and RTL#

A radio group (Radix): Tab enters at the selected slot, arrow keys move across all available slots and groups and wrap, Space selects.
Selected is a filled tile and a check mark. Unavailable is disabled, dashed, struck through and spoken as "Unavailable", so neither state is colour alone. A note such as "2 left" is read with the time.
With no available slot, emptyMessage is shown instead of a grid of disabled tiles.
Tiles wrap at a rem minimum width, so 200% text gives fewer, wider tiles. Logical layout mirrors under RTL.
Checked in jsdom and Chromium; no screen reader run.

React API

The props of @kinetixui/ui, generated from its TypeScript. Props inherited from the underlying DOM element (className, id, event handlers) are accepted too and are not listed.

This table is React-specific. The SwiftUI, Jetpack Compose, Flutter and Angular implementations share the design contract — the same variants, sizes, states and tokens — but each exposes its own idiomatic interface. Their real usage is in the platform tabs on the example above, not here.

TimeSlotPicker

TimeSlotPicker props
Prop	Type	Notes
labelrequired	React.ReactNodeNames the group — "Pickup time". Required: an unnamed radio group is announced as just "group".	Names the group — "Pickup time". Required: an unnamed radio group is announced as just "group".
groupsrequired	TimeSlotGroup[]
emptyMessage	React.ReactNodeShown when no slot is available. Default "No times are available."	Shown when no slot is available. Default "No times are available."
timeZoneLabel	React.ReactNodeThe time zone the labels are in. Shown, and used as the group's description.	The time zone the labels are in. Shown, and used as the group's description.
unavailableLabel	stringSpoken after an unavailable slot's label. Default "Unavailable".	Spoken after an unavailable slot's label. Default "Unavailable".

Form InputsTextarea Controls & ActionsButton

Time Slot Picker

Category

Form Inputs

Status

beta— new this release, what that means →

Platforms

ReactAvailable
AngularNot implemented yet · data display wave· package preview
SwiftUIComposition
Jetpack ComposeComposition
FlutterComposition

Verification details

What automated tests prove about each implementation — separate from whether the package itself is a finished product. Derived from the test files; how the levels are earned.

React

Package maturity: stable · Implementation verification: Beta

Buildverified
Interactionverified
Accessibilityverified
RTLverified
Large textverified
Visualno evidence
Publishedverified

This platform’s whole catalogue is verified to React beta. The catalogue figure is the weakest component on that platform, not an average.

Install

ReactReact Setup →
npx @kinetixui/cli add time-slot-pickernpm i @kinetixui/ui @kinetixui/tokens@kinetixui/ui on npm @kinetixui/tokens on npm
The CLI copies React source. Usage imports from @kinetixui/ui require the npm package; for copied source, use your configured local import instead.
Angular · previewAngular Setup →
Not implemented yet · data display wave.
SwiftUISwiftUI Setup →
Composition · KinetixUI ships no SwiftUI component for this.
Jetpack ComposeJetpack Compose Setup →
Composition · KinetixUI ships no Jetpack Compose component for this.
FlutterFlutter Setup →
Composition · KinetixUI ships no Flutter component for this.

Registry

/r/time-slot-picker.json

A11y

React: audited in CI →

Choose one time from the slots a product offers, as a radio group of tiles with unavailable and limited slots, periods and a stated time zone.

Reduced motion: off · your browser setting

React usage#

import { TimeSlotPicker } from "@kinetixui/ui";
 
<TimeSlotPicker
  label="Pickup time"
  timeZoneLabel="Times in Riyadh (GMT+3)"
  groups={[
    { label: "Morning", slots: [
      { value: "09:00", label: "09:00" },
      { value: "09:30", label: "09:30", unavailable: true },
      { value: "10:00", label: "10:00", note: "2 left" },
    ] },
  ]}
  value={slot}
  onValueChange={setSlot}
/>

Accessibility and RTL#

A radio group (Radix): Tab enters at the selected slot, arrow keys move across all available slots and groups and wrap, Space selects.

Selected is a filled tile and a check mark. Unavailable is disabled, dashed, struck through and spoken as "Unavailable", so neither state is colour alone. A note such as "2 left" is read with the time.

With no available slot, emptyMessage is shown instead of a grid of disabled tiles.

Tiles wrap at a rem minimum width, so 200% text gives fewer, wider tiles. Logical layout mirrors under RTL.

Checked in jsdom and Chromium; no screen reader run.

React API

The props of @kinetixui/ui, generated from its TypeScript. Props inherited from the underlying DOM element (className, id, event handlers) are accepted too and are not listed.

TimeSlotPicker

TimeSlotPicker props
Prop	Type	Notes
labelrequired	React.ReactNodeNames the group — "Pickup time". Required: an unnamed radio group is announced as just "group".	Names the group — "Pickup time". Required: an unnamed radio group is announced as just "group".
groupsrequired	TimeSlotGroup[]
emptyMessage	React.ReactNodeShown when no slot is available. Default "No times are available."	Shown when no slot is available. Default "No times are available."
timeZoneLabel	React.ReactNodeThe time zone the labels are in. Shown, and used as the group's description.	The time zone the labels are in. Shown, and used as the group's description.
unavailableLabel	stringSpoken after an unavailable slot's label. Default "Unavailable".	Spoken after an unavailable slot's label. Default "Unavailable".