TimeField

When to use

TimeField is for a time in a form: a start time, a reminder time, working hours.

When not to use

• For a date: use DatePicker.
• For a few fixed options: if times are limited to 30-minute steps, Select is faster.
• For a duration: “45 minutes” is a duration, not a time; use NumberField with a unit.

Anatomy

Time

HH:MM

Type the time in 24-hour format.

LightDark

Copy code

import { Provider, TimeField } from '@bigbang/ui';

export default function Default() {
  return (
    <Provider locale="en-GB">
      <TimeField label="Time" description="Type the time in 24-hour format." className="max-w-xs" />
    </Provider>
  );
}

1. Label: Names the group of segments.
2. Clock icon: Decoration; not read.
3. Segments: Hour, minute and optional second.
4. Description and error: Under the field.

Behaviour

• Typing digits fills a segment; focus moves on when it is full or no further digit fits (typing “9” sets the hour to 09 and moves to minutes).
• Arrows step a segment up and down, wrapping from 23 to 00.
• A time outside min or max shows a built-in message.
• The time is always in 24-hour format, as Turkish and British English write it.

Guidelines

• Where the time zone matters, state it in the description; TimeField carries no time zone.
• Turn on seconds only when they are really needed.

Content

Turkish	English
SS / DD / SN	HH / MM / SS
{min} ile {max} arasında bir saat girin	Enter a time from {min} to {max}

Related components

• DatePicker: A date.
• NumberField: Durations and numbers.