#TimeInput

A time typed segment by segment, the companion to DateInput — showTimeDropdown adds a list of times for when the reader would rather pick than type. It takes React Aria time objects, and hour cycle comes from DateFormatProvider app-wide rather than per input.

Source · Storybook

#Usage

import { TimeInput } from '@wallarm-org/design-system/TimeInput';

#Examples

#States

Default, disabled and error, matching DateInput so a form containing both stays consistent.

#Icon

A clock icon as decoration. It opens nothing on its own — the dropdown is a separate opt-in.

#Sizes

The shared height scale, so a time field lines up beside a date field.

#Filled

A held value beside a placeholder, with the clear affordance appearing only once there is a value.

#Granularity

Hour, minute or second. Drop to hour where minutes would imply a precision the system does not honour.

#Time dropdown steps

timeStep sets the spacing of the offered times — fifteen, thirty or sixty minutes. Coarser steps make the list scannable; the reader can still type an exact time.

#Read only

Value legible, every edit affordance gone, as on DateInput.

#Props