본문으로 건너뛰기

날짜와 시간

TimePicker

15분 단위 목록에서 시각을 선택.

라이브러리 전용

개요

미리보기

예시 언어동작 줄이기

회의 시각15-minute steps

label

hint

error

requireddisabled

defaultValue

interval

range

variant

name

이렇게 · 이렇게 하지 않기

이렇게 대략적인 시각을 빠르게 고를 때 쓴다.
이렇게 하지 않기 스크롤 휠만으로 고르게 하지 말고 키보드 입력도 허용한다.
이렇게 목록 간격을 라벨에 밝힌다.

토큰과 속성

이름	타입	기본값	설명
`label`	`ReactNode`	`회의 시각`	항상 보이는 라벨(<label for> 또는 <legend>). placeholder로 대신하지 않는다.
`hint?`	`ReactNode`		상시 도움말. FieldMessage로 그리고 aria-describedby의 첫 번째로 연결한다. 비우면 없음.
`error?`	`ReactNode`		오류 문장. 있으면 aria-invalid="true". 오류 노드는 항상 마운트되어 있고 내용만 바뀐다.
`required?`	`boolean`	`false`	required 속성과 함께 라벨 옆에 “필수” 텍스트를 보인다(별표만 쓰지 않음).
`disabled?`	`boolean`	`false`	Tab에서 빠지고 제출되지 않는다. 값을 보여 줘야 하면 readOnly를 쓴다.
`defaultValue?`	`string`		비제어 초기 시각(HH:mm). 간격에 맞지 않으면 선택 없음.
`interval?`	`15 \| 30`	`15`	목록 간격(분). 라벨 옆에 “15분 단위”를 자동으로 붙인다.
`range?`	`'work' \| 'all'`	`work`	work = 09:00–18:00, all = 하루 전체.
`variant?`	`'select' \| 'list'`	`select`	select는 네이티브 <select>, list는 라디오 칸(짧은 범위만). 스크롤 휠은 없다.
`name?`	`string`		폼 이름. 제출 값은 HH:mm.
`onValueChange(value: string)`	—	—	HH:mm으로 부른다.
`TimeInput`	—	—	휠을 뺐으니 TimeInput variant="list"로 합칠 수 있다(계약 제안, 미결).
그 밖의 속성	—	—	autoFocus, onBlur, aria-* 등은 <select>로 간다(list는 각 라디오).