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**Parameters** 18 19| Name | Type | Mandatory| Description | 20| ------- | ---------------------------------------------- | ---- | -------------- | 21| options | Array\<[SelectOption](#selectoption)\> | Yes | Options in the drop-down list box.| 22 23## SelectOption 24 25| Name| Type | Mandatory| Description | 26| ------ | ----------------------------------- | ---- | -------------- | 27| value | [ResourceStr](ts-types.md#resourcestr) | Yes | Value of an option in the drop-down list box.| 28| icon | [ResourceStr](ts-types.md#resourcestr) | No | Icon of an option in the drop-down list box.| 29 30## Attributes 31 32In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. 33 34| Name | Type | Description | 35| ----------------------- | ------------------------------------- | --------------------------------------------- | 36| selected | number \| [Resource](ts-types.md#resource)<sup>11+</sup> | 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 set to an invalid value or is not set, the default value **-1** will be used, which means that no option will be selected. If this attribute is set to **undefined** or **null**, the first option will be selected.<br>Since API version 10, this attribute supports [$$](../../quick-start/arkts-two-way-sync.md) for two-way binding of variables.| 37| value | [ResourceStr](ts-types.md#resourcestr)<sup>11+</sup> | Text of the drop-down button. By default, it will be replaced by the content of the selected option.<br>Since API version 10, this attribute supports [$$](../../quick-start/arkts-two-way-sync.md) for two-way binding of variables.| 38| font | [Font](ts-types.md#font) | Text font of the drop-down button.<br>Default value:<br>{<br>size: '16fp',<br>weight: FontWeight.Medium<br>} <br>**NOTE**<br>When **size** is set to **0**, the text is not displayed. When **size** is set to a negative value, the text is displayed at its default size.| 39| fontColor | [ResourceColor](ts-types.md#resourcecolor) | Text color of the drop-down button.<br>Default value: **'\#E5182431'**| 40| selectedOptionBgColor | [ResourceColor](ts-types.md#resourcecolor) | Background color of the selected option in the drop-down list box.<br>Default value: **'\#33007DFF'**| 41| selectedOptionFont | [Font](ts-types.md#font) | Text font of the selected option in the drop-down list box.<br>Default value:<br>{<br>size: '16fp',<br>weight: FontWeight.Regular<br>} <br>**NOTE**<br>When **size** is set to **0**, the text is not displayed. When **size** is set to a negative value, the text is displayed at its default size.| 42| selectedOptionFontColor | [ResourceColor](ts-types.md#resourcecolor) | Text color of the selected option in the drop-down list box.<br>Default value: **'\#ff007dff'**| 43| optionBgColor | [ResourceColor](ts-types.md#resourcecolor) | Background color of an option in the drop-down list box.<br>Default value: **'\#ffffffff'**| 44| optionFont | [Font](ts-types.md#font) | Text font of an option in the drop-down list box.<br>Default value:<br>{<br>size: '16fp',<br>weight: FontWeight.Regular<br>}<br>**NOTE**<br>When **size** is set to **0**, the text is not displayed. When **size** is set to a negative value, the text is displayed at its default size.| 45| optionFontColor | [ResourceColor](ts-types.md#resourcecolor) | Text color of an option in the drop-down list box.<br>Default value: **'\#ff182431'**| 46| space<sup>10+</sup> | [Length](ts-types.md#length) | Spacing between the text and arrow of an option.<br>**NOTE**<br>This attribute cannot be set in percentage.| 47| arrowPosition<sup>10+</sup> | [ArrowPosition](#arrowposition10) | Alignment between the text and arrow of an option.<br>Default value: **ArrowPosition.END**| 48| menuAlign<sup>10+</sup> | alignType: [MenuAlignType](#menualigntype10),<br> offset?: [Offset](ts-types.md#offset) | Alignment between the drop-down button and the drop-down menu.<br> - **alignType**: alignment type. Mandatory.<br>Default value: **MenuAlignType.START**<br> - **offset**: offset of the drop-down menu relative to the drop-down button after alignment based on the specified alignment type.<br> Default value: **{dx: 0, dy: 0}**| 49| optionWidth<sup>11+</sup> | [Dimension](ts-types.md#dimension10) \| [OptionWidthMode](#optionwidthmode11) | Width of the option in the drop-down list box. **OptionWidthMode** specifies whether to inherit the width of the drop-down list button.<br>If set to **undefined**, null, or a negative number, this attribute does not take effect. In this case, the default width of two columns is used.<br>If the value is less than the minimum width 56 vp, the default width of two columns is used. The value must be greater than or equal to 0.<br>**NOTE**<br>This attribute cannot be set in percentage.| 50| optionHeight<sup>11+</sup> | [Dimension](ts-types.md#dimension10) | Maximum height of the option in the drop-down list box. The default and maximum value is 80% of the available height of the screen.<br>If set to **undefined**, null, or a negative number, this attribute does not take effect. In this case, the default value is used.<br>The value must be greater than 0 If the actual height of all options in the drop-down list box is less than the preset height, the options are displayed at their actual height.<br>**NOTE**<br>This attribute cannot be set in percentage.| 51 52## OptionWidthMode<sup>11+</sup> 53 54| Name | Description | 55| ----------- | ------------------------------ | 56| FIT_CONTENT | Uses the default width, that is, width of two columns. | 57| FIT_TRIGGER | Inherits the width of the drop-down list button.| 58 59## ArrowPosition<sup>10+</sup> 60 61| Name | Description | 62| ------------------- | ------------------ | 63| END<sup>10+</sup> | The text is in front of the arrow.| 64| START<sup>10+</sup> | The arrow is in front of the text.| 65 66 67## MenuAlignType<sup>10+</sup> 68 69| Name | Description | 70| ------------------- | ------------------ | 71| START | Aligned with the start edge in the same direction as the language in use.| 72| CENTER | Aligned with the center.| 73| END | Aligned with the end edge in the same direction as the language in use.| 74 75## Events 76 77| Name | Description | 78| ------------------------------------------------------------ | ------------------------------------------------------------ | 79| 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.| 80 81## Example 82 83```ts 84// xxx.ets 85@Entry 86@Component 87struct SelectExample { 88 @State text: string = "TTTTT" 89 @State index: number = 2 90 @State space: number = 8 91 @State arrowPosition: ArrowPosition = ArrowPosition.END 92 build() { 93 Column() { 94 Select([{ value: 'aaa', icon: $r("app.media.selecticon") }, 95 { value: 'bbb', icon: $r("app.media.selecticon") }, 96 { value: 'ccc', icon: $r("app.media.selecticon") }, 97 { value: 'ddd', icon: $r("app.media.selecticon") }]) 98 .selected(this.index) 99 .value(this.text) 100 .font({ size: 16, weight: 500 }) 101 .fontColor('#182431') 102 .selectedOptionFont({ size: 16, weight: 400 }) 103 .optionFont({ size: 16, weight: 400 }) 104 .space(this.space) 105 .arrowPosition(this.arrowPosition) 106 .menuAlign(MenuAlignType.START, {dx:0, dy:0}) 107 .optionWidth(200) 108 .optionHeight(100) 109 .onSelect((index:number, text?: string | undefined)=>{ 110 console.info('Select:' + index) 111 this.index = index; 112 if(text){ 113 this.text = text; 114 } 115 }) 116 }.width('100%') 117 } 118} 119``` 120 121 122
