Components

TimeField

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

Storybook: Storybook
Source: Source

Installation

Package: @bigbang/ui
Import: import { TimeField } from '@bigbang/ui';
Source: TimeField.tsx
Storybook: TimeField · Playground

TimeField is in the @bigbang/ui package.

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

<TimeField label="Time" name="at" value={time} onValueChange={setTime} min={parseTime('08:00')} />;

Props

labelRequired

Description: The visible label; it names the time segments.
Type: string

description

Description: Help text under the field, linked with aria-describedby.
Type: ReactNode

error

Description: When set, the field is invalid and the message is read with it. Times outside min and max get a built-in message without it.
Type: string

invalid

Description: Marks the field invalid without a message.
Type: boolean
Default: false

required

Description: The time is required: the label is marked and the segments report aria-required.
Type: boolean
Default: false

value

Description: Time when you control it, or null while empty. Pass it with onValueChange. Times are Time from @internationalized/date.
Type: Time | null

defaultValue

Description: Initial time when the field is uncontrolled.
Type: Time

onValueChange

Description: Called with the time once every segment is set, or with null when the user clears one.
Type: (value: Time | null) => void

withSeconds

Description: Adds a seconds segment.
Type: boolean
Default: false

min

Description: Earliest time; an earlier typed time shows a message.
Type: Time

max

Description: Latest time; a later typed time shows a message.
Type: Time

size

Description: Field height: 32, 36 and 40 px.
Type: 'sm' | 'md' | 'lg'
Default: 'md'

readOnly

Description: The time can be read but not changed.
Type: boolean
Default: false

disabled

Description: Disables the segments and the label.
Type: boolean
Default: false

name

Description: Field name; the form receives the time as HH:MM (or HH:MM:SS with seconds).
Type: string

className

Description: Added to the root element; use it for layout only.
Type: string

Data attributes

data-component="time-field": on the root element.
data-part: label, box, segments, description, error.
On a segment: data-segment (hour, minute, second) and data-placeholder while empty.