Reka UI logoReka
backdrop
Examples
Components

Time Field

Alpha
Enables users to input specific times within a designated field.
––
––
AM

Features

  • Full keyboard navigation
  • Can be controlled or uncontrolled
  • Focus is fully managed
  • Localization support
  • Highly composable
  • Accessible by default

Preface

The component depends on the @internationalized/date package, which solves a lot of the problems that come with working with dates and times in JavaScript.

We highly recommend reading through the documentation for the package to get a solid feel for how it works, and you'll need to install it in your project to use the date-related components.

Installation

Install the date package.

sh
$ npm add @internationalized/date

Install the component from your command line.

sh
$ npm add reka-ui

Anatomy

Import all parts and piece them together.

vue
<script setup>
import {
  TimeFieldInput,
  TimeFieldRoot,
} from 'reka-ui'
</script>

<template>
  <TimeFieldRoot>
    <TimeFieldInput />
  </TimeFieldRoot>
</template>

API Reference

Root

Contains all the parts of a time field

Data AttributeValue
[data-readonly]Present when readonly
[data-disabled]Present when disabled
[data-invalid]Present when invalid

Input

Contains the time field segments

Data AttributeValue
[data-disabled]Present when disabled
[data-invalid]Present when invalid
[data-placeholder]Present when no value is set

Accessibility

Keyboard Interactions

KeyDescription
Tab
When focus moves onto the time field, focuses the first segment.
ArrowLeftArrowRight
Navigates between the time field segments.
ArrowUpArrowDown
Increments/changes the value of the segment.
0-9
When the focus is on a numeric TimeFieldInput, it types in the number and focuses the next segment if the next input would result in an invalid value.
Backspace
Deletes a digit from the focused numeric segments.
AP
When the focus is on the day period, it sets it to AM or PM.