> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/dynamic-components/components/input-date.md).

# Input Date

The Avonni Date Input component lets users select or enter a date value. It supports validation, flexible date formatting, and standard field states such as required, disabled, and read-only.

## Overview

Use the Date Input when you need to collect a single date from your users — for example, a start date, a deadline, or a birthdate. Connect it to a page variable to store the selected value and trigger downstream logic via the On Change interaction.

## Configuration

To configure the Date Input, select it on the canvas. The **Edit Date Input** panel opens on the right. The sections below mirror the properties available in that panel.

### Properties

#### Label

The label displayed above the input field. Use a short, descriptive phrase so users know what date they are entering.

#### Value

The initial date value pre-populated in the field. You can bind this to a page variable or a Salesforce record field.

#### Field Level Help

Help text shown in a tooltip next to the label, detailing the purpose and function of the input. Leave empty if the label is self-explanatory.

#### Variant

Controls the label placement and appearance of the input.

| Variant                | Description                                                                         |
| ---------------------- | ----------------------------------------------------------------------------------- |
| **Standard** (default) | The label appears above the input field.                                            |
| **Label Hidden**       | The label is hidden from view.                                                      |
| **Label Inline**       | The label appears to the left of the input, on the same line.                       |
| **Label Stacked**      | The label starts above the field and shifts up when the field is focused or filled. |

#### Placeholder

Text displayed inside the field when it is empty, prompting the user to enter a valid date.

#### Max

The latest acceptable date. Users cannot select or enter a date after this value.

#### Min

The earliest acceptable date. Users cannot select or enter a date before this value.

#### Date Style

Controls how the date is formatted in the input field.

| Option               | Description                                       |
| -------------------- | ------------------------------------------------- |
| **Short**            | Compact numeric format (e.g., 12/31/2025).        |
| **Medium** (default) | Abbreviated month format (e.g., Dec 31, 2025).    |
| **Long**             | Full month name format (e.g., December 31, 2025). |

#### Required

When enabled, the field must be filled before the page or form can be submitted. A red asterisk is shown next to the label.

#### Message When Value Missing

Custom error message displayed when a user submits the form without filling in this required field. *Requires: **Required** to be enabled.*

#### Disabled

When enabled, the input is grayed out and users cannot interact with it.

#### Read Only

When enabled, the input displays the current value but cannot be edited. Available under **Advanced Options**.

#### Message When Bad Input

Custom error message displayed when the user enters an invalid date. Available under **Advanced Options**.

### Set Component Visibility

All components support conditional visibility — see [Component Visibility](/dynamic-components/core-concepts/component-visibility.md).

## Interactions

[Interactions](/dynamic-components/component-builder/interactions.md) define what happens when users interact with the Date Input. Configure them from the **Interactions** tab of the Edit Date Input panel.

### Change

Fires when the user selects or clears a date value. Use the **value** output variable to capture the selected date and update a page variable, trigger a flow, or refresh other components on the page.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.avonnicomponents.com/dynamic-components/components/input-date.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.