# TimeField

> A convenience wrapper composing a labeled, described, and validated time field in one call: a caption through Label, a native `<input type="time">` control through Input, an optional supporting passage through Description, and an optional validation message through FieldError.

```ts
import { TimeField } from "@sdxc/ui";
```

Composes Label, a native `<input type="time">` control through
Input, Description, and FieldError into one field,
computing every id and `aria-describedby` link from this identifier.

## Examples

```tsx
<TimeField label={t("event.startTime.label")} name="startTime" required />
```

```tsx
<TimeField
	label={t("event.reminderTime.label")}
	min="09:00"
	max="18:00"
	description={t("event.reminderTime.hint")}
/>
```

```tsx
<TimeField
	label={t("event.endTime.label")}
	name="endTime"
	defaultValue="09:00"
	errorMessage={t("event.endTime.beforeStart")}
/>
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `color?` | `"brand" \| "neutral" \| "success" \| "warning" \| "danger"` | Semantic color role for the control's focus ring. Defaults to `"neutral"` when omitted. |
| `label` | `RemixNode` | The field's caption, rendered through Label and associated with the control through a native `for`/`id` relationship computed from this instance's own identifier. |
| `description?` | `RemixNode` | Supporting copy rendered through Description beneath the control and referenced by the control's `aria-describedby`. Omit to render no description. |
| `errorMessage?` | `RemixNode` | Validation message rendered through FieldError beneath the control, marking `aria-invalid` unless set explicitly. Falls back to a Form's own `issues` message by `name`; an explicit value wins. |
| `autoFocus?` | `boolean` | Native `autofocus`. Defaults to `true` for the first invalid field of an enclosing Form's `issues`, landing keyboard focus on the problem with no client JavaScript; pass explicitly to override. |
| `name?` | `string` | Native `name` submitted with an enclosing form. |
| `value?` | `string` | Current value, in the platform's `"HH:mm"` (or `"HH:mm:ss"`) format, for a control a consumer tracks itself. |
| `defaultValue?` | `string` | Initial value, in that same format, for a control left to the platform's own uncontrolled state. |
| `min?` | `string` | Earliest accepted time, in the same `"HH:mm"`/`"HH:mm:ss"` format. |
| `max?` | `string` | Latest accepted time, in the same `"HH:mm"`/`"HH:mm:ss"` format. |
| `step?` | `number` | Granularity of the accepted value, in seconds — set to `1` to surface a seconds digit alongside hours and minutes. |
| `required?` | `boolean` | Marks the control required for its enclosing form. |
| `disabled?` | `boolean` | Marks the control inert and excluded from the tab order. |
| `readOnly?` | `boolean` | Marks the control's value fixed, while keeping it focusable and included in form submission. |
| `autoComplete?` | `string` | Native autofill hint, e.g. `"bday"`. |
| `parts?` | `PartsProps` | Per-part styling for this wrapper's internally composed elements. |

Also accepts everything in `Omit<TagProps<"div">, "children">`.


## Types

| Name | Values | What it decides |
| --- | --- | --- |
| `Color` | `"brand" \| "neutral" \| "success" \| "warning" \| "danger"` | Semantic color role for the control's keyboard focus ring, each mapped to its matching `--ui-*` variables. |