TimeField

Types a time of day segment by segment.

Opening time

0930

TimeField.tsx

import {TimeField} from 'alinea/components'

export function TimeFieldExample() {
  return (
    <TimeField
      label="Opening time"
      defaultValue="09:30"
      hourCycle={24}
      style={{width: 180}}
    />
  )
}

Value

The value is an ISO time string: 14:30, or 14:30:15 with granularity="second". With a name the field submits the same string in a form, like a native time input, and an empty string when no time is set. hourCycle only changes how the time is shown.

Props

PropTypeDefaultDescription

localestring; /** The time, `HH:mm` or `HH:mm:ss` */ value?: string | null; defaultValue?: string | null; /** Receives `HH:mm`, or `HH:mm:ss` when granularity is `second` */ onValueChange?: (value: string | null) => void; /** The earliest valid time, `HH:mm` or `HH:mm:ss` */ min?: string; /** The latest valid time, `HH:mm` or `HH:mm:ss` */ max?: string; /** The smallest unit that can be edited, defaults to `minute` */ granularity?: 'minute' | 'second'; /** Defaults to the locale's hour cycle */ hourCycle?: 12 | 24Default –BCP 47 locale used to format dates, eg. en-GB, defaults to the user's locale

namestringDefault –Name of the hidden form input, which submits the time like a native time input: HH:mm, or HH:mm:ss when granularity is second, and an empty string when no time is set

autoFocusbooleanDefault –

labelReactNodeDefault –

descriptionReactNodeDefault –

errorReactNodeDefault –

requiredbooleanDefault –

disabledbooleanDefault –

readOnlybooleanDefault –

iconIconType | ReactElementDefault –

sharedbooleanDefault –Marks the field as shared between translations

Also accepts className and style, id and aria-* labelling attributes and data-* attributes.