components
InputTime
InputTime provides a searchable time picker dropdown. The user can type to filter time options or scroll through the list. Time values are strings in HH:MM format. The increment prop controls the interval between options (e.g. 15 for 15-minute intervals). Use isFreeform to allow the user to type arbitrary time values not in the predefined list.
Import
import { InputTime } from "@skedulo/breeze-ui-react";Usage Guidance
When to use
- +Select a time value from predefined increments.
- +Form fields requiring time of day input.
When not to use
- −For full date selection — use InputDate.
- −For free-form time text — use InputText with validation.
Examples
Code Samples
Basic InputTime
A time picker with 30-minute intervals.
import { InputTime } from "@skedulo/breeze-ui-react";
export default function BasicInputTime() {
return <InputTime value="09:00" label="Start Time" />;
}Guidelines
Do
- ✓Set increment to match business needs (15, 30, 60 min).
- ✓Use isFreeform when users need to type exact times.
Don't
- ✗Don't use very small increments (1 min) unless precision is critical.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| value | string | — | Current time value in HH:MM format (e.g. "09:30"). |
| onChange | (e: TextChangeEvent) => void | — | Fires when the time value changes. |
| label | ReactNode | — | Field label rendered above or beside the input. |
| error | ReactNode | — | Error message shown below the input. |
| increment | number | 30 | Interval in minutes between time options. |
| placeholder | string | — | Placeholder text when no value is set. |
| disabled | boolean | false | Disables the input. |
| invalid | boolean | false | Applies error styling to the input. |
| required | boolean | false | Marks the field as required. |
| isFreeform | boolean | false | Allow typing arbitrary time values not in the option list. |