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

# WidgetDuration

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

> The root intentionally carries no chrome so form layout owns spacing.

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

| Slot | Default classes | Description |
| --- | --- | --- |
| [root](/v3/reference/theming/keys/WidgetDuration.md#theme-key-WidgetDuration-root) |  | The root intentionally carries no chrome so form layout owns spacing. |
| [inner](/v3/reference/theming/keys/WidgetDuration.md#theme-key-WidgetDuration-inner) | `flex flex-row gap-2 flex-wrap` | The inner row wraps duration segments when narrow columns run out of space. |
| [innerItem](/v3/reference/theming/keys/WidgetDuration.md#theme-key-WidgetDuration-innerItem) | `flex flex-col flex-grow gap-1` | Each duration segment stacks its label and control while sharing leftover width. |
| [sign](/v3/reference/theming/keys/WidgetDuration.md#theme-key-WidgetDuration-sign) | `flex flex-col gap-1` | The segment before the spinners that marks a negative duration, stacked like a unit segment. |
| [signSymbol](/v3/reference/theming/keys/WidgetDuration.md#theme-key-WidgetDuration-signSymbol) | `flex flex-1 items-center text-base font-medium` | The minus sign under the segment's label, centered in the height the spinners take. |
| [unitLabel](/v3/reference/theming/keys/WidgetDuration.md#theme-key-WidgetDuration-unitLabel) | `text-xs text-muted-foreground` | The visible unit label above each spinner, associated with that unit's input. |

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

## root

> The root intentionally carries no chrome so form layout owns spacing.

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

<a id="theme-key-WidgetDuration-inner"></a>

## inner

> The inner row wraps duration segments when narrow columns run out of space.

Default classes:

`flex flex-row gap-2 flex-wrap`

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

<a id="theme-key-WidgetDuration-innerItem"></a>

## innerItem

> Each duration segment stacks its label and control while sharing leftover width.

Default classes:

`flex flex-col flex-grow gap-1`

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

<a id="theme-key-WidgetDuration-sign"></a>

## sign

> The segment before the spinners that marks a negative duration, stacked like a unit segment.

Default classes:

`flex flex-col gap-1`

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

<a id="theme-key-WidgetDuration-signSymbol"></a>

## signSymbol

> The minus sign under the segment's label, centered in the height the spinners take.

Default classes:

`flex flex-1 items-center text-base font-medium`

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

<a id="theme-key-WidgetDuration-unitLabel"></a>

## unitLabel

> The visible unit label above each spinner, associated with that unit's input.

Default classes:

`text-xs text-muted-foreground`

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