# Drop-Down

## **Element Description**

The **Drop-Down** field allows users to select an option from a predefined list during checkout. It is useful for offering a selection of predefined choices without requiring the customer to manually input text.&#x20;

<figure><img src="/files/PMLrGNENXrXrRI7PuN8V" alt=""><figcaption></figcaption></figure>

**Sample Use Cases**

* Offer a selection of shipping methods.
* Provide a list of countries or regions for delivery.
* Allow customers to select a preferred option from a custom list (e.g., t-shirt sizes, gift wrap options).

<figure><img src="/files/lyzd6sVYsdSP8abYxxA1" alt=""><figcaption><p>Sample Drop-Down</p></figcaption></figure>

## **Drop-Down** Field Settings

<figure><img src="/files/mtIpS8aZT9qKmzihVd1Q" alt=""><figcaption></figcaption></figure>

* **Label** – The name of the field displayed to customers on the checkout page.
* **Placeholder** – The text that appears inside the dropdown before the customer selects an option.
* **Description** – Additional information or instructions about the dropdown, displayed below the field.
* **Enable/Disable Field** – Allows you to enable or disable the field based on your needs. If it is disabled, the element will not be displayed in the checkout form, you can enable it anytime from the checkout builder according to your needs.
* **Is Required** – When enabled, customers must select an option from the dropdown before completing their purchase.
* **Options** – Customize the available options by setting the **Label** (what the customer sees) and **Value** (backend value associated with each option). You can add, edit, or delete options as needed:
  * <picture><source srcset="/files/CQ5w306TciOPhW3B4guz" media="(prefers-color-scheme: dark)"><img src="/files/rt8oYLpasni9HbZS7eaK" alt=""></picture> - use the drag-and-drop function to reorder options
  * <picture><source srcset="/files/tOITZpAUWY6z1kZEkM7z" media="(prefers-color-scheme: dark)"><img src="/files/6J4mJDVz4WZHSRR1FazY" alt=""></picture> - use this to delete the options
  * **Add new** - use this button to add new options
* **Default Value** – Set a default selection that will appear automatically when the page loads.

**Advanced Settings**

* **Custom Class Name** – Add [**custom CSS classes**](/checkout-custom-fields-builder-for-woocommerce/plugin-features/custom-classes.md) for styling or additional functionality for the dropdown field.


---

# 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.stylemixthemes.com/checkout-custom-fields-builder-for-woocommerce/checkout-builder-elements/drop-down.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.
