Time Input
Material Design 3 time selection component with segmented input and picker
Time Input
Time Input provides an intuitive way to select time values with separate hour, minute, and optional second fields, along with AM/PM selection.
Basic Usage
Basic Time Input
:
html
<div class="time-input">
<input type="text" name="hours" aria-label="Hours" class="time-input-segment" placeholder="HH" maxlength="2" />
<span class="time-input-separator">:</span>
<input type="text" name="minutes" aria-label="Minutes" class="time-input-segment" placeholder="MM" maxlength="2" />
</div>With Seconds
Time Input with Seconds
:
:
html
<div class="time-input time-input-seconds">
<input type="text" name="hours" aria-label="Hours" class="time-input-segment" placeholder="HH" maxlength="2" />
<span class="time-input-separator">:</span>
<input type="text" name="minutes" aria-label="Minutes" class="time-input-segment" placeholder="MM" maxlength="2" />
<span class="time-input-separator">:</span>
<input type="text" name="seconds" aria-label="Seconds" class="time-input-segment" placeholder="SS" maxlength="2" />
</div>12-Hour Format with AM/PM
12-Hour Format
:
html
<div class="time-input time-input-12h">
<input type="text" name="hours" aria-label="Hours" class="time-input-segment" placeholder="HH" maxlength="2" value="09" />
<span class="time-input-separator">:</span>
<input type="text" name="minutes" aria-label="Minutes" class="time-input-segment" placeholder="MM" maxlength="2" value="30" />
<div class="time-input-period">
<button class="time-input-period-btn time-input-period-btn-active">AM</button>
<button class="time-input-period-btn">PM</button>
</div>
</div>Variants
Outlined (Default)
Outlined Time Input
:
html
<div class="time-input time-input-outlined">
<input type="text" name="hours" aria-label="Hours" class="time-input-segment" placeholder="HH" maxlength="2" />
<span class="time-input-separator">:</span>
<input type="text" name="minutes" aria-label="Minutes" class="time-input-segment" placeholder="MM" maxlength="2" />
</div>Filled
Filled Time Input
:
html
<div class="time-input time-input-filled">
<input type="text" name="hours" aria-label="Hours" class="time-input-segment" placeholder="HH" maxlength="2" />
<span class="time-input-separator">:</span>
<input type="text" name="minutes" aria-label="Minutes" class="time-input-segment" placeholder="MM" maxlength="2" />
</div>Sizes
Small
Small Time Input
:
html
<div class="time-input time-input-sm">
<input type="text" name="hours" aria-label="Hours" class="time-input-segment" placeholder="HH" maxlength="2" />
<span class="time-input-separator">:</span>
<input type="text" name="minutes" aria-label="Minutes" class="time-input-segment" placeholder="MM" maxlength="2" />
</div>Large
Large Time Input
:
html
<div class="time-input time-input-lg">
<input type="text" name="hours" aria-label="Hours" class="time-input-segment" placeholder="HH" maxlength="2" />
<span class="time-input-separator">:</span>
<input type="text" name="minutes" aria-label="Minutes" class="time-input-segment" placeholder="MM" maxlength="2" />
</div>With Time Picker Dropdown
Time Input with Picker
:
Hour
Minute
html
<div class="time-input-wrapper">
<div class="time-input time-input-with-picker">
<input type="text" name="hours" aria-label="Hours" class="time-input-segment" placeholder="HH" maxlength="2" value="14" />
<span class="time-input-separator">:</span>
<input type="text" name="minutes" aria-label="Minutes" class="time-input-segment" placeholder="MM" maxlength="2" value="30" />
<button class="time-input-picker-trigger" aria-label="Open time picker">
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</button>
</div>
<!-- Time Picker Dropdown (shown when open) -->
<div class="time-input-picker time-input-picker-open">
<div class="time-input-picker-column">
<div class="time-input-picker-label">Hour</div>
<div class="time-input-picker-options">
<button class="time-input-picker-option">12</button>
<button class="time-input-picker-option">13</button>
<button class="time-input-picker-option time-input-picker-option-selected">14</button>
<button class="time-input-picker-option">15</button>
<button class="time-input-picker-option">16</button>
</div>
</div>
<div class="time-input-picker-column">
<div class="time-input-picker-label">Minute</div>
<div class="time-input-picker-options">
<button class="time-input-picker-option">00</button>
<button class="time-input-picker-option">15</button>
<button class="time-input-picker-option time-input-picker-option-selected">30</button>
<button class="time-input-picker-option">45</button>
</div>
</div>
</div>
</div>States
Focused
Focused State
:
html
<div class="time-input time-input-focused">
<input type="text" name="hours" aria-label="Hours" class="time-input-segment" placeholder="HH" maxlength="2" value="10" />
<span class="time-input-separator">:</span>
<input type="text" name="minutes" aria-label="Minutes" class="time-input-segment time-input-segment-focused" placeholder="MM" maxlength="2" />
</div>Error State
Error State
Start Time
:
Invalid hour value
html
<div class="form-group">
<span class="form-label">Start Time</span>
<div class="time-input time-input-error">
<input type="text" name="hours" aria-label="Hours" class="time-input-segment" placeholder="HH" maxlength="2" value="25" />
<span class="time-input-separator">:</span>
<input type="text" name="minutes" aria-label="Minutes" class="time-input-segment" placeholder="MM" maxlength="2" value="00" />
</div>
<span class="helper-text helper-text-error">Invalid hour value</span>
</div>Disabled
Disabled State
:
html
<div class="time-input time-input-disabled">
<input type="text" name="hours" aria-label="Hours" class="time-input-segment" placeholder="HH" maxlength="2" disabled />
<span class="time-input-separator">:</span>
<input type="text" name="minutes" aria-label="Minutes" class="time-input-segment" placeholder="MM" maxlength="2" disabled />
</div>Read Only
Read Only State
:
html
<div class="time-input time-input-readonly">
<input type="text" name="hours" aria-label="Hours" class="time-input-segment" value="09" maxlength="2" readonly />
<span class="time-input-separator">:</span>
<input type="text" name="minutes" aria-label="Minutes" class="time-input-segment" value="30" maxlength="2" readonly />
</div>Time Range
Time Range Selection
:
to
:
html
<div class="time-input-range">
<div class="time-input">
<input type="text" name="hours" aria-label="Hours" class="time-input-segment" placeholder="HH" maxlength="2" value="09" />
<span class="time-input-separator">:</span>
<input type="text" name="minutes" aria-label="Minutes" class="time-input-segment" placeholder="MM" maxlength="2" value="00" />
</div>
<span class="time-input-range-separator">to</span>
<div class="time-input">
<input type="text" name="hours" aria-label="Hours" class="time-input-segment" placeholder="HH" maxlength="2" value="17" />
<span class="time-input-separator">:</span>
<input type="text" name="minutes" aria-label="Minutes" class="time-input-segment" placeholder="MM" maxlength="2" value="00" />
</div>
</div>With Label and Helper
Complete Time Input Form
Meeting Time
:
Select the time for your meeting
html
<div class="form-group">
<span class="form-label form-label-required">Meeting Time</span>
<div class="time-input time-input-12h">
<input type="text" name="hours" aria-label="Hours" class="time-input-segment" placeholder="HH" maxlength="2" />
<span class="time-input-separator">:</span>
<input type="text" name="minutes" aria-label="Minutes" class="time-input-segment" placeholder="MM" maxlength="2" />
<div class="time-input-period">
<button class="time-input-period-btn time-input-period-btn-active">AM</button>
<button class="time-input-period-btn">PM</button>
</div>
</div>
<span class="helper-text">Select the time for your meeting</span>
</div>API Reference
Class Names
| Class | Description |
|---|---|
.time-input |
Base container (required) |
.time-input-segment |
Individual time segment input |
.time-input-separator |
Colon separator |
.time-input-seconds |
Include seconds field |
.time-input-12h |
12-hour format with AM/PM |
.time-input-period |
AM/PM toggle container |
.time-input-period-btn |
AM/PM button |
.time-input-period-btn-active |
Active period button |
.time-input-outlined |
Outlined variant |
.time-input-filled |
Filled variant |
.time-input-sm |
Small size |
.time-input-lg |
Large size |
.time-input-wrapper |
Wrapper for picker dropdown |
.time-input-with-picker |
Input with picker trigger |
.time-input-picker-trigger |
Picker open button |
.time-input-picker |
Picker dropdown container |
.time-input-picker-open |
Open picker state |
.time-input-picker-column |
Picker column |
.time-input-picker-label |
Column label |
.time-input-picker-options |
Options container |
.time-input-picker-option |
Individual time option |
.time-input-picker-option-selected |
Selected option |
.time-input-focused |
Focused state |
.time-input-segment-focused |
Focused segment |
.time-input-error |
Error state |
.time-input-disabled |
Disabled state |
.time-input-readonly |
Read-only state |
.time-input-range |
Time range container |
.time-input-range-separator |
Range separator text |
Color Variants
Color Variants
:
:
:
:
:
:
:
html
<div class="time-input time-input-primary">
<input name="hours" aria-label="Hours" class="time-input-field" type="text" placeholder="HH" maxlength="2" />
<span class="time-input-separator">:</span>
<input name="minutes" aria-label="Minutes" class="time-input-field" type="text" placeholder="MM" maxlength="2" />
</div>
<div class="time-input time-input-secondary">
<input name="hours" aria-label="Hours" class="time-input-field" type="text" placeholder="HH" maxlength="2" />
<span class="time-input-separator">:</span>
<input name="minutes" aria-label="Minutes" class="time-input-field" type="text" placeholder="MM" maxlength="2" />
</div>
<div class="time-input time-input-tertiary">
<input name="hours" aria-label="Hours" class="time-input-field" type="text" placeholder="HH" maxlength="2" />
<span class="time-input-separator">:</span>
<input name="minutes" aria-label="Minutes" class="time-input-field" type="text" placeholder="MM" maxlength="2" />
</div>
<div class="time-input time-input-info">
<input name="hours" aria-label="Hours" class="time-input-field" type="text" placeholder="HH" maxlength="2" />
<span class="time-input-separator">:</span>
<input name="minutes" aria-label="Minutes" class="time-input-field" type="text" placeholder="MM" maxlength="2" />
</div>
<div class="time-input time-input-success">
<input name="hours" aria-label="Hours" class="time-input-field" type="text" placeholder="HH" maxlength="2" />
<span class="time-input-separator">:</span>
<input name="minutes" aria-label="Minutes" class="time-input-field" type="text" placeholder="MM" maxlength="2" />
</div>
<div class="time-input time-input-warning">
<input name="hours" aria-label="Hours" class="time-input-field" type="text" placeholder="HH" maxlength="2" />
<span class="time-input-separator">:</span>
<input name="minutes" aria-label="Minutes" class="time-input-field" type="text" placeholder="MM" maxlength="2" />
</div>
<div class="time-input time-input-error">
<input name="hours" aria-label="Hours" class="time-input-field" type="text" placeholder="HH" maxlength="2" />
<span class="time-input-separator">:</span>
<input name="minutes" aria-label="Minutes" class="time-input-field" type="text" placeholder="MM" maxlength="2" />
</div>Ghost Variant
Ghost Time Input
:
html
<div class="time-input time-input-ghost">
<input name="hours" aria-label="Hours" class="time-input-field" type="text" placeholder="HH" maxlength="2" />
<span class="time-input-separator">:</span>
<input name="minutes" aria-label="Minutes" class="time-input-field" type="text" placeholder="MM" maxlength="2" />
</div>Related Components
- Datepicker - Date selection
- Input - Text inputs
- Form Group - Form layouts