# Elements Options

The elements in the Firstoken SDK have configurable options that enhance both functionality and customization to suit the client's design.

<table data-full-width="false"><thead><tr><th width="250">Option</th><th>Description</th><th>Example value</th></tr></thead><tbody><tr><td><strong>type</strong></td><td><p>It is used to identify what type of field is being initialized. </p><p></p><p>It only allows preconfigured values ​​such as "card-number", "card-holder", "card-expiration-date", "card-security-code", and "amount".</p></td><td>"card-number"</td></tr><tr><td><strong>name</strong></td><td><p>It is used to know the name of the field that will be assigned, in this case, the client can choose the name to assign to each element. </p><p></p><p>It should be noted that spaces should be replaced with "_" and the chosen name must match the field name configured in the Mapping Data of the created Inbound Route.</p></td><td>"card_number"</td></tr><tr><td><strong>placeholder</strong></td><td>It is used to provide a suggestion or example of what is expected for the user to enter in the field.</td><td>"XXXX-XXXX-XXXX-XXXX"</td></tr><tr><td><strong>css</strong></td><td><p>It is an object that contains predefined classes and pseudo-classes to style the field (In the CSS section, it indicates which classes and pseudo-classes can be used)</p><p></p><p>This configuration can be a globally defined object for all fields or individually defined for each field.</p></td><td><p></p><pre class="language-handlebars"><code class="lang-handlebars">{
  "color": "#1b1d1f",
  "box-sizing": "border-box",
  "font-size": "16px"
}
</code></pre></td></tr><tr><td><strong>errorColor</strong></td><td><p>It is a variable used to configure the color of the error that the client wants to define in case of an error in the field. </p><p></p><p>Only hexadecimal color values are allowed (without "#" character).</p></td><td><p></p><pre class="language-handlebars"><code class="lang-handlebars">75000000
</code></pre></td></tr><tr><td><strong>successColor</strong></td><td><p>This variable is used to configure the color of the success message that the client wants to define when the field is successfully filled. </p><p></p><p>Only hexadecimal color values are allowed (without the "#" character).</p></td><td><p></p><pre class="language-handlebars"><code class="lang-handlebars">00ff81e1
</code></pre></td></tr><tr><td><strong>autocomplete</strong></td><td><p>It is used to configure whether the field supports form autocomplete.</p><p></p><p>It accepts values defined by the client, such as "cc-name" or "name". If the client does not want this option, they can set it to </p><pre class="language-javascript"><code class="lang-javascript">autocomplete: "off"
</code></pre></td><td>"cc-number"</td></tr><tr><td><strong>brandIcon</strong></td><td><p>It is used to enable or disable the option to automatically display the brand icon of the card, depending on the card entered (only applicable to the card number field). </p><p></p><p>Accepted values are "true" or "false". If this option is not provided, the default value is "false".</p></td><td>"true"</td></tr><tr><td><strong>regexPattern</strong></td><td>It is used only in SDK elements of type "text", and in this option, the regex pattern to be used for validating the input text field is sent.</td><td><pre class="language-javascript"><code class="lang-javascript">/^[A-Za-z]+$/
</code></pre></td></tr><tr><td><strong>decimalSeparator</strong></td><td>It is used to configure the decimal symbol in the amount field. It can only be used in SDK elements of type "amount".<br><br>Accepted values are "," or "."</td><td>","</td></tr><tr><td><strong>values</strong></td><td>It is an array of strings containing the values to be used in the select field. This configuration can only be used in SDK elements of type "select".</td><td><pre class="language-javascript"><code class="lang-javascript">["Florida", "Texas", "Virginia", "California"],
</code></pre></td></tr><tr><td><strong>emptyValueText</strong></td><td>It is the value that is placed when the field is in a zero state or when no value is intended to be sent in that field.<br><br>This configuration can only be used in SDK elements of type "select".</td><td><pre class="language-javascript"><code class="lang-javascript"><strong>"-- Please select a state --"
</strong></code></pre></td></tr><tr><td><strong>selectedValue</strong></td><td>It is the predefined value when initializing the select field. It should be passed a number indicating the position of the element to be selected in the values array.<br><br>This configuration can only be used in SDK elements of type "select".</td><td>0<br>(This means that the selected value will be the one at position "0" in the values array.)</td></tr><tr><td><strong>yearLength</strong></td><td>It is used to configure the format of year in the expiration date field. It can only be used in SDK elements of type "card-expiration-date" and "expiration-year".<br><br>Accepted values are "2" or "4" (Depends on the year format "YY" or "YYYY")</td><td><pre><code>yearLength: 2
</code></pre></td></tr><tr><td><strong>required</strong></td><td><p>It is used to identify whether the initialized field is required or not. </p><p></p><p>Accepted values are "true" and "false".</p></td><td>"true"</td></tr><tr><td><strong>password</strong></td><td><p>It is used to configure if the input type must be type password to hide the value. </p><p></p><p>Accepted values are "true" and "false".</p></td><td></td></tr></tbody></table>


---

# Agent Instructions: 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:

```
GET https://firstoken.gitbook.io/api-docs/guides/implementing-captures-sdk-js/elements-options.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.