# Populate custom dropdown

Say you have a default dropdown with predefined values:

<figure><img src="https://1947171238-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LrTaL6FQB3RzlkCwQfN%2Fuploads%2FuA95VSzEHhLEtJ3VLqWJ%2Fimage.png?alt=media&#x26;token=b367f1dc-0cba-4499-b2d7-3d6c6003d668" alt=""><figcaption></figcaption></figure>

We could define in the slide settings the following information:

<figure><img src="https://1947171238-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LrTaL6FQB3RzlkCwQfN%2Fuploads%2FVRJo0iUk28OylZhC94vX%2Fimage.png?alt=media&#x26;token=f70a2f29-a76e-4171-b00f-5ca476f6202d" alt=""><figcaption></figcaption></figure>

This way, we can use the SDK to populate this information based on any condition. For example the colors defined in the slide metadata:

```
function Form() {
    const { slideModel } = useContext(SlideContext);

    let field = slideModel.getFieldById(105);
    field.removeOptions();
    slideModel.getMetaValue('colors').forEach(o => field.addOption(o.id, o.title));

    return (
        <FormFields fields={slideModel.getFields()} />
    );
}
```

The result will be:

<figure><img src="https://1947171238-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LrTaL6FQB3RzlkCwQfN%2Fuploads%2FtPVLqhOoL2ZFwtl4nxtL%2Fimage.png?alt=media&#x26;token=31762b47-d9f9-4be0-94a3-c1f84c372928" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1947171238-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LrTaL6FQB3RzlkCwQfN%2Fuploads%2FLJWsQurkxQ02ypllfYEI%2Fimage.png?alt=media&#x26;token=765c44da-26c2-4ed1-aac7-4f7f1c14f4a6" alt=""><figcaption></figcaption></figure>
