TimePicker

오전 오후, 시, 분을 열에서 골라 시각을 정하는 컴포넌트예요. 일정 시작 시각, 알림 시각에 써요. 넓은 화면에서는 Popover, 좁은 화면에서는 BottomSheet로 열려요. 소요 시간처럼 시각이 아닌 값은 NumberField로 입력받아요.

사용 예시

시작 시각

항목을 누르는 즉시 값이 바뀌고 창은 열려 있어요. 바깥을 누르면 닫혀요.

시작 시각

회의 시작 10분 전에 알려요.

tsx

<Field className="w-48">  <FieldLabel>시작 시각</FieldLabel>  <TimePicker value={time} onValueChange={setTime} />  <FieldHelp>회의 시작 10분 전에 알려요.</FieldHelp></Field>

고르지 않은 상태

값이 null이면 placeholder가 보이고 열에 고른 항목이 없어요. 항목 하나를 고르면 나머지는 오전 9시 0분에서 시작해요.

알림 시각

tsx

<Field className="w-48">  <FieldLabel>알림 시각</FieldLabel>  <TimePicker value={alarm} onValueChange={setAlarm} placeholder="알림 시각을 고르세요" /></Field>

분 간격

예약처럼 단위가 정해진 시각은 step으로 분 열의 항목을 줄여요.

예약 시각

30분 단위로 예약해요.

tsx

<Field className="w-48">  <FieldLabel>예약 시각</FieldLabel>  <TimePicker value={booked} onValueChange={setBooked} step={30} />  <FieldHelp>30분 단위로 예약해요.</FieldHelp></Field>

오류

Field에 invalid를 주면 트리거에 빨간 링이 보이고 스크린 리더가 오류 상태를 읽어요.

종료 시각

종료 시각은 시작 시각 뒤여야 해요. 오전 9시 이후로 고르세요.

tsx

<Field invalid className="w-48">  <FieldLabel>종료 시각</FieldLabel>  <TimePicker defaultValue="08:00" />  <FieldError match>종료 시각은 시작 시각 뒤여야 해요. 오전 9시 이후로 고르세요.</FieldError></Field>

유형

surface

폼에서는 bare나 well, 표 셀과 헤더에서 값을 바로 고칠 때는 ghost를 써요.

tsx

<TimePicker surface="bare" defaultValue="14:30" aria-label="bare" /><TimePicker surface="well" defaultValue="14:30" aria-label="well" /><TimePicker surface="ghost" defaultValue="14:30" aria-label="ghost" />

size

함께 놓인 Input이나 DatePicker와 같은 크기를 써요.

tsx

<TimePicker size="sm" defaultValue="14:30" aria-label="sm" /><TimePicker size="md" defaultValue="14:30" aria-label="md" /><TimePicker size="lg" defaultValue="14:30" aria-label="lg" />

컨트롤

step

surface

size

disabled

값"14:30"

tsx

<TimePicker value={time} onValueChange={setTime} aria-label="시각" />

명세

이름
이름	값	기본
value	string \| null	-
고른 시각이에요. HH:mm 글자 값이고 고르지 않은 상태는 null이에요.
defaultValue	string \| null	null
처음에 고를 시각을 정해요.
onValueChange	(value: string) => void	-
오전 오후, 시, 분 중 하나를 고를 때마다 호출돼요.
step	number	1
분 열의 간격이에요. 간격에 안 맞는 지금 값은 함께 보여요.
placeholder	string	시각을 고르세요
고르지 않은 상태에 보여요.
title	string	시각 고르기
BottomSheet의 제목이고 Popover의 이름이에요.
surface	bare, well, ghost	bare
Input의 surface와 같아요.
size	sm, md, lg	md
높이가 32, 36, 40px이에요.
disabled	boolean	false
aria-label	string	-
Field 밖에서 쓸 때 이름을 정해요.
className	string	-
트리거에 적용돼요. 폭은 wrapper로 정해요.