> For the complete documentation index, see [llms.txt](https://firstoken.gitbook.io/api-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://firstoken.gitbook.io/api-docs/guides/implementing-captures-sdk-js/elements-options.md).

# 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>