FormsReact Native

Time field

Choose a local time with native clock or keyboard input and explicit confirmation.

Public APILumenTimeFieldReact Native

Native example

Use Time field

Use a local wall-clock value rather than an epoch timestamp. Keep dates, time zones, overnight scheduling, and translated labels in the application.

View captured React Native example

Time field rendered in the Expo web renderer Lumen playground — Captured exampleExpo web renderer

import { useState } from 'react'
import { LumenTimeField, type LumenTimeSelection } from '@santi020k/lumen-react-native/datetime'

export function MeetingTime() {
  const [time, setTime] = useState<LumenTimeSelection | null>(null)
  return <LumenTimeField label="Meeting time" value={time} onValueChange={setTime}
    minTime={{ hour: 8, minute: 30 }} maxTime={{ hour: 17, minute: 0 }}
    confirmLabel="Confirm" dismissLabel="Cancel" />
}

Reference

Public API

The primary shared and platform-specific options exposed by LumenTimeField.

API	Values or type	Default	Description
label	string	Required	Names the time field.
value / onValueChange	LumenTimeSelection \| null / (LumenTimeSelection) => void	Required	Controls confirmed local hour and minute.
minTime / maxTime	LumenTimeSelection	undefined	Inclusive same-day bounds; minimum must not exceed maximum.
is24Hour / locale	boolean / string	System preference / undefined	Formats the selected time.
placeholder / confirmLabel / dismissLabel / rangeErrorLabel	string	Choose a time / Confirm / Cancel / Choose a time within the allowed range	Localizes empty, confirmation, cancellation and validation copy.
safeAreaInsets	LumenSafeAreaInsets	Zero insets	Supplies application safe-area insets for the iOS sheet.
description / errorMessage	string	undefined	Provides localized supporting copy or host validation.
enabled / readOnly	boolean	true / false	Blocks changes without clearing controlled state.

Native behavior

Design and accessibility

When to use it

Use a local wall-clock value rather than an epoch timestamp. Keep dates, time zones, overnight scheduling, and translated labels in the application.

Accessibility

Names the selected time and native dialog actions; confirmation publishes the draft, cancellation preserves the value, and disabled or read-only fields cannot open selection.

Shared component

Available on other platforms

Apple / SwiftUI Android / Compose