# Type of Elements

The Firstoken Captures SDK JS has different types of elements that can be used. The following are the elements that can be used:

<table data-card-size="large" data-view="cards" data-full-width="false"><thead><tr><th></th><th></th><th></th></tr></thead><tbody><tr><td><strong><code>card-number</code></strong></td><td>Used for capturing PAN value</td><td><pre class="language-handlebars" data-overflow="wrap"><code class="lang-handlebars">FT.field("#cc-number", { 
      type: "card-number",
      name: "card_number",
      placeholder: "Card Number",
      autocomplete: "cc-number",
      errorColor: "750000",
      successColor: "038846e1",
      brandIcon: true,
      required: "true",
      css: css
    });
</code></pre></td></tr><tr><td><strong><code>card-holder</code></strong></td><td>Used for capturing Card holder name value</td><td><pre class="language-handlebars"><code class="lang-handlebars">FT.field("#cc-holder", {
      type: "card-holder",
      name: "card_holder",
      placeholder: "Name on card",
      autocomplete: "cc-holder",
      errorColor: "750000",
      successColor: "038846e1",
      required: "true",
      css: css
    });
</code></pre></td></tr><tr><td><strong><code>card-expiration-date</code></strong></td><td><p>Used for capturing expiration date of the card</p><pre class="language-handlebars"><code class="lang-handlebars">FT.field("#cc-expiration-date", {
      type: "card-expiration-date",
      name: "card_expiration_date",
      placeholder: "MM / YY",
      autocomplete: "cc-exp-month / cc-exp-year",
      errorColor: "750000",
      successColor: "038846e1",
      required: "true",
      css: css
    });
</code></pre></td><td></td></tr><tr><td><strong><code>card-security-code</code></strong></td><td>Used for capturing the 3/4 security digits of the card</td><td><pre class="language-handlebars"><code class="lang-handlebars">FT.field("#cc-cvv", {
      type:"card-security-code",
      name: "card_security_code",
      placeholder: "CVV",
      autocomplete: "cc-csc",
      errorColor: "750000",
      successColor: "038846e1",
      required: "true",
      css: css
    });
</code></pre></td></tr><tr><td><strong><code>expiration-year</code></strong></td><td><p>Used for capture the card expiration year (separately)</p><pre class="language-handlebars"><code class="lang-handlebars">FT.field("#cc-expiration-year", {
      type: "expiration-year",
      name: "card_year",
      placeholder: "YY",
      autocomplete: "cc-exp-year",
      errorColor: "750000",
      successColor: "038846e1",
      yearLength: "2",
      required: "true",
      css: css
    });
</code></pre></td><td></td></tr><tr><td><p><strong><code>expiration-month</code></strong></p><p>Used for capture the card expiration month (separately)</p><pre class="language-handlebars"><code class="lang-handlebars">FT.field("#cc-expiration-month", {
      type: "expiration-month",
      name: "card_month",
      placeholder: "MM",
      autocomplete: "cc-exp-month",
      errorColor: "750000",
      successColor: "038846e1",
      required: "true",
      css: css
    });
</code></pre></td><td></td><td></td></tr><tr><td><strong><code>text</code></strong></td><td>Used for capturing text input.</td><td><pre class="language-handlebars"><code class="lang-handlebars">FT.field("#text-1", {
      type: "text",
      name: "city",
      placeholder: "City",
      autocomplete: "off",
      required: "true",
      regexPattern: "/^[A-Za-z]+$/",
      errorColor: "750000",
      successColor: "038846e1",
      css: css
    });
</code></pre></td></tr><tr><td><strong><code>amount</code></strong></td><td>Used for capturing monetary amounts.</td><td><pre class="language-handlebars"><code class="lang-handlebars">FT.field("#total-amount", {
      type: "amount",
      name: "amount",
      placeholder: "Monto",
      decimalSeparator: ",",
      errorColor: "750000",
      successColor: "038846e1",
      css: css
    });
</code></pre></td></tr><tr><td><strong><code>select</code></strong></td><td>Used for capturing a selection from a predefined list of options.</td><td><pre class="language-handlebars"><code class="lang-handlebars">FT.field("#states", {
      type: "select",
      name: "states",
      values: ["Miranda", "DC", "Zulia", "Merida"],
      emptyValueText: "-- Please select a state --",
      selectedValue: 0,
      required: "true",
      errorColor: "750000",
      successColor: "038846e1",
      css: css
    });
</code></pre></td></tr><tr><td><strong><code>radio</code></strong></td><td>Used to select one option from a collection of radio buttons that describe a set of related options</td><td><pre class="language-javascript"><code class="lang-javascript">FT.field("#remember", {
      type: "radio",
      name: "remember",
      values: ["Yes", "No"],
      required: "true",
      selectedValue: 0,
      css: css
   });
</code></pre></td></tr></tbody></table>

These elements can be used to capture different types of data in the Firstoken Captures SDK JS.


---

# 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/type-of-elements.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.