# Select ## Overview The Select component allows users to select the necessary records from the list. If you search in our Components list, you will find two Select components available, one of them in the *Deprecated* section. * **Deprecated** Select component - a classic version of the component that requires a list of options or a JS array with a specific structure, such as `[{ value: 1, title: 'Name' }];`.

* **Newer** Select component - an enhanced version of the component with additional functionality.\ The component can take in an array of any structure, and users can specify which data keys to use as the option's *id* and *title*. Additionally, the updated version allows customization of per-option styles, including options colors and data types (for example, Date/Time, Text, Number, etc.).

### Properties

Name	Type	Description
`name`	`string`	Component name
`value`	`string \| undefined \|` `(string \| undefined)[]`	Current component value
`autocompleteValue`	`string`	Component autocomplete value
`valid`	`boolean`	Indicates if the component is valid
`validating`	`boolean`	Indicates if the component is validating
`disabled`	`boolean`	Indicates whether the component is disabled
`options`	`SelectOption[]`	Component options

### Methods

Name	Parameters	Returns	Description
`setValue`	`value: any`	`void`	Set component value
`setOptions`	`options: object[]`	`void`	Set options for the select. Options is an array of objects with the following structure: `{` `value: any;` `title: string;` `}`
`setDisabled`	`disabled: boolean`	`void`	Disable or enable the component
`reset`	–	`void`	Reset the component to the initial value
`validate`	–	`void`	Trigger component validation
`resetValidation`	–	`void`	Clear validation errors
`setErrors`	`errors: string \|` `string[] \| null`	`void`	Mark the component as invalid and display errors
`setRequired`	`required: boolean`	`void`	Set component required state

### Triggers

Name	Description
On Change	Triggered when the component's state changes
On Focus	Triggered when the component is in focus
On Blur	Triggered when the component loses focus
On Init	Triggered when the component is initialized

## Working with the component ### Loading options from an API or database Using Select, you can load options dynamically from the server without the need to map the loaded data. Depending on the type of Select you're using (deprecated or new), you will have to do the following to load the data: * **(New)** Assign your action or reference the component that returns an array of objects and set the display of these values in the Select by configuring the *Option title* and *Option value* properties.

* **(Deprecated)** The basic flow here is to specify your options in the form of an array of objects with *value* and *title* keys, for example, `[{ value: 1, title: 'Name' }]`.\ Here's how you can do that: 1. Create an action that loads the data you need, for example, a *Load Table* action to load a list of users. 2. Next, add another step to your Load Table action, select *JavaScript Code* action, and specify the following code to transform data into an array of value/title objects: ```javascript return {{data}}.map((item) => { return { value: item.id, title: item.name }; }); ``` 3. Click on the Select component, switch to the *JS* mode in the **Options** field, and assign your *load data* action there.

Done! Now the deprecated Select component will display a list of options loaded dynamically. #### Setting an array of strings as Select options Another option for the deprecated Select component, if your API returns an array of primitives like strings/numbers, you can the array directly inside the *Options* field without the need to create a value/title object. In this scenario, to extract the options for the Select, you can create an *array of strings* and use it in the component. Here's how you can do that: 1. Create an action loading your data (in our example, it's an *HTTP API* step), turn on the **Transform result** toggle, and add the following code to create an array of strings in the mapper: ```javascript return {{data}}.map(item => item.name) ```

2. Run the action and you'll see the list of names in the *Result* tab that you can use in the Select component. 3. Now, click on the Select component, switch to the *JS* mode in the **Options** field, and assign your *load data* action there.

{% hint style="warning" %} In this scenario, the name will be used both as the *title* and the *value* of the option. If you need to use a different title for the option, you will need to [map the data](#loading-options-from-an-api-or-database) to the UI Bakery format of `{value, title}`. {% endhint %} ### Setting a default value You can pre-select a specific option for the component by specifying the value you need in the Select's *Value* field.

You can also set the component's value dynamically, for example, referencing a value from another component in the Select's *Value* field.

### Using autocomplete If you have a lot of options to choose from, you can enable autocomplete to improve navigation. It will allow users to quickly search through the available options.

### Enabling multiple selection It is also possible to allow multiple options select for the component by enabling the *Multiple select* setting.

If you want to set a default value of a multiple select, you will need to put the array in the curly braces because the Select's *Value* setting is treated as a string by default: ```javascript {{ [‘option 1’, ‘option 2’] }} ```