> ## Documentation Index
> Fetch the complete documentation index at: https://docs.codenullapp.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Remote Drop-down

> The available configurations for this field are:

The available configurations for this field are:

* Label
* Code
* Label
* Label Span
* Input Span
* Read Only
* Value Field
* Title
* Description
* Avatar
* Selected Item
* Schema Name
* Datasource
* Render in Cards
* Add new item

### Label

Label to be displayed alongside the field, if you don't define a label, the input will be displayed anyway

### Code

The path to the context. This path is used to set/get the value from the context

### Label and Input Span

These props are used to determine the space occupied by the label and the input

### Read Only

Disable the field

### Value Field

This field is used to get/set the selected value from the context. 

For instance, if you remote drop-down fetch a list of People (with `PersonId` and `Name`) and you want to save the `PersonId` you must configure it as the value field.

### Title, Description, and Avatar

These fields allow determining which props of the fetched data you want to display to the users

<figure><img src="https://mintcdn.com/codenull/9RtgKoAtzvpYtN-c/images/UQdBgbIbsD4QDFgPwvnq.png?fit=max&auto=format&n=9RtgKoAtzvpYtN-c&q=85&s=90f14f4cdc30a959696474bfce8ec66a" alt="" width="1080" height="248" data-path="images/UQdBgbIbsD4QDFgPwvnq.png" /><figcaption><p>Remote drop down display fields configuration</p></figcaption></figure>

This configuration results in this:

<figure>
  <img src="https://mintcdn.com/codenull/9RtgKoAtzvpYtN-c/images/HHxmmE08KST0mcM3JGKI.png?fit=max&auto=format&n=9RtgKoAtzvpYtN-c&q=85&s=5f776289030df5a285c6334e13854ebe" alt="" width="954" height="710" data-path="images/HHxmmE08KST0mcM3JGKI.png" />

  <figcaption />
</figure>

### Datasource

More details on [data sources section](/dev/configurations/components/datasources.md)

### Selected Item

In some cases, we need not just save the Id of the selected (`PersonId`) item but the entire item (`Person`) into the context. To save the entire object you must define the path (`SelectedPerson`) where this object will be saved.

### Schema Name

In paginated scenarios, we need to fetch the data plus the selected item, to get the selected item we use the GetById (`Country($Id)`) methods in Graphql, but that sometimes does not match the same name as the GetAll (`Countries($where)`) method used in the data source to fetch all items.

```graphql theme={null}
query Countries($where: JSON) {
  Countries(where: $where) {
    Name
    Id
  }
}
```

For instance, in this query, the schema name to get the selected country is not `Countries` but `Country`

In this case, we need to set the Schema Name to `Country`

### Render In Cards

Allows to render items as Cards

<figure>
  <img src="https://mintcdn.com/codenull/9RtgKoAtzvpYtN-c/images/QC2EFwyVZcJgWcBrtEUc.png?fit=max&auto=format&n=9RtgKoAtzvpYtN-c&q=85&s=da22016ef0041565f747811d1d8f1028" alt="" width="866" height="570" data-path="images/QC2EFwyVZcJgWcBrtEUc.png" />

  <figcaption />
</figure>

### Add new Item

In some cases, you want to allow the users to add an item to the remote drop-down in case it does not exist

<figure>
  <img src="https://mintcdn.com/codenull/9RtgKoAtzvpYtN-c/images/QG487r0vvs8JrNhAYyaK.png?fit=max&auto=format&n=9RtgKoAtzvpYtN-c&q=85&s=31f308bcc4211c137efbf0b34d8bdb22" alt="" width="1934" height="286" data-path="images/QG487r0vvs8JrNhAYyaK.png" />

  <figcaption />
</figure>

When you enable this option you will be asked which feature you want open when clicking the Add New Item button