Time input ✦Documentation has not yet been reviewed by a human.

Use InputTime for a time of day, such as a meeting start or office hours. The field provides hour and minute sections, with AM/PM in 12-hour locales. Enter digits or use the arrow keys to adjust each section.

The value is a 24-hour HH:mm string, or '' while the time is incomplete. Use defaultValue for an initial time, or pair value with onValueChange to control it. Add name to submit the value with a form.

The field

Focus a section and enter digits. The caret advances when the section is complete. For example, entering 9, 3, and 0 produces 09:30. In a 12-hour field, entering 18 sets 6 PM. The period section accepts its localized text or a and p.

Use the keyboard to adjust or move between sections:

• ↑ and ↓ step the value, wrapping at its limits.
• ← and → move between sections at the caret boundary.
• PageUp and PageDown make larger minute adjustments.
• Backspace in an empty section selects the previous section.

Home, End, selection, deletion, and paste keep their native text-field behavior. When one digit cannot grow into a valid two-digit value, the field confirms that section and advances. Entering 6 in minutes, for example, sets 06.

The field sizes to its content. Set width when it should fill its container. Use icon to replace the leading clock, or icon={false} to remove it.

<InputTime label="Start time" defaultValue="09:30" onValueChange={(_, { value }) => save(value)} />

Locale

Set locale to choose the clock format, section order, separator, and AM/PM text. For example, en-US uses a 12-hour clock and de-DE uses a 24-hour clock. Japanese can place the period first, and Finnish uses a dot separator. Pass hour12 or hour12={false} to override the locale’s clock format.

The period section reserves enough space for either label, so switching AM/PM does not change the field’s width.

<InputTime label="US English" locale="en-US" defaultValue="14:05" />   {/* 12-hour: 02 : 05 PM */}
<InputTime label="German"     locale="de-DE" defaultValue="14:05" />   {/* 24-hour: 14 : 05 */}
<InputTime label="Japanese"   locale="ja-JP" hour12 defaultValue="14:05" />  {/* 午後 02:05 — period first */}
<InputTime label="Force 24h"  hour12={false} defaultValue="14:05" />

Size, status, and clearing

size (small / medium / large) matches the other inputs’ scale; status recolors the box and hint (only critical marks it invalid); clearable adds a clear button once a value is set — clearing empties every section back to the placeholder dashes. disabled prevents focus and editing. readOnly keeps the time selectable and focusable while preventing edits.

min and max (24-hour "HH:mm") bound the value: a complete time outside the range is clamped to the nearest bound as you step or leave the field, and flags rangeUnderflow / rangeOverflow for form validity in the meantime.

<InputTime label="Meeting" size="small" defaultValue="10:00" clearable />
<InputTime label="Deadline" status="critical" hint="Pick a time in the future." />
<InputTime label="Office hours" size="large" min="09:00" max="17:00" defaultValue="09:30" />

Controlled values and clearing

Update value from onValueChange to control the time. An incomplete time reports an empty string while the native segments retain the text being edited. Call preventDefault() in onClearClick to keep a value when clearing is disallowed.

const [value, setValue] = useState('09:30')
const [keep, setKeep] = useState(false)

<InputTime label="Meeting" locale="en-US" value={value} clearable
  onValueChange={(_, attrs) => setValue(attrs.value)}
  onClearClick={event => { if (keep) event.preventDefault() }} />
<Checkbox checked={keep} onStateChange={(_, { next }) => setKeep(next === true)}>
  Keep the value when clearing
</Checkbox>
<Tag>{value || 'Incomplete time'}</Tag>

<a-input-time name="start-time" defaultvalue="09:30">
  <span slot="label">Start time</span>
  <a-icon slot="leading" shape="clock" aria-hidden="true"></a-icon>
</a-input-time>

<input data-anta type="time" name="reminder-at" value="09:00">

Styling

/* Make one field fill its container (the default is content-width). Style all
   editable segments, then keep AM/PM and the locale separator quieter. */
.my-time { width: 100%; }
.my-time::part(segments) { color: #e5484d; }
.my-time::part(period) { color: var(--text-3); }
.my-time::part(literal) { color: var(--text-4); }

<InputTime icon={false} className="plain-time" defaultValue="09:30" />

<style>{`
  .plain-time::part(segments) {
    font-family: var(--monospace, ui-monospace, monospace);
    line-height: 1em;
    padding-top: 2px;
  }
`}</style>

<InputTime label="Accent" tone="#7c3aed" defaultValue="09:30" />