Time Field

​

Examples

NeoTimeField(
  time: selectedTime.value, // Using hooks
  onSubmitted: (value) {
    selectedTime.value = value;
  },
),

NeoTimeField(
  time: selectedTime.value, // Using hooks
  label: "Start Time",
  onSubmitted: (value) {
    selectedTime.value = value;
  },
),

NeoTimeField(
  time: selectedTime.value, // Using hooks
  label: "Meeting Time",
  description: "Enter meeting time",
  onSubmitted: (value) {
    selectedTime.value = value;
  },
),

NeoTimeField(
  time: selectedTime.value, // Using hooks
  label: "Time",
  errorText: "This field is required",
  onSubmitted: (value) {
    selectedTime.value = value;
  },
),

NeoTimeField(
  time: selectedTime.value, // Using hooks
  label: "Time",
  description: "Select meeting time",
  isEnabled: false,
  onSubmitted: (value) {
    // Won't be called when disabled
  },
),

​

Properties

​

Required

​

Content

​

State

​

Input Behavior

​

Value Clamping

• Typing: Hours clamped to 0-23, minutes to 0-59
• Arrow keys: Context-aware clamping with the same ranges
• Validation: Automatic normalization ensures valid time values

​

Auto-Advance

• Hour: Advances when typing ≥ 3 (e.g., “3” becomes “03” and advances)
• Minute: Submits when 2 digits entered and hour is filled

​

Navigation

• Arrow keys: Move between segments or increment/decrement values (↑/↓ by 1, ←/→ between segments)
• Tab: Standard focus navigation with Shift+Tab for reverse
• Click: Jump to any segment and select all content
• Enter: Submit the current time value

​

Best Practices

• Check business rules, such as opening hours, in onSubmitted.
• Clear errorText and write the value back to time in onSubmitted.

​

Behavior

• The field needs a bounded width.
• Enter and a completed minute call onSubmitted. Losing focus calls onBlur, not onSubmitted.