> 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-time.md). # Input Time The Avonni Input Time lets users enter or pick a time value in a form. Drop it onto the canvas wherever you need to capture a time — an appointment slot, a start or end time, or any other time-of-day value — with optional range limits, timezone handling, and validation. ## Overview The Input Time pairs a label with a time field that users type into or select. You control how the field is labelled and laid out, the format the time is displayed in, and the range of acceptable values. You can also mark the field required, disabled, or read-only, and supply custom validation messages. The sections below follow the configuration panel from top to bottom, so you can read along as you build. ## Configuration To configure the Input Time, select it on the canvas. The **Edit Input Time** panel opens on the right with **Properties**, **Interactions**, and **Style** tabs. The sections below mirror the Properties tab. ### Properties The Properties tab contains all of the Input Time's settings in a single group. #### Label The **Label** setting is the text shown above (or beside) the field to tell users what the time is for. The **Variant** setting controls where this label appears relative to the field. #### Value The **Value** setting specifies the time the field starts with. Leave it empty for a blank field, or bind it to a value so the field is pre-filled when the component loads. #### Field Level Help The **Field Level Help** setting adds help text that explains the purpose and function of the field. It appears as a small help icon next to the label, and the text is revealed when users hover over or focus the icon. #### Variant The **Variant** setting changes the appearance of the field by controlling how the label is positioned. Pick the layout that fits the form: * **Standard** (default) — the label sits above the field. * **Label Hidden** — the label is hidden from view but still available to assistive technologies. * **Label Inline** — the label sits on the same line as the field. * **Label Stacked** — the label stacks above the field. #### Placeholder The **Placeholder** setting is text displayed when the field is empty, prompting the user for a valid entry. It disappears once the user begins typing. #### Max The **Max** setting specifies the maximum acceptable value for the input, setting the upper bound of the allowed time range. #### Min The **Min** setting specifies the minimum acceptable value for the input, setting the lower bound of the allowed time range. #### Time Style The **Time Style** setting controls how much detail the displayed time includes. Choose the format that suits the precision you need: * **Short** — a brief time display. * **Medium** (default) — the standard time display. * **Long** — a more detailed time display. #### Timezone The **Timezone** setting specifies the timezone used to interpret and display the time value. #### Required The **Required** setting, when enabled, means the field must be filled out before the form is submitted. Enabling it also makes the **Message When Value Missing** setting relevant. #### Read Only The **Read Only** setting, when enabled, displays the field's value but prevents users from editing it. #### Message When Value Missing The **Message When Value Missing** setting is the error message displayed when the field is required and its value is missing. This setting applies when **Required** is enabled. #### Disabled The **Disabled** setting, when enabled, disables the field so users cannot interact with it. #### Message When Bad Input The **Message When Bad Input** setting is the error message displayed when a bad input is detected. This is an advanced setting. ### 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 Time Input. Configure them from the **Interactions** tab of the Edit Time Input panel. ### Change Fires when the user changes the time field value. Use this to update a variable, trigger a flow action, or drive any logic that depends on the selected time. --- # 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-time.md?ask=&goal= ``` `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.