전체 카탈로그
Data InputTimeInput22 props

Time Input

TimeInput lets users enter a time of day and converts it to a standard format. It also allows users to adjust times using the arrow keys. Use it in forms, scheduling flows, or a...

공식 문서 열기
live previewData Input

Preview

Import

import {TimeInput} from '@astryxdesign/core/TimeInput';

Astryx 문서 권장 방식대로 root barrel이 아니라 컴포넌트 subpath에서 가져옵니다.

When to use

TimeInput lets users enter a time of day and converts it to a standard format. It also allows users to adjust times using the arrow keys. Use it in forms, scheduling flows, or a...

timeinputtimepickertimeclockhourminuteampmtimeselect

Important props

onChange(value: ISOTimeString | undefined) => voidoptional
changeAction(value: ISOTimeString | undefined) => void | Promise<void>optional
hourFormat12h | 24hoptional
sizesm | md | lgoptional

Theming targets

astryx-time-input

Best practices

  • DoChoose the hour format (12h or 24h) that matches your audience's locale: 12-hour with AM/PM for US-centric UIs, 24-hour for international or technical contexts.
  • DoSet min and max constraints when the context has a valid range, like business hours or event windows, so users cannot submit an out-of-bounds time.
  • DoProvide a description or placeholder that hints at the expected format or purpose, like "Business hours: 9 AM – 5 PM".
  • DoUse the status prop to surface validation errors inline: show a message like "Time must be during business hours" so users know exactly what to fix.