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

# DateField

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

> The input-shaped shell hosting the editable date segments. Same hairline + focus + `aria-invalid` recipe as [Input.root](/v3/reference/theming/keys/Input.md#theme-key-Input-root), with the row of [DateFieldInput.root](/v3/reference/theming/keys/DateFieldInput.md#theme-key-DateFieldInput-root) segments laid out as flex items inside; sizes pick the standard `h-vueda-control*` tier from `base.css § Control sizing`. The read-only treatment swaps to `bg-muted/50` so a frozen date field reads as the same surface family as a read-only text input.

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

| Slot | Default classes | Description |
| --- | --- | --- |
| [root](/v3/reference/theming/keys/DateField.md#theme-key-DateField-root) | callback | The input-shaped shell hosting the editable date segments. Same hairline + focus + `aria-invalid` recipe as [Input.root](/v3/reference/theming/keys/Input.md#theme-key-Input-root), with the row of [DateFieldInput.root](/v3/reference/theming/keys/DateFieldInput.md#theme-key-DateFieldInput-root) segments laid out as flex items inside; sizes pick the standard `h-vueda-control*` tier from `base.css § Control sizing`. The read-only treatment swaps to `bg-muted/50` so a frozen date field reads as the same surface family as a read-only text input. |

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

## root

> The input-shaped shell hosting the editable date segments. Same hairline + focus + `aria-invalid` recipe as [Input.root](/v3/reference/theming/keys/Input.md#theme-key-Input-root), with the row of [DateFieldInput.root](/v3/reference/theming/keys/DateFieldInput.md#theme-key-DateFieldInput-root) segments laid out as flex items inside; sizes pick the standard `h-vueda-control*` tier from `base.css § Control sizing`. The read-only treatment swaps to `bg-muted/50` so a frozen date field reads as the same surface family as a read-only text input.

Callback:

```javascript
({ size }) => ({
            class: [
                // Shell and surface.
                "flex w-full items-center rounded-vueda-field field-line bg-field hover:bg-field-hover text-sm transition-shadow",

                // Focus, read-only, and disabled states.
                "focus-within:hairline-ring focus-within:focus-ring-shadow",

                // Disabled: an inert slab, not a faded field. The state is a data attribute on a
                // wrapper element, which the `disabled:` variant (`:disabled`) never matches.
                "data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed",
                "data-[disabled]:bg-disabled data-[disabled]:text-disabled-foreground data-[disabled]:hairline-border",
                "data-[readonly]:bg-transparent data-[readonly]:hover:bg-transparent data-[readonly]:hairline-border",
                "data-[warning=true]:not-aria-invalid:hairline-warning",
                "aria-invalid:hairline-destructive focus-within:aria-invalid:focus-ring-shadow-destructive",

                // Size classes.
                {
                    "h-vueda-control px-vueda-control-px": !size || size === "default",
                    "h-vueda-control-sm px-vueda-control-px-sm": size === "sm",
                    "h-vueda-control-lg px-vueda-control-px-lg": size === "lg",
                },
            ],
        })
```

Source: `client/lib/theme/vueda-tailwind/controls/DateField.theme.js:18`