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.
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.
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.
Interactions
Interactions 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.
Styling
Configure the Input Date's appearance from the Style tab of the Edit Input Date panel.
Controls the outer spacing around the component.
Top / Right / Bottom / Left: Adjust the space on each side.
Controls the inner spacing between the component's content and its border.
Top / Right / Bottom / Left: Adjust the inner spacing on each side.
Controls the component's dimensions.
Width / Height: Set fixed dimensions.
Min Width / Max Width / Min Height / Max Height: Constrain the size within bounds.
Overflow: Control how content that exceeds the bounds is handled.
Customizes the border surrounding the component.
Color / Size / Style / Radius: Set the border color, thickness, style, and corner rounding.
Styles the field label.
Text Color / Font Size / Font Style / Font Weight: Set the label color and typography.
Styles the input field.
Background Color / Text Color / Border Color / Border Radius: Set the input colors and corner rounding.
Spacing Horizontal Start / Spacing Horizontal End: Set the inner horizontal spacing.
Last updated
Was this helpful?