Components
TimeField
A time input that accepts typing and offers a scroll-wheel picker.
Web-only — the native half lives in time-field.native.tsx and uses the platform picker instead.
It matches Field in height and label treatment so a time sits in a form
grid beside text inputs. minimumTime does not clamp the value; it marks a
time earlier than the minimum as next-day, which is what a shift or booking
range actually needs.
function Controlled({ initial, ...props }: { initial: Date } & Omit<React.ComponentProps<typeof TimeField>, 'value' | 'onChange'>) {
const [value, setValue] = React.useState(initial);
return <TimeField {...props} value={value} onChange={setValue} />;
}
<View style={{ maxWidth: 320 }}>
<Controlled {...args} initial={at(9, 30)} />
</View>Import
import { TimeField } from '@simal/ui/nativewindui';Props
| Prop | Values | Default | Description |
|---|---|---|---|
label | — | "Start time" | Sits above the trigger. Optional — omit it and the trigger stands alone. |
error | — | — | Any non-empty string turns the label red and renders the message below. |
minimumTime | — | — | A time earlier than this is treated as the following day and annotated as such, rather than being rejected. Use it for an end time that may cross midnight. |
value | — | — | Controlled, and a real Date — only the time part is read. |
onChange | — | — | Required. Receives a new Date with the chosen time. |
Examples
Start And End
A start and end pair is the usual shape, and the reason minimumTime exists.
function Controlled({ initial, ...props }: { initial: Date } & Omit<React.ComponentProps<typeof TimeField>, 'value' | 'onChange'>) {
const [value, setValue] = React.useState(initial);
return <TimeField {...props} value={value} onChange={setValue} />;
}
<View className="flex-row gap-5" style={{ maxWidth: 640 }}>
<Controlled label="Start time" initial={at(9, 0)} />
<Controlled label="End time" initial={at(17, 30)} minimumTime={at(9, 0)} />
</View>Crosses Midnight
An end time before the start reads as next-day rather than as an error.
function Controlled({ initial, ...props }: { initial: Date } & Omit<React.ComponentProps<typeof TimeField>, 'value' | 'onChange'>) {
const [value, setValue] = React.useState(initial);
return <TimeField {...props} value={value} onChange={setValue} />;
}
<View className="flex-row gap-5" style={{ maxWidth: 640 }}>
<Controlled label="Shift starts" initial={at(22, 0)} />
<Controlled label="Shift ends" initial={at(6, 0)} minimumTime={at(22, 0)} />
</View>With Error
function Controlled({ initial, ...props }: { initial: Date } & Omit<React.ComponentProps<typeof TimeField>, 'value' | 'onChange'>) {
const [value, setValue] = React.useState(initial);
return <TimeField {...props} value={value} onChange={setValue} />;
}
<View style={{ maxWidth: 320 }}>
<Controlled label="Start time" initial={at(9, 30)} error="Outside opening hours." />
</View>