Forms

TimeRange

A start and an end time for one thing, such as a workday: "Monday 9:00 AM to 5:00 PM 8 hours".

Preview

Live, in this page’s themeOpen on its own

Props

Prop	Type	Description
`label`Required	`string`
`value`	`{ start: string; end: string }`
`onChange`	`(value: { start: string; end: string }) => void`
`startLabel`	`string`	Names for the two fields. Default "<label> starts" and "<label> ends".
`endLabel`	`string`
`detail`	`React.ReactNode`	A short note after the fields, such as "8 hours".
`help`	`React.ReactNode`
`invalid`	`boolean`
`disabled`	`boolean`
`step`	`number`
`size`	`'M' \| 'L'`
`className`	`string`

Guidelines

A start and an end time for one thing, such as a workday: "Monday 9:00 AM to 5:00 PM 8 hours". It is a fieldset named by label (the legend), with two TimeFields whose names default to "Monday starts" and "Monday ends".

Provide: label, value ({ start, end } as "HH:MM"), onChange(value), and optionally detail (a note after the fields, such as "8 hours"), help, invalid, size, startLabel, endLabel.

Settings, Week uses one per workday for work hours, or one "Every workday" row when the same hours apply to all of them.
Say how to fix a problem in help with invalid: "Ends before it starts. Pick a later end time."
The row wraps on narrow screens, so it works on phones without scrolling sideways.