TimePicker

Inputs & Controls

TimePicker

Analog + digital time picker offering hours/minutes selection.

Usage

Let users choose time-of-day using either dial or text entry.

Highlights

• Analog clock with draggable hand
• AM/PM toggle and keyboard entry

When to use it

• You need tactile dial experience on touch devices.
• Time selection is discrete (hours/minutes).

Related components

TimePickerFieldTimePickerModal

Examples

Default

Preview (Web)

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

export default function Example() {
  const [time, setTime] = useState('10:15');

  return <TimePicker time={time} onTimeChange={({ time: value }) => setTime(value)} />;
}

Prop	Type	Default	Description
timeRequired	string	—	—
onTimeChangeRequired	(params: { time: string; focused?: undefined | PossibleClockTypes; }) => any	—	—
is24Hour	boolean | undefined	—	—
inputType	PossibleInputTypes | undefined	—	—
focused	PossibleClockTypes | undefined	—	—
onFocusInput	((type: PossibleClockTypes) => any) | undefined	—	—
isLandscape	boolean | undefined	—	—
style	StyleProp<ViewStyle>	—	—

Defined in react-native-molecules/components/TimePicker