TimeField

TimeField is a compound component for masked time entry.

Overview

TimeField inherits the TextField styling contract. Its distinct behavior is masking and parsing, not a separate visual surface.

Public CSS Variables

There are no dedicated public --time-field-* variables in the current implementation.

The component inherits the relevant TextField surface tokens:

Reminder

Variable	Value	Affects
field heightinherited wrapper/input		No visible change in this state
default surfaceinherited wrapper		No visible change in this state
focus outlineinherited wrapper		No visible change in this state
error outlineinherited wrapper		No visible change in this state

Edit a value to try it in the demo. Hover a variable to outline what it changes; switch the preview state to see hover, pressed, focus, disabled and invalid variables. Click a name to copy it.

Part-Level Variables

Root

The root is a TextField wrapper with time-specific context only.

Input

TimeFieldInput is a masked TextFieldInput and inherits its typography and spacing.

State And Variant Interaction

format changes input behavior, not visual styling
bounds and step affect masking logic, not the surface
error and disabled visuals come from the inherited field/input contract

Examples

Field sizes

size on the root sets the height, padding and font size of the inherited TextField surface: sm, md (default) or lg.

LTRRTL

field-sizes.tsx · 17 lines

import { TimeField, TimeFieldInput } from '@vega-ui/react';

export default function FieldSizes() {
  return (
    <div style={{ display: 'grid', gap: 'var(--spacing-8)', width: '100%', maxWidth: 200 }}>
      <TimeField size='sm' defaultValue='09:30'>
        <TimeFieldInput aria-label='Small time field' />
      </TimeField>
      <TimeField size='md' defaultValue='09:30'>
        <TimeFieldInput aria-label='Medium time field' />
      </TimeField>
      <TimeField size='lg' defaultValue='09:30'>

Do Not Override

treating format changes as a styling concern
documenting time-specific styling variables that do not exist in source