fetaUI
GitHub

Time Field

A segmented time input. Each part is a spin button you can type into or step.

FreeWeb and MobileMotion

Preview

npx shadcn add @fetaui/time-field
Playground
0930AM
Empty
hhmmAM
Filled
0930AM
Out of range
1015PM
Pick a time from 09:00 to 17:00
Disabled
0930AM
Icons animation
Disabled
Motion

Installation

Terminal· bash
 npx shadcn add @fetaui/time-field

Filled

Values are 24 hour text, shown as 12 hour parts.

0930AM
Disabled
Motion

Accessibility

  • Each part is a spinbutton with a name and a text value.
  • An out of range time sets invalid and announces why.

Motion

  • The focused part is an inverse chip, with a 120 ms fade.
  • Digits roll as you step.
  • With reduced motion, digits change at once.

Responsive behavior

  • 170 px wide on Web, full width and 48 px high on Mobile.

Performance

  • No timers and no list. Digits roll through RollingText only when a part has a value.
  • The error message mounts only when it is needed.

Note for AI

Give your coding assistant the Markdown reference instead of screenshots.

  • Import TimeField from @/components/fetaui/time-field.
  • value, min and max are 24 hour text, like 09:30, and it shows 12 hour parts.
  • onValueChange fires once hour and minute are filled, and an unset period counts as AM. It fires null when a part is cleared.
  • invalid alone shows no message. Pass error, or min and max, to get one.
/docs/components/time-field/markdown
PreviousSignature Pad
NextDay Strip

Related

Date PickerComponentA pill field that opens a month in a floating surface.Wheel PickerComponentThree wheels for a time. Set time waits until every wheel has settled.FieldComponentLabel, control and help text as one unit, so they read, validate and announce together.CalendarComponentPick a date, a range, or a date and a time. Six rows always, so the height never jumps.