---
schema_version: "1"
id: dd7b3a61e2b7c4cf13b6435e4dc30ecf2903eb87a8ee0b102f2f02635ac7d0b0
title: Flexcards Input Elements
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/xcloud/264-0-0/os_flexcards_input_elements_reference_31222.md
canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.os_flexcards_input_elements_reference_31222.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: 1dcc12036c114071fe6ef5b61b173163212d2b8a83a2792137fbb25b5a6cc708
description: Add input elements to Flexcards so that your users can provide data, which then updates the JSON data. You can also configure an element to run an action when a user interacts with the element.
products:
  - Omnistudio
release: "264"
---
# Flexcards Input Elements

Add input elements to Flexcards so that your users can provide data, which then updates the JSON data. You can also configure an element to run an action when a user interacts with the element.

For all input elements, you can configure these settings:

- Common parameters such as field binding to update data fields based on the information that users enter.
- Lightning web component custom attributes such as conditional checkbox color or specific labels when users hover on a toggle.
- Actions, conditions, or style formats, similar to other Flexcard element types. See , [Set Up Actions on a Flexcard](https://help.salesforce.com/s/articleView?id=xcloud.os_add_an_action_to_a_flexcard_25672.htm&release=264.0.0&type=5 "Configure actions that users can complete on Flexcards to improve the self-service experience, and save time on manual tasks. Add actions to supported elements or add an action element to a Flexcard, and then configure the action settings. For example, you want to have a button that opens a URL for additional information. To do so, add an action to an existing image or add an action element for which you select an image. You can also set up sequential actions and configure each action’s trigger."), [Set Up Conditions to a Flexcard Element](https://help.salesforce.com/s/articleView?id=xcloud.os_add_conditions_to_a_flexcard_element_35370.htm&release=264.0.0&type=5 "Apply conditions to Flexcards elements to show only relevant information to your users based on data field values. For example, on a Flexcard that summarizes the terms of a contract, only show reminder text when the contract renewal date is within a defined range."), and [Style a Flexcard](https://help.salesforce.com/s/articleView?id=xcloud.os_style_flexcard_elements_38751.htm&release=264.0.0&type=5 "Configure the look and feel of a Flexcard by styling individual elements, fields inside elements, and entire states. Configure backgrounds, text, and borders; adjust dimensions and element spacing; apply classes and inline styles; make your element responsive; and more.").

- **[Update Data Field Based on Value Entered by User](https://help.salesforce.com/s/articleView?id=xcloud.os_bind_a_flexcard_input_value_to_a_data_field_31417.htm&release=264.0.0&type=5)**  
    Ensure that your data is always up to date by binding an input element value to a data field in your Flexcard's data source. As a result, when a user updates the input value, Omnistudio updates the corresponding JSON code. 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.
- **[Element-Specific Considerations for Flexcard Input Elements](https://help.salesforce.com/s/articleView?id=xcloud.os_flexcards_common_input_element_properties_31505.htm&release=264.0.0&type=5)**  
    Review some element-specific considerations and learn which Lightning web component the element maps to, and the attribute that you can configure. Then, access the corresponding readme file for information about the custom attribute setup.
- **[Example: Suspend a Device from Self-Service](https://help.salesforce.com/s/articleView?id=xcloud.os_standard_example_suspend_a_device_from_self_service.htm&release=264.0.0&type=5)**  
    Learn how to set up a Flexcard that your customers use to suspend a mobile device from a self-service portal.