TimePickerField

Inputs & Controls

TimePickerField

Field-style time input that pairs labels with value segments.

Usage

Collect times inline inside forms without launching a modal.

Highlights

• Handles focus per segment
• Works with keyboard arrows and digits

When to use it

• Precise data entry is more important than dial UI.
• Inline forms must stay compact.

Related components

TimePickerTextInput

Examples

Default

Preview (Web)

import { useState } from 'react';
import { TimePickerField } from 'react-native-molecules/components/TimePickerField';

export default function Example() {
  const [time, setTime] = useState<Date | null>('10:00am');

  return <TimePickerField time={time} onTimeChange={setTime} />;
}

Prop	Type	Default	Description
timeRequired	string	—	—
onTimeChangeRequired	(time: string) => void	—	—
is24Hour	boolean | undefined	—	—
withModal	boolean | undefined	—	—
modalProps	Omit<TimePickerModalProps, "ref" | "time" | "onClose" | "isOpen" | "onConfirm"> | undefined	—	—
iconButtonProps	Omit<Partial<IconButtonProps>, "ref" | "onPress"> | undefined	—	—

Defined in react-native-molecules/components/TimePickerField