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

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