---
url: "https://vueda.dev/v3/reference/theming/keys/WidgetTimeRangeField.md"
title: "WidgetTimeRangeField"
---

# WidgetTimeRangeField

Source: `client/lib/theme/vueda-tailwind/widgets/index.js`

> The row holding both bounds and the separator. Without it the two shells are block-level and stack, so a time range reads as two unrelated fields.

Vue component: [WidgetTimeRangeField](/v3/reference/api/vue/WidgetTimeRangeField.md)

| Slot | Default classes | Description |
| --- | --- | --- |
| [root](/v3/reference/theming/keys/WidgetTimeRangeField.md#theme-key-WidgetTimeRangeField-root) | `flex w-full items-center gap-2` | The row holding both bounds and the separator. Without it the two shells are block-level and stack, so a time range reads as two unrelated fields. |
| [field](/v3/reference/theming/keys/WidgetTimeRangeField.md#theme-key-WidgetTimeRangeField-field) | `flex-1 min-w-0` | Each bound's segment shell. Shares the row evenly and may shrink, so a narrow column keeps both bounds on one line. |
| [literal](/v3/reference/theming/keys/WidgetTimeRangeField.md#theme-key-WidgetTimeRangeField-literal) |  | Pass-through hook for the literal separators inside a bound (":"). Segment type comes from [TimeFieldInput.root](/v3/reference/theming/keys/TimeFieldInput.md#theme-key-TimeFieldInput-root). |
| [separator](/v3/reference/theming/keys/WidgetTimeRangeField.md#theme-key-WidgetTimeRangeField-separator) | `shrink-0 text-muted-foreground` | The en dash between the two bounds. Muted and fixed-width so it reads as a range connector rather than a segment. |

<a id="theme-key-WidgetTimeRangeField-root"></a>

## root

> The row holding both bounds and the separator. Without it the two shells are block-level and stack, so a time range reads as two unrelated fields.

Default classes:

`flex w-full items-center gap-2`

Source: `client/lib/theme/vueda-tailwind/widgets/WidgetTimeRangeField.theme.js:18`

<a id="theme-key-WidgetTimeRangeField-field"></a>

## field

> Each bound's segment shell. Shares the row evenly and may shrink, so a narrow column keeps both bounds on one line.

Default classes:

`flex-1 min-w-0`

Source: `client/lib/theme/vueda-tailwind/widgets/WidgetTimeRangeField.theme.js:22`

<a id="theme-key-WidgetTimeRangeField-literal"></a>

## literal

> Pass-through hook for the literal separators inside a bound (":"). Segment type comes from [TimeFieldInput.root](/v3/reference/theming/keys/TimeFieldInput.md#theme-key-TimeFieldInput-root).

Source: `client/lib/theme/vueda-tailwind/widgets/WidgetTimeRangeField.theme.js:26`

<a id="theme-key-WidgetTimeRangeField-separator"></a>

## separator

> The en dash between the two bounds. Muted and fixed-width so it reads as a range connector rather than a segment.

Default classes:

`shrink-0 text-muted-foreground`

Source: `client/lib/theme/vueda-tailwind/widgets/WidgetTimeRangeField.theme.js:30`