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

# widgets keys

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

## Selection widgets

| Component | Kind | Slots | Description |
| --- | --- | --- | --- |
| [WidgetCheckbox](/v3/reference/theming/keys/WidgetCheckbox.md) | key | 4 | The outer row aligns the checkbox control with its label chrome. |
| [WidgetCombobox](/v3/reference/theming/keys/WidgetCombobox.md) | key | 1 | The trigger uses the input-shell recipe for searchable pickers. |
| [WidgetDuration](/v3/reference/theming/keys/WidgetDuration.md) | key | 6 | The root intentionally carries no chrome so form layout owns spacing. |

## Date and time widgets

| Component | Kind | Slots | Description |
| --- | --- | --- | --- |
| [WidgetDateField](/v3/reference/theming/keys/WidgetDateField.md) | key | 5 | Pass-through hook for the segment shell. The shell recipe lives on [DateField.root](/v3/reference/theming/keys/DateField.md#theme-key-DateField-root). |
| [WidgetDateRangeField](/v3/reference/theming/keys/WidgetDateRangeField.md) | key | 6 | Pass-through hook for the segment shell. The shell recipe lives on [DateRangeField.root](/v3/reference/theming/keys/DateRangeField.md#theme-key-DateRangeField-root). |
| [WidgetTimeRangeField](/v3/reference/theming/keys/WidgetTimeRangeField.md) | key | 4 | 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. |

## Fallback

| Component | Kind | Slots | Description |
| --- | --- | --- | --- |
| [WidgetUnmapped](/v3/reference/theming/keys/WidgetUnmapped.md) | key | 1 | The diagnostic block. Reads as a destructive notice at supporting-text size so it sits inside a field's content column without impersonating a control. The edge is a `hairline`, matching [Alert.root](/v3/reference/theming/keys/Alert.md#theme-key-Alert-root), because a saturated 1px border fringes at integer DPR. |

## File and media widgets

| Component | Kind | Slots | Description |
| --- | --- | --- | --- |
| [WidgetFile](/v3/reference/theming/keys/WidgetFile.md) | key | 5 | The root stays transparent so the field shell provides the surface. |

## Autocomplete widgets

| Component | Kind | Slots | Description |
| --- | --- | --- | --- |
| [WidgetGenericAutoComplete](/v3/reference/theming/keys/WidgetGenericAutoComplete.md) | key | 4 | The root remains unstyled so the widget can sit inside any form shell. |

## Rich content widgets

| Component | Kind | Slots | Description |
| --- | --- | --- | --- |
| [WidgetHtml](/v3/reference/theming/keys/WidgetHtml.md) | key | 6 | The root adds no spacing so form composition controls the editor block. |
| [WidgetImage](/v3/reference/theming/keys/WidgetImage.md) | key | 3 | The root is transparent so image widgets inherit the surrounding field rhythm. |
| [WidgetJson](/v3/reference/theming/keys/WidgetJson.md) | key | 2 | Bordered control surface that mirrors textarea invalid and disabled states. |

## Read-only and labels

| Component | Kind | Slots | Description |
| --- | --- | --- | --- |
| [WidgetReadOnly](/v3/reference/theming/keys/WidgetReadOnly.md) | key | 10 | The root has no chrome because read-mode rows are owned by the field shell. |
| [WidgetLabel](/v3/reference/theming/keys/WidgetLabel.md) | key | 5 | The root grid pairs label text with feedback actions above the control. |

## Template widgets

| Component | Kind | Slots | Description |
| --- | --- | --- | --- |
| [WidgetPreviewableTemplate](/v3/reference/theming/keys/WidgetPreviewableTemplate.md) | key | 7 | The root adds no chrome so the surrounding form section owns spacing. |
| [WidgetTemplateLegend](/v3/reference/theming/keys/WidgetTemplateLegend.md) | key | 3 | The root stays unstyled so the legend can be embedded beside any template widget. |