# Creating Dropdown-Controlled Fields

Setting a field as dropdown-controlled can be done by setting the \`validOptions\` attribute of the schema definition for the field in the code snippet used to embed the uploader on your page.  Here’s an example of a code snippet for a dropdown-controlled field:

```javascript
{
 name: 'paymentType',
 displayName: 'Payment Type',
 description:
   'The medium of payment which was used to complete the transaction',
 validOptions: ['cash', 'credit', 'debit', 'paypal'],
},
```

When using the Osmos Uploader, users will be presented with a dropdown containing the provided set of options to pick from when mapping their data for this column:

![Dropdown selector within your Uploader](https://lh3.googleusercontent.com/-sVPXWuQQOGSyAoDpGjBujSa99saASwzYKdfMHRbwWWBBeki3gccYEwJYX2SeLfFNQ2-HMVJ-v5AhVW6gK14vep3xT1NjfpQRASsZ6Gr-4JNGKBIxlLnQTflu-40-rbyDIOS_ynr)

An actual upload snippet with this example of a dropdown field may look like the JavaScript below:

<pre class="language-javascript"><code class="lang-javascript"><strong>&#x3C;!-- Osmos File Upload Button -->
</strong>&#x3C;!-- See this link for more docs. https://docs.osmos.io/osmos-uploader/webpage-integration -->
&#x3C;script src="https://cdn.osmos.io/button/embed/v1/OsmosButton.js">&#x3C;/script>
&#x3C;script>
  Osmos.configure({
  schema: {
    fields: [
      {
        name: "ProductID",
        displayName: "ProductID",
        description: "&#x3C;Your field description here>"
      },
      {
        name: "FirstName",
        displayName: "FirstName",
        description: "&#x3C;Your field description here>"
      },
      {
        name: "LastName",
        displayName: "LastName",
        description: "&#x3C;Your field description here>"
      },
      {
        name: 'paymentType',
        displayName: 'Payment Type',
<strong>        description:'The medium of payment which was used to complete the transaction',
</strong>        validOptions: ['cash', 'credit', 'debit', 'paypal']
      }
    ]
  },
  token: "example_some_uploader_token_uuid_example",
  uploadDescription: "&#x3C;Include a description of your uploader upload here which will be shown to users that click the uploader>",
  

  // Set to false to show the schema for the destination connector in the uploader on the file upload screen.
  hideUploadSchema: true,

  // Set to false to show the uploader description on the file upload screen.
  hideUploadDescription: true,

  // Set to false to show the advanced version of the uploader, with formulas, SmartFill, and QuickFixes.
  disableAdvancedMode: true,

  // Maximum number of records displayed in the Uploader UI (User Interface).
  // This value is capped at 100,000 and higher values will default back to 100,000.
  // Can be lowered to increase UI performance when using expensive validators.
  // NOTE: Your file can have >100,000 rows and will be processed fully. There are no limits to how many records can be uploaded.
  //       This setting only limits the number of rows displayed in the UI.
  maxRecords: 100000,

  // Set to true to hide the preview pane screen for CSV files in the uploader.
  hideCSVPreviewPane: false,

});
&#x3C;/script>
&#x3C;button class="ftl-button" onclick="Osmos.handleClick('w9ziodyyfx4mq6wl2tw1y6dpp6tctfardjeuqsl_n0i-gtsbb')">
  Upload Your Data
&#x3C;/button>
&#x3C;!-- End Osmos File Upload Button -->
</code></pre>


---

# 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://docs.osmos.io/developer-docs/uploader-client-side-validation/creating-dropdown-controlled-fields.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.
