# Select

The **Select** component allows the user to select an entry in a droplist.&#x20;

{% hint style="info" %}
A full example setup on **Select** is available in our [Showroom](https://showroom.appfarm.app/ui-components/select). You can view a demo, as well as access the setup in Appfarm Create. If you do not have access, you may register on [Showroom Signup](https://showroom.appfarm.app/sign-up).
{% endhint %}

## Properties

### Selection Type

The Select component has two types - `Basic` and `Property`.

* `Property` allows the user to choose an entry from a list of options, and the option selected is stored in a property or variable (defined by the `Value` setting). \
  **Example**: A droplist where you select the `Department` for a `Project`. The options are the Departments, and the value to be set it the `Project.Department` reference.
* `Basic` allows the user to choose an entry from a list of options, and when an entry is selected, that entry is marked as [selected](https://docs.appfarm.io/reference/platform-concepts/objects#object-selection) in the data source holding the options.\
  **Example**: A data source `Projects` holds all project you have access to. When selecting a Project in the list, that project is marked as selected. This is useful when you have a UI that displays information about the selected Project, and for example if you have a `Tasks` data source that is filtered towards the selected Project.

{% hint style="info" %}
Differences between these selection types are illustrated in the Showroom.
{% endhint %}

### Options

This is available for `Basic` type only. This allows the user to select the Data Source that holds the options which the user can choose from.&#x20;

### Display Value

This is available for `Basic` type only. Select the property of the Data Source used in `Options` that should be displayed to the user.

### Value

This is available for `Property` type only. This is where the property to connect to the **Select** is chosen. For instance, selecting `Order.Category` here will display a list of all available Categories. Choosing an option will assign the `Category` property to the appropriate `Order` object.

### Filter

This is available for `Basic` type only. If you do not want all entries of the Data Source to be selectable, you may apply a filter here to limit the rows of the **Select**.

### Conditional Filter

This is available for `Basic` type only. In addition to the Filter property, you may also choose to have a dynamic filter on the Data Source, applied given certain conditions.

### Conditional Options

This is available for `Property` type only. This allows you to define conditions, and which options are available to the user in each of those conditions. The first condition that evaluates to `true` will be used. All properties will be available for selection if no conditions are defined, or if they all evaluate to `false`.

### Sorting

This is available for `Basic` type only. This allows you to select a property to sort by, which will affect the order in which options will appear to the user.

### Allow Null

This is available for `Property` type only. This will insert a clear value into the list of options, to allow the user to clear the selection.

{% hint style="info" %}
It is recommended to use a Placeholder for this so that the meaning of this blank value is properly communicated to the user.
{% endhint %}

### Autocomplete

This is available for both Select types. If the list of options is long, you should consider checking this setting. It allows for searching the options of the **Select**.

### Error

This is available for both Select types. Here you can select a value to assign an error state to the component.

### Event Handlers

Event Handlers can detect a specific event occurring in Appfarm Create and can link these events to actions. Three Event Handlers are available for the **Select** component:

**On Value Change**: This Event Handler will run an action when a change is detected in the data source bound to the component. For example, if the data input changes from false to true, or vice versa, a specific action can be performed.

**On Open**: Specify an action to run when the droplist is opened.

**On Close**: Specify an action to run when the droplist is closed.


---

# 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.appfarm.io/library/ui-components/select.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.
