TimePicker

The TimePicker component provides a user-friendly interface for selecting time values. It uses native time pickers on both iOS and Android platforms while offering multiple style variants to match your form design.

Import

import { TimePicker } from '@/components/forms/TimePicker';

Props

Variants

TimePicker supports three style variants to match your form design:

Animated (Default)

<TimePicker
  label="Meeting Time"
  value={time}
  onChange={setTime}
  variant="animated"
/>

Classic

<TimePicker
  label="Meeting Time"
  value={time}
  onChange={setTime}
  variant="classic"
/>

Underlined

<TimePicker
  label="Meeting Time"
  value={time}
  onChange={setTime}
  variant="underlined"
/>

Basic Examples

With 24-hour Format

<TimePicker
  label="Departure Time"
  value={departureTime}
  onChange={setDepartureTime}
  is24Hour={true}
/>

With Error State

<TimePicker
  label="Appointment Time"
  value={appointmentTime}
  onChange={setAppointmentTime}
  error="Please select a valid time"
/>

Disabled State

<TimePicker
  label="Closing Time"
  value={closingTime}
  onChange={setClosingTime}
  disabled={true}
/>

Platform Behavior

• iOS: Shows a bottom sheet modal with a spinner-style time picker
• Android: Opens the native Android time picker dialog

Best Practices

• Choose the appropriate variant for your form design:
  • animated: For forms where you want to save space while maintaining clarity
  • classic: For traditional forms with simple, predictable behavior
  • underlined: For a modern, minimal aesthetic or when you want to reduce visual noise
• Use the same time format (12/24 hour) consistently throughout your app
• Provide clear error messages when time constraints are not met
• Use the same variant consistently across related form components

Features

• Native time picker integration for both iOS and Android
• Support for both 12-hour and 24-hour formats
• Floating label animation
• Error state handling
• Dark mode support
• Disabled state
• Consistent with other form components

Installation

The TimePicker component is included in the core components package. No additional installation is required.

Usage

import { TimePicker } from '@/components/forms/TimePicker';
 
// Basic usage
<TimePicker
  label="Appointment Time"
  value={new Date()}
  onChange={(date) => console.log(date)}
/>
 
// With 24-hour format
<TimePicker
  label="Meeting Time"
  value={new Date()}
  onChange={(date) => console.log(date)}
  is24Hour={true}
/>

Theming

The TimePicker follows your app's theme configuration and includes:

• Light and dark mode support
• Proper contrast for text and icons
• Animated floating label
• Focus state indicators
• Error state styling
• Disabled state styling

Examples

Basic Usage

<TimePicker
  label="Start Time"
  value={new Date()}
  onChange={(date) => console.log(date)}
/>

Custom Styling

<TimePicker
  label="Custom Time"
  value={new Date()}
  onChange={(date) => console.log(date)}
  containerClassName="my-custom-class"
/>

Related Components

• DatePicker - For selecting dates
• DateTimePicker - For selecting both date and time