Time Range Picker

The Avonni Time Range Picker lets users select a start time and an end time within a single input. Drop it onto the canvas whenever you need to capture a span of time — such as an appointment window, a shift, or business hours — with the two values kept together as one range.

Overview

The Time Range Picker presents two time inputs side by side: one for the start time and one for the end time. You control the labels, the help text, how the times are formatted, and whether the field is required, disabled, or read-only. The sections below follow the configuration panel from top to bottom, so you can read along as you build.

Configuration

To configure the Time Range Picker, select it on the canvas. The Edit Time Range Picker panel opens on the right with three tabs: Properties, Interactions, and Style. The sections below mirror the Properties tab.

General

The top group of the Properties tab holds the picker's core settings.

Label

The Label setting defines the text label shown above the input time range. Use it to tell users what the range represents.

Start Time

The Start Time setting specifies the value of the start time input. Set it to pre-fill the beginning of the range when the component loads.

End Time

The End Time setting specifies the value of the end time input. Set it to pre-fill the end of the range when the component loads.

Field Level Help

The Field Level Help setting adds help text that details the purpose and function of the input. It appears as a small help icon next to the label, giving users extra guidance without cluttering the field.

Variant

The Variant setting changes the appearance of the input field. Pick the option that fits your layout:

• Standard (default) — the label is displayed above the input.
• Label Hidden — the label is hidden, for a cleaner look or when the field's purpose is already clear.

Required

When Required is enabled, the input field must be filled out before the form is submitted.

Disabled

When Disabled is enabled, the input field is disabled and users cannot interact with it.

Read only

When Read only is enabled, the input is read-only and cannot be edited by users.

Format

The Format group controls how the selected times are displayed.

Time Style

The Time Style setting controls the level of detail used to display each time. Choose the option that matches how precise the time should appear:

• Short (default) — the most compact format.
• Medium — a moderately detailed format.
• Long — the most detailed format.

Time Labels

The Time Labels group lets you label each of the two inputs individually. This group is collapsed by default.

Start Time

The Start Time setting in this group defines the text label for the start time input.

End Time

The End Time setting in this group defines the text label for the end time input.

Set Component Visibility

All components support conditional visibility — see Component Visibility.

Interactions

Interactions define what happens when users interact with the Time Range Picker. Configure them from the Interactions tab of the Edit Time Range Picker panel.

Change

Fires when the user changes the start time or end time. Use this to update a record, recalculate a duration, or trigger any flow logic that depends on the selected time range.

Styling

The Style tab gives you control over the Time Range Picker's appearance. Configure it from the Style tab of the Edit Time Range Picker panel.

Margin

Controls the outer spacing around the picker, creating space between it and other elements.

• Top / Right / Bottom / Left: Adjust the space on each side.

Padding

Border

Label

Time Labels