TimePicker

Inline panel for selecting a time with hour/minute (and optional seconds) precision, rendered directly in the page rather than in a dialog — the time counterpart to MonthPicker and YearPicker. Supports 12-hour or 24-hour clocks, a meridiem column on 12-hour clocks, and custom step intervals for minutes and seconds. Works in controlled and uncontrolled modes.

For a form field that displays the selected time and opens this panel in a dialog, use `TimePickerInput`.

Source

View source code

LLM docs

LLM documentation

Package

@platform-blocks/react-ui-library

Examples

⁽³⁾

Properties

⁽¹²⁾

Playground

Basic

Basic controlled usage of the inline TimePicker panel with 24-hour format.

Loading demo…

import
 
React
,
 
{
 useState 
}
 
from
 
'react'
;
import
 
{
 
Block
,
 
Text
,
 
TimePicker
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
import
 
type
 
{
 
TimePickerValue
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
export
 
function
 
Demo
(
)
 
{
  
const
 
[
value
,
 setValue
]
 
=
 useState
<TimePickerValue
>
(
{
 hours
:
 
13
,
 minutes
:
 
30
 
}
)
;
 
  
const
 formatted 
=
 
`${String(value.hours).padStart(2, '0')}:${String(value.minutes).padStart(2, '0')}`
;
 
  
return
 
(
    
<Block
 fullWidth
>
      
<TimePicker
 
value
=
{
value
}
 
onChange
=
{
setValue
}
 
/>
      
<Text
 
size
=
"sm"
 
color
=
"secondary"
>
{
`Selected: ${formatted}`
}
</Text
>
    
</Block
>
  
)
;
}

Format 12h

Using 12-hour clock format with AM/PM toggle.

Loading demo…

import
 
React
,
 
{
 useState 
}
 
from
 
'react'
;
import
 
{
 
Block
,
 
Text
,
 
TimePicker
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
import
 
type
 
{
 
TimePickerValue
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
export
 
function
 
Demo
(
)
 
{
  
const
 
[
value
,
 setValue
]
 
=
 useState
<TimePickerValue
>
(
{
 hours
:
 
0
,
 minutes
:
 
15
 
}
)
;
 
  
const
 formatted 
=
 
`${String(value.hours).padStart(2, '0')}:${String(value.minutes).padStart(2, '0')}`
;
 
  
return
 
(
    
<Block
 fullWidth
>
      
<TimePicker
 
value
=
{
value
}
 
onChange
=
{
setValue
}
 
format
=
{
12
}
 
/>
      
<Text
 
size
=
"sm"
 
color
=
"secondary"
>
        
{
`Internal (24h): ${formatted}`
}
      
</Text
>
    
</Block
>
  
)
;
}

With Seconds

Including seconds selection in the TimePicker panel.

Loading demo…

import
 
React
,
 
{
 useState 
}
 
from
 
'react'
;
import
 
{
 
Block
,
 
Text
,
 
TimePicker
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
import
 
type
 
{
 
TimePickerValue
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
export
 
function
 
Demo
(
)
 
{
  
const
 
[
value
,
 setValue
]
 
=
 useState
<TimePickerValue
>
(
{
 hours
:
 
9
,
 minutes
:
 
5
,
 seconds
:
 
30
 
}
)
;
 
  
const
 formatted 
=
 
`${String(value.hours).padStart(2, '0')}:${String(value.minutes).padStart(2, '0')}:${String(value.seconds || 0).padStart(2, '0')}`
;
 
  
return
 
(
    
<Block
 fullWidth
>
      
<TimePicker
 
value
=
{
value
}
 
onChange
=
{
setValue
}
 withSeconds 
/>
      
<Text
 
size
=
"sm"
 
color
=
"secondary"
>
{
`Selected: ${formatted}`
}
</Text
>
    
</Block
>
  
)
;
}

Scan to open this page on your phonereact-ui-library.com/components/TimePicker

</>

react-ui-library

100+ accessible, themeable components that work seamlessly across iOS, Android, and Web.

A Platform Blocks product.

Quick Links

Components Charts Hooks

Docs

Getting Started Localization llms.txt

Resources

FAQ Changelog Accessibility Sitemap