---
schema_version: "1"
id: bd5bc5ea063ccfb53e95424ffe5362f408f2c0e65f8e12fd04e10fadc29c28b8
title: Add a Time Input Element to a Flexcard (Managed Package)
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/xcloud/264-0-0/os_add_a_time_input_element_to_a_flexcard.md
canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.os_add_a_time_input_element_to_a_flexcard.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: a573744d29b2d40f2232315f18298d3d2c6dc54a1f85e0b78e143e822ca2a3f5
description: For the managed package runtime, add a Time Input element on a Flexcard to enable users to select a formatted time from a list of time intervals. From the Properties panel, configure properties and custom attributes, add an action, and add conditions.
products:
  - Omnistudio
release: "264"
---
# Add a Time Input Element to a Flexcard (Managed Package)

For the managed package runtime, add a Time Input element on a Flexcard to enable users to select a formatted time from a list of time intervals. From the Properties panel, configure properties and custom attributes, add an action, and add conditions.

![Managed Package app icon](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/resources-global/_corporate/images/managedpackageicon.png) This information is for Omnistudio for Managed Packages. For Omnistudio on standard runtime, see [Omnistudio Help](https://help.salesforce.com/s/articleView?id=xcloud.os_omnistudio_standard.htm&language=en_US).

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
        <colgroup>
          <col>
        </colgroup>
        <thead class="slds-text-title_caps ">
          <tr class="">
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d32373e46">
              <p style="margin-bottom:0;">Required Versions</p>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="Required Versions" class="slds-cell-wrap" style="vertical-align:top;" headers="d32373e46 ">
              <p style="margin-bottom:0;">Available beginning Winter '22.</p>
            </td>

          </tr>
        </tbody>
      </table>

1. From the Flexcards tab, click a version of a Flexcard to open the Flexcard Designer.
2. From the Build panel, click **Inputs**, and drag the **Time** element onto the canvas.
3. (Optional) From the Properties panel, update the element name in the **Element Name** field.
4. Configure properties common to all Input elements:
    
    - (Optional) In **Field Binding**, bind the value of the input element to an existing or new data field. See [Bind a Flexcard Input Value to a Data Field (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_bind_a_flexcard_input_value_to_a_data_field.htm&release=264.0.0&type=5 "For the managed package runtime, bind the value of an Input element to a new or existing data field in your Flexcard's data source. When a user updates the input value, the data JSON updates. You can use the new data like any other piece of data from a data source. For example, update the value of an attribute sent from a parent to a child Flexcard based on user input.").
    - In **Field Label**, enter the label that appears next to the element.
    - (Optional) In **Placeholder**, enter temporary text that displays inside the input field and which suggest to the user what content to enter.
    - (Optional) Check **Required** if the user must enter or select a value for this input element.
    - (Optional) Check **Read-only** to disable the ability to modify the input values.
    - (Optional) In **Help Text**, enter helpful text about the purpose of the input field. This feature adds an info icon (i) next to the element's label, which when hovered over displays the text.
5. (Optional) Click into **Default Value** to select a default input value from a merge field. Or, enter a value as plain text. Enter a default value in the format specified in **Time Format**. For example, if the format is `hh:mm a`, enter 03:30 pm.
6. (Optional) Update the **Time Format**. Default is hh:mm a, which displays as `3:30 am` or `3:30 pm`. See [date-fns format](https://date-fns.org/v2.0.0-alpha.31/docs/format) for format options.
7. (Optional) To limit the user to a specific time range, set the **Minimum Time** and **Maximum Time**.
    
    Select a time in the format specified in **Time Format**. For example, for 3pm, if the format is `hh:mm a`, enter 03:00 pm.
    
    Leave **Maximum Time** empty for the last interval of the day such as 11:30 pm. Leave **Minimum Time** empty for the first available interval, such as 12:00 am.
8. (Optional) In **Time Interval**, update the time intervals from the default 30 to another increment. For example, enter 15 to display a list of 15-minute increments, such as 12:00, 12:15, 12:30, 12:45.
9. (Optional) To configure additional properties available to the element, click **\+ Add New** in the **Custom Attributes** section. For each new attribute, perform the following tasks:
    
    1. Click into the **Attribute** field to select from an attribute in the dropdown. See [TimePicker Lightning Web Component ReadMe (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_timepicker_lightning_web_component_readme.htm&release=264.0.0&type=5 "For the managed package runtime, this page contains a TimePicker LWC ReadMe for each Vlocity release.") for available attributes.
    2. In the **Value** field, enter a value for the attribute.
10. To execute an action when a user interacts with the input element, click **\+ Add Action**, and see [Add a Click Event to a Flexcard Element (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_add_a_click_event_to_a_flexcard_element.htm&release=264.0.0&type=5 "For the managed package runtime, enable an element on a Flexcard to perform an action when clicked. Supported elements include Image, Block, Icon, and Toggle.").
11. (Optional) To add conditions that must be met for the element to display, see [Add Conditions to a Flexcard Element (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_add_conditions_to_a_flexcard_element.htm&release=264.0.0&type=5 "For the managed package runtime, display or hide data based on the value of a data field. For example, display an alert icon or supplemental text for escalated Cases. Apply conditions to any element listed in the Build panel of the Flexcard Designer.").
12. (Optional) To style your element, click **Style** to open the Style panel, and see [Style Flexcard Elements (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_style_flexcard_elements.htm&release=264.0.0&type=5 "For the managed package runtime, configure the look and feel of a Flexcard by styling individual elements, fields inside elements, and entire states. From the Style panel in the Flexcard Designer, design backgrounds, text, and borders; adjust heights, widths, and spacing inside and between elements; apply classes and inline styles; make your element responsive; and more.").

- **[Flexcards Time Input Element Properties (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_flexcards_time_input_element_properties.htm&release=264.0.0&type=5)**  
    For the managed package runtime, time Input element properties are configurable in the Properties panel when you select a Time Input element in the Flexcard Designer. With the Time Input element, enable users to select a formatted time from a list of time intervals.