# TimeField
**Category**: react
**URL**: https://www.blakeui.com/en/docs/react/components/time-field
**Source**: https://raw.githubusercontent.com/myblakebox/BlakeUI/refs/heads/main/apps/docs/content/docs/en/react/components/(date-and-time)/time-field.mdx
> Time input field with labels, descriptions, and validation built on React Aria TimeField
***
## Import
```tsx
import { TimeField } from '@blakeui/react';
```
### Usage
```tsx
"use client";
import {Label, TimeField} from "@blakeui/react";
export function Basic() {
return (
{(segment) => }
);
}
```
### Anatomy
```tsx
import {TimeField, Label, Description, FieldError} from '@blakeui/react';
export default () => (
{(segment) => }
)
```
> **TimeField** combines label, time input, description, and error into a single accessible component.
### With Description
```tsx
"use client";
import {Description, Label, TimeField} from "@blakeui/react";
export function WithDescription() {
return (
{(segment) => }Enter the start time{(segment) => }Enter the end time
);
}
```
### Required Field
```tsx
"use client";
import {Description, Label, TimeField} from "@blakeui/react";
export function Required() {
return (
{(segment) => }{(segment) => }Required field
);
}
```
### Validation
Use `isInvalid` together with `FieldError` to surface validation messages.
```tsx
"use client";
import {FieldError, Label, TimeField} from "@blakeui/react";
export function Invalid() {
return (
{(segment) => }Please enter a valid time{(segment) => }Time must be within business hours
);
}
```
### With Validation
TimeField supports validation with `minValue`, `maxValue`, and custom validation logic.
```tsx
"use client";
import type {Time} from "@internationalized/date";
import {Description, FieldError, Label, TimeField} from "@blakeui/react";
import {parseTime} from "@internationalized/date";
import {useState} from "react";
export function WithValidation() {
const [value, setValue] = useState