---
schema_version: "1"
id: 2303ed9338dff1fa91998bccbe99e555dd5cd7f491cdd0535fa1dd840ffc9f51
title: Element-Specific Considerations for Flexcard 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_common_input_element_properties_31505.md
canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.os_flexcards_common_input_element_properties_31505.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: f71b6a5df5e3a8c2fd19e5c244a1627985d9860674414b60cb29c18d9aeb06b9
description: 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.
products:
  - Omnistudio
release: "264"
---
# Element-Specific Considerations for Flexcard Input Elements

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.

See [Base Omnistudio LWC ReadMe Reference](https://help.salesforce.com/s/articleView?id=xcloud.os_base_omnistudio_lwc_readme_reference_58383.htm&type=5&language=en_US).

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
      <colgroup>
        <col style="width:24.305555555555554%">
        <col style="width:35.55555555555556%">
        <col style="width:40.13888888888889%">
      </colgroup>
      <thead class="slds-text-title_caps ">
        <tr class="">
          <th scope="col" dir="ltr" class="slds-cell-wrap" style="vertical-align:top;" id="d41249e45">Input Element</th>
          <th scope="col" dir="ltr" class="slds-cell-wrap" style="vertical-align:top;" id="d41249e48">Description or Consideration</th>
          <th scope="col" dir="ltr" class="slds-cell-wrap" style="vertical-align:top;" id="d41249e51">Lightning Web Component in ReadMe</th>
        </tr>
      </thead>
      <tbody>
        <tr class="">
          <td data-label="Input Element" dir="ltr" class="slds-cell-wrap" style="vertical-align:top;" headers="d41249e45 ">Checkbox</td>

          <td data-label="Description or Consideration" dir="ltr" class="slds-cell-wrap" style="vertical-align:top;" headers="d41249e48 ">Select a checkbox by default.</td>

          <td data-label="Lightning Web Component in ReadMe" dir="ltr" class="slds-cell-wrap" style="vertical-align:top;" headers="d41249e51 ">CheckboxGroup</td>

        </tr>
        <tr class="">
          <td data-label="Input Element" dir="ltr" class="slds-cell-wrap" style="vertical-align:top;" headers="d41249e45 ">Currency</td>

          <td data-label="Description or Consideration" class="slds-cell-wrap" style="vertical-align:top;" headers="d41249e48 ">The default value is based on the logged-in user's locale settings, such as
            USD. If the user locale doesn't have the currency specified, currency code from
            company information is used.</td>

          <td data-label="Lightning Web Component in ReadMe" dir="ltr" class="slds-cell-wrap" style="vertical-align:top;" headers="d41249e51 ">Input when type = currency</td>

        </tr>
        <tr class="">
          <td data-label="Input Element" dir="ltr" class="slds-cell-wrap" style="vertical-align:top;" headers="d41249e45 ">Date</td>

          <td data-label="Description or Consideration" class="slds-cell-wrap" style="vertical-align:top;" headers="d41249e48 ">
            <p dir="ltr">Supports custom labels.</p>
            <p style="margin-bottom:0;" dir="ltr">If needed, enter a default value in the selected date and time
              formats.</p>
          </td>

          <td data-label="Lightning Web Component in ReadMe" dir="ltr" class="slds-cell-wrap" style="vertical-align:top;" headers="d41249e51 ">DatePicker</td>

        </tr>
        <tr class="">
          <td data-label="Input Element" dir="ltr" class="slds-cell-wrap" style="vertical-align:top;" headers="d41249e45 ">Date/Time</td>

          <td data-label="Description or Consideration" class="slds-cell-wrap" style="vertical-align:top;" headers="d41249e48 ">
            <p dir="ltr">Supports custom labels.</p>
            <p style="margin-bottom:0;" dir="ltr">If needed, enter a default value in the selected date and time
              formats.</p>
          </td>

          <td data-label="Lightning Web Component in ReadMe" dir="ltr" class="slds-cell-wrap" style="vertical-align:top;" headers="d41249e51 ">DateTimePicker</td>

        </tr>
        <tr class="">
          <td data-label="Input Element" dir="ltr" class="slds-cell-wrap" style="vertical-align:top;" headers="d41249e45 ">Email</td>

          <td data-label="Description or Consideration" dir="ltr" class="slds-cell-wrap" style="vertical-align:top;" headers="d41249e48 ">—</td>

          <td data-label="Lightning Web Component in ReadMe" dir="ltr" class="slds-cell-wrap" style="vertical-align:top;" headers="d41249e51 ">Input when type = email</td>

        </tr>
        <tr class="">
          <td data-label="Input Element" dir="ltr" class="slds-cell-wrap" style="vertical-align:top;" headers="d41249e45 ">Multi-Select</td>

          <td data-label="Description or Consideration" dir="ltr" class="slds-cell-wrap" style="vertical-align:top;" headers="d41249e48 ">Display options as checkboxes, buttons, images, or as a
            dropdown.</td>

          <td data-label="Lightning Web Component in ReadMe" class="slds-cell-wrap" style="vertical-align:top;" headers="d41249e51 "><a name="os_flexcards_common_input_element_properties_31505__ul_wfc_scn_gcc"><!-- --></a>
            <ul id="os_flexcards_common_input_element_properties_31505__ul_wfc_scn_gcc">
              <li dir="ltr">
                <p dir="ltr">CheckboxGroup for checkboxes and buttons</p>
              </li>

              <li dir="ltr">
                <p dir="ltr">CheckboxImageGroup for images</p>
              </li>

              <li dir="ltr">
                <p dir="ltr">Combobox for dropdowns</p>
              </li>

            </ul>
          </td>

        </tr>
        <tr class="">
          <td data-label="Input Element" dir="ltr" class="slds-cell-wrap" style="vertical-align:top;" headers="d41249e45 ">Number</td>

          <td data-label="Description or Consideration" class="slds-cell-wrap" style="vertical-align:top;" headers="d41249e48 ">
            <p dir="ltr">If needed, define a minimum and maximum mask value by setting the
              min and max custom attributes. These fields don’t support merge fields.</p>
            <p style="margin-bottom:0;" dir="ltr">Users can enter numbers of any length regardless of the mask
              length.</p>
          </td>

          <td data-label="Lightning Web Component in ReadMe" dir="ltr" class="slds-cell-wrap" style="vertical-align:top;" headers="d41249e51 ">Input when type = number</td>

        </tr>
        <tr class="">
          <td data-label="Input Element" dir="ltr" class="slds-cell-wrap" style="vertical-align:top;" headers="d41249e45 ">Radio</td>

          <td data-label="Description or Consideration" dir="ltr" class="slds-cell-wrap" style="vertical-align:top;" headers="d41249e48 ">If you choose the color display mode, enter the color in the
            Value field under Options as a CSS color name such as <code>Yellow</code>, or a HEX code such as <code>#ffff00</code>. See <a href="https://www.w3schools.com/colors/colors_names.asp" target="_blank">Color Names Supported by All Browsers and</a>
            <a href="https://www.w3schools.com/colors/colors_hexadecimal.asp" target="_blank">Colors HEX</a>.
          </td>

          <td data-label="Lightning Web Component in ReadMe" class="slds-cell-wrap" style="vertical-align:top;" headers="d41249e51 "><a name="os_flexcards_common_input_element_properties_31505__ul_xfc_scn_gcc"><!-- --></a>
            <ul id="os_flexcards_common_input_element_properties_31505__ul_xfc_scn_gcc">
              <li dir="ltr">
                <p dir="ltr">RadioGroup for radios and buttons</p>
              </li>

              <li dir="ltr">
                <p dir="ltr">RadioImageGroup for images</p>
              </li>

              <li dir="ltr">
                <p dir="ltr">RadioColorPickGroup for colors</p>
              </li>

            </ul>
          </td>

        </tr>
        <tr class="">
          <td data-label="Input Element" dir="ltr" class="slds-cell-wrap" style="vertical-align:top;" headers="d41249e45 ">Range</td>

          <td data-label="Description or Consideration" dir="ltr" class="slds-cell-wrap" style="vertical-align:top;" headers="d41249e48 ">The Step field determines the incremental increase in the range.
            For example, for a range from 1 through 3, a step of .5 lets users select
            values between 1, 1.5, 2, 2.5, and 3. </td>

          <td data-label="Lightning Web Component in ReadMe" dir="ltr" class="slds-cell-wrap" style="vertical-align:top;" headers="d41249e51 ">Input when type = range</td>

        </tr>
        <tr class="">
          <td data-label="Input Element" dir="ltr" class="slds-cell-wrap" style="vertical-align:top;" headers="d41249e45 ">Select</td>

          <td data-label="Description or Consideration" dir="ltr" class="slds-cell-wrap" style="vertical-align:top;" headers="d41249e48 ">—</td>

          <td data-label="Lightning Web Component in ReadMe" dir="ltr" class="slds-cell-wrap" style="vertical-align:top;" headers="d41249e51 ">Combobox when multiple = false</td>

        </tr>
        <tr class="">
          <td data-label="Input Element" dir="ltr" class="slds-cell-wrap" style="vertical-align:top;" headers="d41249e45 ">Telephone</td>

          <td data-label="Description or Consideration" dir="ltr" class="slds-cell-wrap" style="vertical-align:top;" headers="d41249e48 ">—</td>

          <td data-label="Lightning Web Component in ReadMe" dir="ltr" class="slds-cell-wrap" style="vertical-align:top;" headers="d41249e51 ">Input when type = tel</td>

        </tr>
        <tr class="">
          <td data-label="Input Element" dir="ltr" class="slds-cell-wrap" style="vertical-align:top;" headers="d41249e45 ">Text</td>

          <td data-label="Description or Consideration" dir="ltr" class="slds-cell-wrap" style="vertical-align:top;" headers="d41249e48 ">
            <p>When you set the mask property on text fields, Salesforce shows the
              default error message instead of custom error messages for those fields. </p>
            <p style="margin-bottom:0;">Flexcards
              do not support curly braces {} in text fields as those are reserved for merge field
              syntax and cannot be used in a string or text value.</p>
          </td>

          <td data-label="Lightning Web Component in ReadMe" dir="ltr" class="slds-cell-wrap" style="vertical-align:top;" headers="d41249e51 ">Input when type = text</td>

        </tr>
        <tr class="">
          <td data-label="Input Element" dir="ltr" class="slds-cell-wrap" style="vertical-align:top;" headers="d41249e45 ">Text Area</td>

          <td data-label="Description or Consideration" class="slds-cell-wrap" style="vertical-align:top;" headers="d41249e48 ">
            <p dir="ltr">By default, Omnistudio uses the <code>\n</code> element instead of the <code>&lt;br&gt;</code> element to create line breaks.</p>
            <p style="margin-bottom:0;">Flexcards do not support curly braces {} in text area fields as those are reserved
              for merge field syntax and cannot be used in a string or text value.</p>
          </td>

          <td data-label="Lightning Web Component in ReadMe" dir="ltr" class="slds-cell-wrap" style="vertical-align:top;" headers="d41249e51 ">Textarea</td>

        </tr>
        <tr class="">
          <td data-label="Input Element" dir="ltr" class="slds-cell-wrap" style="vertical-align:top;" headers="d41249e45 ">Time</td>

          <td data-label="Description or Consideration" dir="ltr" class="slds-cell-wrap" style="vertical-align:top;" headers="d41249e48 ">If you specify a default value, ensure that it’s in the selected
            time format.</td>

          <td data-label="Lightning Web Component in ReadMe" dir="ltr" class="slds-cell-wrap" style="vertical-align:top;" headers="d41249e51 ">TimePicker</td>

        </tr>
        <tr class="">
          <td data-label="Input Element" dir="ltr" class="slds-cell-wrap" style="vertical-align:top;" headers="d41249e45 ">Toggle</td>

          <td data-label="Description or Consideration" class="slds-cell-wrap" style="vertical-align:top;" headers="d41249e48 ">
            <p dir="ltr">Let users trigger actions and send values as true or false
              parameters, or a comma-separated list of options that they select with the
              <code>{element.value}</code> merge field.
            </p>
            <p dir="ltr">Field binding isn’t supported with the Checkbox Group and Checkbox
              Group Button toggle types. For the other types, provide data field
              information in the Checked field instead of the Field Binding field.</p>
            <p dir="ltr">To disable the toggle element based on the boolean value of a
              merge field, select that merge field from the <strong>Disabled</strong> picklist.</p>
            <p style="margin-bottom:0;" dir="ltr">For example, a Flexcard shows open cases and has a toggle to
              indicate that it’s closed, and an Is Escalated field. You can disable the
              toggle for escalated cases so that support agents can only close cases after
              they solve the de-escalate the case.</p>
          </td>

          <td data-label="Lightning Web Component in ReadMe" class="slds-cell-wrap" style="vertical-align:top;" headers="d41249e51 ">
            <p style="margin-bottom:0;" dir="ltr">Toggle</p>
          </td>

        </tr>
        <tr class="">
          <td data-label="Input Element" dir="ltr" class="slds-cell-wrap" style="vertical-align:top;" headers="d41249e45 ">Typeahead</td>

          <td data-label="Description or Consideration" dir="ltr" class="slds-cell-wrap" style="vertical-align:top;" headers="d41249e48 ">—</td>

          <td data-label="Lightning Web Component in ReadMe" dir="ltr" class="slds-cell-wrap" style="vertical-align:top;" headers="d41249e51 ">Typeahead</td>

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