ChoisSTANDARD UI컴포넌트 검색 /

Forms

Time Input

semantic HTML

지역 형식에 맞는 시간 값을 입력합니다.

stablefreeSince 0.3

Live example

09:30
<label id="meeting-time-label">Meeting time</label><div data-standard-component="time-input" label="Meeting time" value="09:30" min="08:00" max="18:00" step="900" aria-labelledby="meeting-time-label"><label>Meeting time<input type="time" value="09:30"></label></div><output data-example-output>09:30</output>

Variants and sizes

The pattern inherits theme and density tokens. Use compact, comfortable, or roomy density when the surrounding screen requires it.

compactcomfortableroomy

Public API

ContractValue
Implementationsemantic HTML
Statusstable
Licensefree
Since0.3
HTML contractNative HTML elements and attributes
EventsNative browser events

Accessibility

label과 시간 범위 validity를 유지하고 폼 reset, 상태 복원, disabled fieldset에 반응합니다.

Server template guidance

<!-- Render the semantic HTML on the server. Load enhancement JavaScript only when this interaction is needed. -->