Input Time

A structured time input component for entering hours, minutes, and optionally seconds. Supports 12h and 24h formats with an optional AM/PM toggle. Cross-platform (web and React Native).

Installation

npm install @xsolla/xui-input-time
# or
yarn add @xsolla/xui-input-time

Demo

Basic Usage

import * as React from 'react';
import { InputTime } from '@xsolla/xui-input-time';
import type { TimeValue } from '@xsolla/xui-input-time';

export default function BasicTime() {
  const [value, setValue] = React.useState<TimeValue | null>(null);

  return <InputTime value={value} onChange={setValue} />;
}

With Seconds

import * as React from 'react';
import { InputTime } from '@xsolla/xui-input-time';
import type { TimeValue } from '@xsolla/xui-input-time';

export default function WithSeconds() {
  const [value, setValue] = React.useState<TimeValue | null>(null);

  return <InputTime value={value} onChange={setValue} showSeconds />;
}

12-Hour Format with AM/PM

import * as React from 'react';
import { InputTime } from '@xsolla/xui-input-time';
import type { TimeValue } from '@xsolla/xui-input-time';

export default function TwelveHour() {
  const [value, setValue] = React.useState<TimeValue | null>({
    hours: 3,
    minutes: 30,
    period: 'pm',
  });

  return (
    <InputTime
      value={value}
      onChange={setValue}
      hourCycle={12}
      showPeriod
    />
  );
}

Custom Icon

A Clock icon is displayed by default. Pass a custom icon via the icon prop, or set icon={null} to hide it.

import * as React from 'react';
import { InputTime } from '@xsolla/xui-input-time';
import { Clock } from '@xsolla/xui-icons-base';
import type { TimeValue } from '@xsolla/xui-input-time';

export default function CustomIcon() {
  const [value, setValue] = React.useState<TimeValue | null>(null);

  return (
    <InputTime
      value={value}
      onChange={setValue}
      icon={<Clock variant="solid" />}
    />
  );
}

Different Sizes

import * as React from 'react';
import { InputTime } from '@xsolla/xui-input-time';

export default function Sizes() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
      <InputTime size="xl" />
      <InputTime size="lg" />
      <InputTime size="md" />
      <InputTime size="sm" />
      <InputTime size="xs" />
    </div>
  );
}

API Reference

InputTime

InputTimeProps:

| Prop | Type | Default | Description | | :--- | :--- | :------ | :---------- | | value | TimeValue \| null | - | Current time value. | | onChange | (value: TimeValue \| null) => void | - | Time change callback. | | showSeconds | boolean | false | Show seconds segment (HH:MM:SS). | | showPeriod | boolean | false | Show AM/PM toggle. | | hourCycle | 12 \| 24 | 24 | Hour format (12h or 24h). | | icon | ReactNode | <Clock /> | Icon displayed on the left. Set to null to hide. | | size | "xl" \| "lg" \| "md" \| "sm" \| "xs" | "md" | Input size variant. | | disabled | boolean | false | Disable the input. | | error | string | - | Error message (shows error state). | | aria-label | string | "Time input" | Accessible label. | | testID | string | - | Test identifier. |

TimeValue

| Property | Type | Description | | :--- | :--- | :---------- | | hours | number | Hours (0-23 for 24h, 1-12 for 12h). | | minutes | number | Minutes (0-59). | | seconds | number (optional) | Seconds (0-59). Present when showSeconds is true. | | period | "am" \| "pm" (optional) | Time period. Present when showPeriod is true. |

Keyboard Navigation

| Key | Action | | :--- | :--- | | 0-9 | Type digit. Auto-advances to next segment after 2 digits. | | Tab | Move to next segment. | | Shift+Tab | Move to previous segment. | | ArrowUp | Increment focused segment by 1. | | ArrowDown | Decrement focused segment by 1. | | ArrowRight | Move to next segment. | | ArrowLeft | Move to previous segment. | | Backspace | Clear segment and move back. |

Validation

Values are clamped to valid ranges automatically:

• Hours: 0-23 (24h) or 1-12 (12h)
• Minutes: 0-59
• Seconds: 0-59

Accessibility

• Each segment has an aria-label ("Hours", "Minutes", "Seconds")
• Error messages use role="alert"
• AM/PM toggle is a button with descriptive aria-label
• Segments are grouped with role="group"