1# Select 2 3The **<Select\>** component provides a drop-down list box that allows users to select among multiple options. 4 5> **NOTE** 6> 7> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. 8 9## Child Components 10 11Not supported 12 13## APIs 14 15Select(options: Array\<[SelectOption](#selectoption)\>) 16 17## SelectOption 18 19| Name| Type | Mandatory| Description | 20| ------ | ----------------------------------- | ---- | -------------- | 21| value | [ResourceStr](ts-types.md#resourcestr) | Yes | Value of an option in the drop-down list box.| 22| icon | [ResourceStr](ts-types.md#resourcestr) | No | Icon of an option in the drop-down list box.| 23 24## Attributes 25 26| Name | Type | Description | 27| ----------------------- | ------------------------------------- | --------------------------------------------- | 28| selected | number | Index of the initial selected option in the drop-down list box. The index of the first option is **0**.<br>If this attribute is not set, the default value **-1** is used, indicating that no option is selected.| 29| value | string | Text of the drop-down button. | 30| font | [Font](ts-types.md#font) | Text font of the drop-down button. | 31| fontColor | [ResourceColor](ts-types.md#resourcecolor) | Text color of the drop-down button. | 32| selectedOptionBgColor | [ResourceColor](ts-types.md#resourcecolor) | Background color of the selected option in the drop-down list box. | 33| selectedOptionFont | [Font](ts-types.md#font) | Text font of the selected option in the drop-down list box. | 34| selectedOptionFontColor | [ResourceColor](ts-types.md#resourcecolor) | Text color of the selected option in the drop-down list box. | 35| optionBgColor | [ResourceColor](ts-types.md#resourcecolor) | Background color of an option in the drop-down list box. | 36| optionFont | [Font](ts-types.md#font) | Text font of an option in the drop-down list box. | 37| optionFontColor | [ResourceColor](ts-types.md#resourcecolor) | Text color of an option in the drop-down list box. | 38 39## Events 40 41| Name | Description | 42| ----------------------------------------------------------- | ------------------------------------------------------------ | 43| onSelect(callback: (index: number, value?: string) => void) | Invoked when an option in the drop-down list box is selected.<br>**index**: index of the selected option.<br>**value**: value of the selected option. | 44 45## Example 46 47```ts 48// xxx.ets 49@Entry 50@Component 51struct SelectExample { 52 build() { 53 Column() { 54 Select([{ value: 'aaa', icon: "/common/public_icon.svg" }, 55 { value: 'bbb', icon: "/common/public_icon.svg" }, 56 { value: 'ccc', icon: "/common/public_icon.svg" }, 57 { value: 'ddd', icon: "/common/public_icon.svg" }]) 58 .selected(2) 59 .value('TTTTT') 60 .font({ size: 16, weight: 500 }) 61 .fontColor('#182431') 62 .selectedOptionFont({ size: 16, weight: 400 }) 63 .optionFont({ size: 16, weight: 400 }) 64 .onSelect((index: number) => { 65 console.info('Select:' + index) 66 }) 67 }.width('100%') 68 } 69} 70``` 71 72 73
