Skip to content
BigBang

Popular

    ↑↓Navigate↵OpenEscClose
    TR

    Components

    TimeField

    A 24-hour time field typed into hour and minute (and optional second) segments.

    Storybook
    Storybook
    Source
    Source

    The example below loads live from Storybook; open it there to use the controls.

    Live example, StorybookOpen in Storybook

    Default

    Section titled “Default”

    Hour and minute in 24-hour format. The clock icon is decoration only.

    HHMM

    Type the time in 24-hour format.

    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>
      );
    }

    States

    Section titled “States”

    Filled, with seconds, required with an error, out of range (built-in message), read-only and disabled.

    0930
    093015
    HHMM
    Enter a time.
    0715
    Enter a time from 08:00 to 18:00
    0930
    0930
    import { Provider, TimeField, parseTime } from '@bigbang/ui';
    

    export default function States() {
      return (
        <Provider locale="en-GB">
          <div className="flex max-w-xs flex-col gap-lg">
            <TimeField label="Time" defaultValue={parseTime('09:30')} />
            <TimeField label="Time" defaultValue={parseTime('09:30:15')} withSeconds />
            <TimeField label="Time" error="Enter a time." required />
            <TimeField label="Time" defaultValue={parseTime('07:15')} min={parseTime('08:00')} max={parseTime('18:00')} />
            <TimeField label="Time" defaultValue={parseTime('09:30')} readOnly />
            <TimeField label="Time" defaultValue={parseTime('09:30')} disabled />
          </div>
        </Provider>
      );
    }

    Controlled

    Section titled “Controlled”

    The value is a Time or null; the form receives HH:MM.

    1400
    14:00:00
    import { Provider, TimeField, parseTime, type Time } from '@bigbang/ui';
    import { useState } from 'react';
    

    export default function Controlled() {
      const [value, setValue] = useState<Time | null>(() => parseTime('14:00'));
      return (
        <Provider locale="en-GB">
          <div className="flex max-w-xs flex-col gap-sm">
            <TimeField label="Time" value={value} onValueChange={setValue} />
            <output className="type-body-sm text-fg-subtle tabular-nums">{value?.toString() ?? '—'}</output>
          </div>
        </Provider>
      );
    }

    Light and dark mode

    Section titled “Light and dark mode”

    The focused segment takes the primary fill.

    0930
    093015
    HHMM
    Enter a time.
    0715
    Enter a time from 08:00 to 18:00
    0930
    0930
    0930
    093015
    HHMM
    Enter a time.
    0715
    Enter a time from 08:00 to 18:00
    0930
    0930
    import { Provider, TimeField, parseTime } from '@bigbang/ui';
    

    export default function States() {
      return (
        <Provider locale="en-GB">
          <div className="flex max-w-xs flex-col gap-lg">
            <TimeField label="Time" defaultValue={parseTime('09:30')} />
            <TimeField label="Time" defaultValue={parseTime('09:30:15')} withSeconds />
            <TimeField label="Time" error="Enter a time." required />
            <TimeField label="Time" defaultValue={parseTime('07:15')} min={parseTime('08:00')} max={parseTime('18:00')} />
            <TimeField label="Time" defaultValue={parseTime('09:30')} readOnly />
            <TimeField label="Time" defaultValue={parseTime('09:30')} disabled />
          </div>
        </Provider>
      );
    }