> For the complete documentation index, see [llms.txt](https://appmaster.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://appmaster.gitbook.io/docs/web-apps/components-list/select.md).

# Select

## Initial settings

**Mode** - choose *Multiple* for being able to select multiple options from the dropdown. Otherwise, *Single* mode should be used.

![](/files/PJDCouW09OWzIzc6INat)

## Look\&Feel Settings

**Label** (not mantory) to be used to show the component's label.

**Placeholder** (not mandatory) to be used to show the component's placeholder.

**Name** (mandatory) - name of the component.

**Size** (mandatory) - size of the component. Is set to *Default* when component is created.

**Search** (mandatory) - to be able to search within available dropdown options. Is turned off by default. 

**Clear icon** (mandatory) - shows clear options icon if enabled. Is turned off by default.

**Disabled** (mandatory) - makes the component disabled if turned on. Is turned off by default.

**Visible** (mandatory) - makes the component visible if turned on. Enabled by default.

![](/files/jrNU9fG1qRV43CmfIbaa)

## Options

**Select Options** can be predefined in the component settings.

![](/files/D2EmGlrWuoKJf24vbhgo)

## Workflow triggers

* **onChange** - fires when the dropdown option is changed.
* **onFocus** - fires when the Select component is being focused on.
* **onBlur** - fires when the Select component is blurred.
* **onCreate -** fires when the component is created.
* **onDestroy** - fires when the component is shown.

## Component Actions

### Select Get Properties

Gets the component's properties.

**Input** parameters:

* **Component Id** \[string] *-* Select component's identifier;

**Output** parameters:

* **Label** \[*string*] - component's label;
* **Placeholder** \[*string*] - component's placeholder;
* **Allow Clear** \[*boolean*] - allows clear the selection if *true*;
* **Disable** \[*boolean*] - disables component if *true*;
* **Tooltip** \[*string*] - tooltip string;
* **Required Mark** \[*boolean*] - shows required mark if *true*;
* **Debounce** (ms) \[*integer*] - delay to validate the value;
* **Options** \[*Select Option array*] - an array of predefined select options;
* **Selected** \[*Select Option array*] - an array of selected options or just an array with single element in case of *Single Mode*;
* **Validate Icon** \[*boolean*] - icon to be shown on validate the value;
* **Validate Status** \[*Status type*] - status to be shown on validate the value; 
* **Validate Message** \[*string*] - message to be shown on validate the value;

![](/files/clr53KG1i0ZOjg7FHjVB)

### Select Set Properties

Sets the component's properties.

**Input** parameters:

* **Component Id** \[string] *-* Select component's identifier;
* **Label** \[*string*] - component's label;
* **Placeholder** \[*string*] - component's placeholder;
* **Allow Clear** \[*boolean*] - allows clear the selection if *true*;
* **Disable** \[*boolean*] - disables component if *true*;
* **Tooltip** \[*string*] - tooltip string;
* **Required Mark** \[*boolean*] - shows required mark if *true*;
* **Debounce** (ms) \[*integer*] - delay to validate the value;
* **Options** \[*Select Option array*] - an array of predefined select options;
* **Validate Icon** \[*boolean*] - icon to be shown on validate the value;
* **Validate Status** \[*Status type*] - status to be shown on validate the value; 
* **Validate Message** \[*string*] - message to be shown on validate the value;

![](/files/0TMqBLwzPdqgRXjwu597)

### Select Update Properties

Updates component's properties.

**Input** parameters:

* **Component Id** \[string] *-* Select component's identifier;
* **Label** \[*string*] - component's label;
* **Placeholder** \[*string*] - component's placeholder;
* **Allow Clear** \[*boolean*] - allows clear the selection if *true*;
* **Disable** \[*boolean*] - disables component if *true*;
* **Tooltip** \[*string*] - tooltip string;
* **Required Mark** \[*boolean*] - shows required mark if *true*;
* **Debounce** (ms) \[*integer*] - delay to validate the value;
* **Options** \[*Select Option array*] - an array of predefined select options;
* **Validate Icon** \[*boolean*] - icon to be shown on validate the value;
* **Validate Status** \[*Status type*] - status to be shown on validate the value; 
* **Validate Message** \[*string*] - message to be shown on validate the value;

![](/files/l0pkzIfE8fNtzqg8HMFU)

### Make Select Option

Composes Select Option model with the given fields.

**Input** parameters:

* **ID** \[*integer*] - Select Option ID;
* **Label** \[*string*] - Select Option's label;
* **Value** \[*integer*] - Select Option's order value in the dropdown list;
* **Icon** \[*string*] - icon to be used in the Select Option item;
* **Disabled** \[boolean] - disables the Select Option if true;

**Output** parameters:

* **Select Option** \[*Select Option*] - Select Option model;

![](/files/0rJlrWzlGFDCP1KnWwsz)

### Expand Select Option

Expands Select Option model.

**Input** parameters:

* **Select Option** \[*Select Option*] - Select Option model;

**Output** parameters:

* **ID** \[*integer*] - Select Option ID;
* **Label** \[*string*] - Select Option's label;
* **Value** \[*integer*] - Select Option's order value in the dropdown list;
* **Icon** \[*string*] - icon to be used in the Select Option item;
* **Disabled** \[boolean] - disables the Select Option if true;

![](/files/ezdoUGx2b6JlYu02MHP3)

## Usage example

It is possible to compose and add new Select Option items into the dropdown list via frontend business processes. 

The logic should be following:

* Compose a new Select Option item with specified fields (**Make Select Option**)

![](/files/3wvCvYRE2qvunw0AxcrY)

* Get the existing Select Option items array (Select Get Properties) and merge it with the Select Option item created earlier (**Append Array**)

![](/files/KPvDpa1UM3Wm6tKbc6GR)

* Update Select Option items array (**Select Update Properties**) for the specified Select component

![](/files/ap3j8WJJ7GX5pjrYWwE8)