;
}
};
```tsx lines expandable theme={null}
import { TimeField } from "@servicetitan/anvil2";
function App() {
return (
{
console.log("Time changed:", change.time);
}}
/>
);
}
export default App;
```
## Common Examples
```tsx theme={null}
import { TimeField } from "@servicetitan/anvil2";
function ExampleComponent() {
return (
{
// change function
}}
/>
);
}
```
### With Suggestions Enabled (Default)
By default, time fields use a 12-hour format and present suggested times in a dropdown based on the `step` prop. The dropdown is only present if there is more than one valid option to select from. Whether the dropdown is present or not, the input allows typing in the field itself to get to your desired time.
There is autocomplete for best guess assumptions of the time you might be going for based on a partial input value. If both AM and PM times both are possible options, AM takes precedence over PM for autocomplete.
```tsx lines expandable theme={null}
import { TimeField } from "@servicetitan/anvil2";
function App() {
return (
{
console.log("Time changed:", change.time);
}}
/>
);
}
export default App;
```
### Without Suggestions
When `disableSuggestions` is set to true, the suggestions dropdown will no longer appear. All other features, including autocomplete, will continue to work as the user types.
```tsx lines expandable theme={null}
import { TimeField } from "@servicetitan/anvil2";
function App() {
return (
{
console.log("Time changed:", change.time);
}}
/>
);
}
export default App;
```
### Auto-Rounding
If the `autoround` prop is set to true, the time field will attempt to round to the next valid time on blur based on the `step` and `max` props. Note: rounding will always go to the future, never the past.
If suggestions are enabled, the suggestions will display the auto rounded options available, even if the time currently typed in the input is not yet rounded.
Add a `description` to allow users to know auto rounding is enabled for the field.
```tsx lines expandable theme={null}
import { TimeField } from "@servicetitan/anvil2";
function App() {
return (
{
console.log("Time changed:", change.time);
}}
/>
);
}
export default App;
```
### Min and Max Constraints
Use the `min` and `max` props to set a time frame constraint. When the props are present, a time outside the time frame can not be entered into the field.
Autocomplete will adjust to a time within the time frame if the partial value can fall within the constraint. For example, 02:-- will autocomplete to 02:00 PM for a 09:00 AM - 05:00 PM time frame instead of the default 02:00 AM since 02:00 AM does not fall between 09:00 AM and 05:00 PM.
`autoround` will cap at the max time even if it doesn't fully align with the step prop. For example: In a field with a 09:00 AM - 05:00 PM time frame and a step of 30 minutes, if 4:45 is entered it will round to 5:00 PM.
Add a `description` to allow users to know there is a time constraint.
```tsx lines expandable theme={null}
import { TimeField, Grid } from "@servicetitan/anvil2";
function App() {
return (
{
console.log("Time changed:", change.time);
}}
/>
{
console.log("Time changed:", change.time);
}}
/>
);
}
export default App;
```
### 24 Hour Format
Set the `format` prop to 24 to change to the time format. When using this format, ensure `min` and `max` times are also set to 24 hour format.
```tsx lines expandable theme={null}
import { TimeField, Grid } from "@servicetitan/anvil2";
function App() {
return (
{
console.log("Time changed:", change.time);
}}
/>
{
console.log("Time changed:", change.time);
}}
/>
);
}
export default App;
```
### Validation
Validation needs to be handled with the onChange. `isInputValid` and `isInputEmpty` are boolean props returned with the time so that custom validation can be applied. Note: Because of the use of the mask acts as a value for the input, native html validation will not occur.
```tsx lines expandable theme={null}
import { TimeField } from "@servicetitan/anvil2";
import { useState } from "react";
function App() {
const [, setTime] = useState(null);
const [error, setError] = useState("");
return (
{
setTime(change.time);
if (change.isInputEmpty) {
setError("Time is required");
} else {
setError("");
}
}}
/>
);
}
export default App;
```
### Markdown in labels
The `label` prop supports inline markdown: bold (`**text**`), italic (`*text*`), bold and italic (`***text***`), highlight (`==text==`), and code (`` `text` ``).
```tsx lines expandable theme={null}
import { Flex, TimeField } from "@servicetitan/anvil2";
function App() {
return (
);
}
export default App;
```
### Hide the label
Use `hideLabel` to visually hide the label. The `label` string is converted to an `aria-label` on the input so it remains accessible to screen readers — any inline markdown is stripped to plain text.
```tsx lines expandable theme={null}
import { TimeField } from "@servicetitan/anvil2";
function App() {
return ;
}
export default App;
```
```tsx theme={null}
console.log(change)}
/>
```
## `TimeField` Props
In addition to the props listed below, the `TimeField` accepts most [TextField](/docs/web/components/text-field/design) props with the exception of `type`, `placeholder`, `showCounter` and `maxLength`. This includes `label` (supports inline markdown; omitting is deprecated) and `hideLabel`.
If true, value will round to nearest future step. If there is a defined time
frame, the ceiling for rounding is the max time.
Uncontrolled initial value for the component.
If true, the dropdown with suggested time options is not present.
Time format for the component.
`}>
Additional props passed to the [FieldLabel](/docs/web/components/field-label/code) component. Supports the `aiMark` prop for displaying [AI-powered field indicators](/docs/web/utilities/ai-marks).
Maximum allowed time for a time frame. Must be paired with `min`. String must
match the format set for the component.
Minimum allowed time for a time frame. Must be paired with `max`. String must
match format set for the component.
Callback fired on blur or after a time is selected from the selection list.
Time increments for the time suggestions and auto rounding.
Controlled value for the component.
```tsx theme={null}
// TimeFieldChange is returned by the onChange callback
const handleChange = (change: TimeFieldChange) => {
console.log(change.isInputEmpty, change.isInputValid, change.time);
};
```
## `TimeFieldChange` Props
The onChange callback receives a TimeFieldChange object with the following properties:
Whether the input is empty.
Whether there is a validation issue aside from empty value with the input.
The returned time string.
