1# Select 2 3The **Select** component provides a drop-down menu 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>) 16 17**Atomic service API**: This API can be used in atomic services since API version 11. 18 19**System capability**: SystemCapability.ArkUI.ArkUI.Full 20 21**Parameters** 22 23| Name | Type | Mandatory| Description | 24| ------- | ---------------------------------------------- | ---- | -------------- | 25| options | Array\<[SelectOption](#selectoption)\> | Yes | Options of the drop-down menu.| 26 27## SelectOption 28 29Provides information about the drop-down menu options. 30 31**System capability**: SystemCapability.ArkUI.ArkUI.Full 32 33| Name| Type | Mandatory| Description | 34| ------ | ----------------------------------- | ---- | -------------- | 35| value | [ResourceStr](ts-types.md#resourcestr) | Yes | Value of the drop-down menu option.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 36| icon | [ResourceStr](ts-types.md#resourcestr) | No | Icon of the drop-down menu option.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 37| symbolIcon<sup>12+</sup> | [SymbolGlyphModifier](ts-universal-attributes-attribute-modifier.md) | No | Symbol icon of drop-down menu option.<br>**symbolIcon** takes precedence over **icon**.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 38 39## Attributes 40 41In addition to the [universal attributes](ts-component-general-attributes.md), the following attributes are supported. 42 43### selected 44 45selected(value: number | Resource) 46 47Sets the index of the initially selected option in the drop-down menu, where the first option has an index of 0. When **selected** is set to an invalid value or is not set, the default default **-1** is used, which indicates no selection. When **selected** is set to **undefined** or **null**, the first option is selected. 48 49Since API version 10, this attribute supports two-way binding through [$$](../../../ui/state-management/arkts-two-way-sync.md). 50Since API version 18, this attribute supports two-way binding through [!!](../../../ui/state-management/arkts-new-binding.md#two-way-binding-between-built-in-component-parameters). 51 52**Atomic service API**: This API can be used in atomic services since API version 11. 53 54**System capability**: SystemCapability.ArkUI.ArkUI.Full 55 56**Parameters** 57 58| Name| Type | Mandatory| Description | 59| ------ | ------------------------------------------------------------ | ---- | ------------------------ | 60| value | number \| [Resource](ts-types.md#resource)<sup>11+</sup> | Yes | Index of the initially selected option. The index is zero-based.| 61 62### selected<sup>18+</sup> 63 64selected(numCount: Optional<number | Resource>) 65 66Sets the index of the initially selected option in the drop-down menu, where the first option has an index of 0. When **selected** is set to an invalid value or is not set, the default default **-1** is used, which indicates no selection. When **selected** is set to **undefined** or **null**, the first option is selected. 67 68This attribute supports two-way binding through [$$](../../../ui/state-management/arkts-two-way-sync.md) and [!!](../../../ui/state-management/arkts-new-binding.md#two-way-binding-between-built-in-component-parameters). 69 70**Atomic service API**: This API can be used in atomic services since API version 18. 71 72**System capability**: SystemCapability.ArkUI.ArkUI.Full 73 74**Parameters** 75 76| Name | Type | Mandatory| Description | 77| -------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 78| numCount | [Optional](ts-universal-attributes-custom-property.md#optional12)\<number \| [Resource](ts-types.md#resource)> | Yes | Index of the initially selected option.<br>When **numCount** is set to **undefined**, the first option is selected.| 79 80### value 81 82value(value: ResourceStr) 83 84Sets the text content of drop-down button. After a menu option is selected, the button text will automatically update to display the selected option's text. 85 86Since API version 10, this attribute supports two-way binding through [$$](../../../ui/state-management/arkts-two-way-sync.md). 87Since API version 18, this attribute supports two-way binding through [!!](../../../ui/state-management/arkts-new-binding.md#two-way-binding-between-built-in-component-parameters). 88 89**Atomic service API**: This API can be used in atomic services since API version 11. 90 91**System capability**: SystemCapability.ArkUI.ArkUI.Full 92 93**Parameters** 94 95| Name| Type | Mandatory| Description | 96| ------ | ---------------------------------------------------- | ---- | ------------------------ | 97| value | [ResourceStr](ts-types.md#resourcestr)<sup>11+</sup> | Yes | Text of the drop-down button.<br>**NOTE**<br>If the text exceeds the column width, it will be truncated.| 98 99### value<sup>18+</sup> 100 101value(resStr: Optional\<ResourceStr>) 102 103Sets the text content of drop-down button. After a menu option is selected, the button text will automatically update to display the selected option's text. Compared with [value](#value), this API supports the **undefined** type for the **resStr** parameter. 104 105This attribute supports two-way binding through [$$](../../../ui/state-management/arkts-two-way-sync.md) and [!!](../../../ui/state-management/arkts-new-binding.md#two-way-binding-between-built-in-component-parameters). 106 107**Atomic service API**: This API can be used in atomic services since API version 18. 108 109**System capability**: SystemCapability.ArkUI.ArkUI.Full 110 111**Parameters** 112 113| Name| Type | Mandatory| Description | 114| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 115| resStr | [Optional](ts-universal-attributes-custom-property.md#optional12)\<[ResourceStr](ts-types.md#resourcestr)> | Yes | Text of the drop-down button.<br>If **resStr** is set to **undefined**, the previous value is retained.| 116 117### controlSize<sup>12+</sup> 118 119controlSize(value: ControlSize) 120 121Sets the size of the **Select** component. 122 123**Atomic service API**: This API can be used in atomic services since API version 12. 124 125**System capability**: SystemCapability.ArkUI.ArkUI.Full 126 127**Parameters** 128 129| Name| Type | Mandatory| Description | 130| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------- | 131| value | [ControlSize](ts-basic-components-button.md#controlsize11)<sup>11+</sup> | Yes | Size of the **Select** component.<br>Default value: **ControlSize.NORMAL**.| 132 133The priorities of **controlSize**, **width**, and **height** are as follows: 134 135 1. If only **width** and **height** are set and the text is too large to fit in the component, the text exceeds the component size and overflow text is displayed as an ellipsis (...). 136 137 2. If **controlSize** is set but **width** and **height** are not set, the component size automatically adapts to the text content. The text will not exceed the component, and the **minWidth** and **minHeight** settings are automatically applied. 138 139 3. If **controlSize**, **width**, and **height** are all set, the values of **width** and **height** take effect. However, if the values of **width** and **height** are less than the values of **minWidth** and **minHeight** set by **controlSize**, they will not take effect. In this case, the minimum width (**minWidth**) and minimum height (**minHeight**) settings will be enforced instead. 140 141### controlSize<sup>18+</sup> 142 143controlSize(size: Optional\<ControlSize>) 144 145Sets the size of the **Select** component. Compared with [controlSize](#controlsize12)<sup>12+</sup>, this API supports the **undefined** type for **size** parameter. 146 147**Atomic service API**: This API can be used in atomic services since API version 18. 148 149**System capability**: SystemCapability.ArkUI.ArkUI.Full 150 151**Parameters** 152 153| Name| Type | Mandatory| Description | 154| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 155| size | [Optional](ts-universal-attributes-custom-property.md#optional12)\<[ControlSize](ts-basic-components-button.md#controlsize11)> | Yes | Size of the **Select** component.<br>If **size** is set to **undefined**, the default value **ControlSize.NORMAL** is used.| 156 157The priorities of **controlSize**, **width**, and **height** are as follows: 158 159 1. If only **width** and **height** are set and the text is too large to fit in the component, the text exceeds the component size and overflow text is displayed as an ellipsis (...). 160 161 2. If **controlSize** is set but **width** and **height** are not set, the component size automatically adapts to the text content. The text will not exceed the component, and the **minWidth** and **minHeight** settings are automatically applied. 162 163 3. If **controlSize**, **width**, and **height** are all set, the values of **width** and **height** take effect. However, if the values of **width** and **height** are less than the values of **minWidth** and **minHeight** set by **controlSize**, they will not take effect. In this case, the minimum width (**minWidth**) and minimum height (**minHeight**) settings will be enforced instead. 164 165### menuItemContentModifier<sup>12+</sup> 166 167menuItemContentModifier(modifier: ContentModifier\<MenuItemConfiguration>) 168 169Creates a content modifier for the drop-down menu. After **menuItemContentModifier** is applied, the drop-down menu content will be completely customized by the developer, and the **Select** component's attributes, including the divider, option color, and drop-down menu font color, will not take effect. 170 171**Atomic service API**: This API can be used in atomic services since API version 12. 172 173**System capability**: SystemCapability.ArkUI.ArkUI.Full 174 175**Parameters** 176 177| Name| Type | Mandatory| Description | 178| ------ | --------------------------------------------- | ---- | ------------------------------------------------ | 179| modifier | [ContentModifier\<MenuItemConfiguration>](#menuitemconfiguration12) | Yes | Content modifier to apply to the drop-down menu.<br>**modifier**: content modifier. You need a custom class to implement the **ContentModifier** API.| 180 181### menuItemContentModifier<sup>18+</sup> 182 183menuItemContentModifier(modifier: Optional\<ContentModifier\<MenuItemConfiguration>>) 184 185Creates a content modifier for the drop-down menu. Compared with [menuItemContentModifier](#menuitemcontentmodifier12)<sup>12+</sup>, this API supports the **undefined** type for **modifier** parameter. After **menuItemContentModifier** is applied, the drop-down menu content will be completely customized by the developer, and the **Select** component's attributes, including the divider, option color, and drop-down menu font color, will not take effect. 186 187**Atomic service API**: This API can be used in atomic services since API version 18. 188 189**System capability**: SystemCapability.ArkUI.ArkUI.Full 190 191**Parameters** 192 193| Name | Type | Mandatory| Description | 194| -------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 195| modifier | [Optional](ts-universal-attributes-custom-property.md#optional12)\<[ContentModifier\<MenuItemConfiguration>](#menuitemconfiguration12)> | Yes | Content modifier to apply to the drop-down menu.<br>**modifier**: content modifier. You need a custom class to implement the **ContentModifier** API.<br>If **modifier** is set to **undefined**, no content modifier is used.| 196 197### divider<sup>12+</sup> 198 199divider(options: Optional\<DividerOptions> | null) 200 201Sets the divider style. If this attribute is not set, the divider is displayed based on the default value. 202 203**Atomic service API**: This API can be used in atomic services since API version 12. 204 205**System capability**: SystemCapability.ArkUI.ArkUI.Full 206 207**Parameters** 208 209| Name| Type | Mandatory| Description | 210| ------ | ------- | ---- | --------------------------------------------------------------------- | 211| options | Optional\<[DividerOptions](ts-basic-components-textpicker.md#divideroptions12)> \| null | Yes | Divider options.<br>1. If **DividerOptions** is set, the divider is displayed in the configured style.<br>Default value:<br>{<br>strokeWidth: '1px' , <br>color: '#33182431'<br>}<br>2. If this parameter is set to **null**, the divider is not displayed.<br>3. If the value of **strokeWidth** is too larger, the divider may overlap the text. The divider extends both upwards and downwards from the bottom of each item.<br>4. The default values for **startMargin** and **endMargin** are consistent with the style of the divider when the **divider** attribute is not set. If the sum of **startMargin** and **endMargin** is equal to the value of **optionWidth**, the divider is not displayed. If the sum of **startMargin** and **endMargin** exceeds the value of **optionWidth**, the divider line is displayed in the default style.| 212 213### dividerStyle<sup>19+</sup> 214 215dividerStyle(style: Optional\<DividerStyleOptions>) 216 217Sets the divider style. If this attribute is not set, the divider is displayed based on the default value. This attribute cannot be used together with the **divider** attribute. The last one called will take effect. 218 219**Atomic service API**: This API can be used in atomic services since API version 19. 220 221**System capability**: SystemCapability.ArkUI.ArkUI.Full 222 223**Parameters** 224 225| Name| Type | Mandatory| Description | 226| ------ | ------- | ---- | --------------------------------------------------------------------- | 227| style | Optional\<[DividerStyleOptions](ts-types.md#dividerstyleoptions12)> | Yes | Divider options.<br>1. If **DividerOptions** is set, the divider is displayed in the configured style.<br>Default value:<br>{<br>strokeWidth: '1px' , <br>color: '#33182431'<br>}<br>2. If this parameter is set to **null** or **undefined**, the default divider is displayed.<br>3. When **mode** is set to **FLOAT_ABOVE_MENU**, be careful with the **strokeWidth** settings to avoid covering text. The divider extends both upwards and downwards from the bottom of each item. When **mode** is **EMBEDDED_IN_MENU**, the divider expands to fill its own space within the menu.<br>4. The default values for **startMargin** and **endMargin** are consistent with the style of the divider when the **divider** attribute is not set. If the sum of **startMargin** and **endMargin** is equal to the value of **optionWidth**, the divider is not displayed. If the sum of **startMargin** and **endMargin** exceeds the value of **optionWidth**, the divider line is displayed in the default style.| 228 229### font 230 231font(value: Font) 232 233Sets the text style of the drop-down button. 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. 234 235**Atomic service API**: This API can be used in atomic services since API version 11. 236 237**System capability**: SystemCapability.ArkUI.ArkUI.Full 238 239**Parameters** 240 241| Name| Type | Mandatory| Description | 242| ------ | ------------------------ | ---- | ------------------------------------------------------------ | 243| value | [Font](ts-types.md#font) | Yes | Text style of the drop-down list button.<br>Default value:<br>API version 11 and earlier versions:<br>{<br>size: `$r('sys.float.ohos_id_text_size_button1')`,<br>weight: FontWeight.Medium<br>} <br>Since API version 12: The default value of **size** is **$r('sys.float.ohos_id_text_size_button2')** in the case of **controlSize.SMALL** and **$r('sys.float.ohos_id_text_size_button1')** in other cases.| 244 245### font<sup>18+</sup> 246 247font(selectFont: Optional\<Font>) 248 249Sets the text style of the drop-down button. 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. Compared with [font](#font), this API supports the **undefined** type for the **selectFont** parameter. 250 251**Atomic service API**: This API can be used in atomic services since API version 18. 252 253**System capability**: SystemCapability.ArkUI.ArkUI.Full 254 255**Parameters** 256 257| Name | Type | Mandatory| Description | 258| ---------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 259| selectFont | [Optional](ts-universal-attributes-custom-property.md#optional12)\<[Font](ts-types.md#font)> | Yes | Text style of the drop-down list button.<br>If **controlSize** is set to **controlSize.SMALL**, the default value of **size** is **$r('sys.float.ohos_id_text_size_button2')**. Otherwise, the default value is **$r('sys.float.ohos_id_text_size_button1')**.<br>If **selectFont** is set to **undefined**, the default font style is used.| 260 261### fontColor 262 263fontColor(value: ResourceColor) 264 265Sets the font color of the drop-down button. 266 267**Atomic service API**: This API can be used in atomic services since API version 11. 268 269**System capability**: SystemCapability.ArkUI.ArkUI.Full 270 271**Parameters** 272 273| Name| Type | Mandatory| Description | 274| ------ | ------------------------------------------ | ---- | ------------------------------------------------------------ | 275| value | [ResourceColor](ts-types.md#resourcecolor) | Yes | Font color of the drop-down button.<br>Default value: **$r('sys.color.ohos_id_color_text_primary')** with the opacity of **$r('sys.color.ohos_id_alpha_content_primary')**| 276 277### fontColor<sup>18+</sup> 278 279fontColor(resColor: Optional\<ResourceColor>) 280 281Sets the font color of the drop-down button. Compared with [fontColor](#fontcolor), this API supports the **undefined** type for the **resColor** parameter. 282 283**Atomic service API**: This API can be used in atomic services since API version 18. 284 285**System capability**: SystemCapability.ArkUI.ArkUI.Full 286 287**Parameters** 288 289| Name | Type | Mandatory| Description | 290| -------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 291| resColor | [Optional](ts-universal-attributes-custom-property.md#optional12)\<[ResourceColor](ts-types.md#resourcecolor)> | Yes | Font color of the drop-down button.<br>When **resColor** is set to **undefined**, the default value is a blend of **$r('sys.color.ohos_id_color_text_primary')** with the opacity of **$r('sys.color.ohos_id_alpha_content_primary')**.<br>If **value** is set to **undefined**, the previous value is retained.| 292 293### selectedOptionBgColor 294 295selectedOptionBgColor(value: ResourceColor) 296 297Sets the background color of the selected option in the drop-down menu. 298 299**Atomic service API**: This API can be used in atomic services since API version 11. 300 301**System capability**: SystemCapability.ArkUI.ArkUI.Full 302 303**Parameters** 304 305| Name| Type | Mandatory| Description | 306| ------ | ------------------------------------------ | ---- | ------------------------------------------------------------ | 307| value | [ResourceColor](ts-types.md#resourcecolor) | Yes | Background color of the selected option in the drop-down menu.<br>Default value: **$r('sys.color.ohos_id_color_component_activated')** with the opacity of **$r('sys.color.ohos_id_alpha_highlight_bg')**| 308 309### selectedOptionBgColor<sup>18+</sup> 310 311selectedOptionBgColor(resColor: Optional\<ResourceColor>) 312 313Sets the background color of the selected option in the drop-down menu. Compared with [selectedOptionBgColor](#selectedoptionbgcolor), this API supports the **undefined** type for the **resColor** parameter. 314 315**Atomic service API**: This API can be used in atomic services since API version 18. 316 317**System capability**: SystemCapability.ArkUI.ArkUI.Full 318 319**Parameters** 320 321| Name | Type | Mandatory| Description | 322| -------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 323| resColor | [Optional](ts-universal-attributes-custom-property.md#optional12)\<[ResourceColor](ts-types.md#resourcecolor)> | Yes | Background color of the selected option in the drop-down menu.<br>When **resColor** is set to **undefined**, the default value is a blend of **$r('sys.color.ohos_id_color_component_activated')** with the opacity of **$r('sys.color.ohos_id_alpha_highlight_bg')**.| 324 325### selectedOptionFont 326 327selectedOptionFont(value: Font) 328 329Sets the text font of the selected option in the drop-down menu. 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. 330 331**Atomic service API**: This API can be used in atomic services since API version 11. 332 333**System capability**: SystemCapability.ArkUI.ArkUI.Full 334 335**Parameters** 336 337| Name| Type | Mandatory| Description | 338| ------ | ------------------------ | ---- | ------------------------------------------------------------ | 339| value | [Font](ts-types.md#font) | Yes | Text font of the selected option in the drop-down menu.<br>Default value:<br>{<br>size: $r('sys.float.ohos_id_text_size_body1'),<br>weight: FontWeight.Regular<br>} | 340 341### selectedOptionFont<sup>18+</sup> 342 343selectedOptionFont(selectFont: Optional\<Font>) 344 345Sets the text font of the selected option in the drop-down menu. 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. Compared with [selectedOptionFont](#selectedoptionfont), this API supports the **undefined** type for the **selectFont** parameter. 346 347**Atomic service API**: This API can be used in atomic services since API version 18. 348 349**System capability**: SystemCapability.ArkUI.ArkUI.Full 350 351**Parameters** 352 353| Name | Type | Mandatory| Description | 354| ---------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 355| selectFont | [Optional](ts-universal-attributes-custom-property.md#optional12)\<[Font](ts-types.md#font)> | Yes | Text font of the selected option in the drop-down menu.<br>If **selectFont** is set to **undefined**, the default value is used:<br>{<br>size: $r('sys.float.ohos_id_text_size_body1'),<br>weight: FontWeight.Regular<br>} | 356 357### selectedOptionFontColor 358 359selectedOptionFontColor(value: ResourceColor) 360 361Sets the font color of the selected option in the drop-down menu. 362 363**Atomic service API**: This API can be used in atomic services since API version 11. 364 365**System capability**: SystemCapability.ArkUI.ArkUI.Full 366 367**Parameters** 368 369| Name| Type | Mandatory| Description | 370| ------ | ------------------------------------------ | ---- | ------------------------------------------------------------ | 371| value | [ResourceColor](ts-types.md#resourcecolor) | Yes | Font color of the selected option in the drop-down menu.<br>Default value: **$r('sys.color.ohos_id_color_text_primary_activated')**| 372 373### selectedOptionFontColor<sup>18+</sup> 374 375selectedOptionFontColor(resColor: Optional\<ResourceColor>) 376 377Sets the font color of the selected option in the drop-down menu. Compared with [selectedOptionFontColor](#selectedoptionfontcolor), this API supports the **undefined** type for the **resColor** parameter. 378 379**Atomic service API**: This API can be used in atomic services since API version 18. 380 381**System capability**: SystemCapability.ArkUI.ArkUI.Full 382 383**Parameters** 384 385| Name | Type | Mandatory| Description | 386| -------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 387| resColor | [Optional](ts-universal-attributes-custom-property.md#optional12)\<[ResourceColor](ts-types.md#resourcecolor)> | Yes | Font color of the selected option in the drop-down menu.<br>If **resColor** is set to **undefined**, the default value **$r('sys.color.ohos_id_color_text_primary_activated')** is used.| 388 389### optionBgColor 390 391optionBgColor(value: ResourceColor) 392 393Sets the background color of options in the drop-down menu. 394 395**Atomic service API**: This API can be used in atomic services since API version 11. 396 397**System capability**: SystemCapability.ArkUI.ArkUI.Full 398 399**Parameters** 400 401| Name| Type | Mandatory| Description | 402| ------ | ------------------------------------------ | ---- | ------------------------------------------------------------ | 403| value | [ResourceColor](ts-types.md#resourcecolor) | Yes | Background color of options in the drop-down menu.<br>Default value:<br>Versions earlier than API version 11: **Color.White**<br>Since API version 11: **Color.Transparent**| 404 405### optionBgColor<sup>18+</sup> 406 407optionBgColor(resColor: Optional\<ResourceColor>) 408 409Sets the background color of options in the drop-down menu. Compared with [optionBgColor](#optionbgcolor), this API supports the **undefined** type for the **resColor** parameter. 410 411**Atomic service API**: This API can be used in atomic services since API version 18. 412 413**System capability**: SystemCapability.ArkUI.ArkUI.Full 414 415**Parameters** 416 417| Name | Type | Mandatory| Description | 418| -------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 419| resColor | [Optional](ts-universal-attributes-custom-property.md#optional12)\<[ResourceColor](ts-types.md#resourcecolor)> | Yes | Background color of options in the drop-down menu.<br>If **resColor** is set to **undefined**, the default value **Color.Transparent** is used.| 420 421### optionFont 422 423optionFont(value: Font) 424 425Sets the text font of options in the drop-down menu. 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. 426 427**Atomic service API**: This API can be used in atomic services since API version 11. 428 429**System capability**: SystemCapability.ArkUI.ArkUI.Full 430 431**Parameters** 432 433| Name| Type | Mandatory| Description | 434| ------ | ------------------------ | ---- | ------------------------------------------------------------ | 435| value | [Font](ts-types.md#font) | Yes | Text font of options in the drop-down menu.<br>Default value:<br>{<br>size: $r('sys.float.ohos_id_text_size_body1'),<br>weight: FontWeight.Regular<br>} | 436 437### optionFont<sup>18+</sup> 438 439optionFont(selectFont: Optional\<Font>) 440 441Sets the text font of options in the drop-down menu. 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. 442 443Compared with [optionFont](#optionfont), this API supports the **undefined** type for the **selectFont** parameter. 444 445**Atomic service API**: This API can be used in atomic services since API version 18. 446 447**System capability**: SystemCapability.ArkUI.ArkUI.Full 448 449**Parameters** 450 451| Name | Type | Mandatory| Description | 452| ---------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 453| selectFont | [Optional](ts-universal-attributes-custom-property.md#optional12)\<[Font](ts-types.md#font)> | Yes | Text font of options in the drop-down menu.<br>If **selectFont** is set to **undefined**, the default value is used:<br>{<br>size: $r('sys.float.ohos_id_text_size_body1'),<br>weight: FontWeight.Regular<br>} | 454 455### optionFontColor 456 457optionFontColor(value: ResourceColor) 458 459Sets the font color of options in the drop-down menu. 460 461**Atomic service API**: This API can be used in atomic services since API version 11. 462 463**System capability**: SystemCapability.ArkUI.ArkUI.Full 464 465**Parameters** 466 467| Name| Type | Mandatory| Description | 468| ------ | ------------------------------------------ | ---- | ------------------------------------------------------------ | 469| value | [ResourceColor](ts-types.md#resourcecolor) | Yes | Font color of options in the drop-down menu.<br>Default value: **$r('sys.color.ohos_id_color_text_primary')**| 470 471### optionFontColor<sup>18+</sup> 472 473optionFontColor(resColor: Optional\<ResourceColor>) 474 475Sets the font color of options in the drop-down menu. Compared with [optionFontColor](#optionfontcolor), this API supports the **undefined** type for the **resColor** parameter. 476 477**Atomic service API**: This API can be used in atomic services since API version 18. 478 479**System capability**: SystemCapability.ArkUI.ArkUI.Full 480 481**Parameters** 482 483| Name | Type | Mandatory| Description | 484| -------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 485| resColor | [Optional](ts-universal-attributes-custom-property.md#optional12)\<[ResourceColor](ts-types.md#resourcecolor)> | Yes | Font color of options in the drop-down menu.<br>If **resColor** is set to **undefined**, the default value **$r('sys.color.ohos_id_color_text_primary')** is used.| 486 487### space<sup>10+</sup> 488 489space(value: Length) 490 491Sets the spacing between the text and arrow of a drop-down menu option. This attribute cannot be set in percentage. If the value specified is **null**, **undefined**, or less than or equal to 8, the default value is used. 492 493**Atomic service API**: This API can be used in atomic services since API version 11. 494 495**System capability**: SystemCapability.ArkUI.ArkUI.Full 496 497**Parameters** 498 499| Name| Type | Mandatory| Description | 500| ------ | ---------------------------- | ---- | ------------------------------------------------ | 501| value | [Length](ts-types.md#length) | Yes | Spacing between the text and arrow of a drop-down menu option.<br>Default value: **8**<br>**NOTE**<br>For the string type, percentage values are not supported.| 502 503### space<sup>18+</sup> 504 505space(spaceLength: Optional\<Length>) 506 507Sets the spacing between the text and arrow of a drop-down menu option. This attribute cannot be set in percentage. If the value specified is **null**, **undefined**, or less than or equal to 8, the default value is used. 508 509**Atomic service API**: This API can be used in atomic services since API version 18. 510 511**System capability**: SystemCapability.ArkUI.ArkUI.Full 512 513**Parameters** 514 515| Name | Type | Mandatory| Description | 516| ----------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 517| spaceLength | [Optional](ts-universal-attributes-custom-property.md#optional12)\<[Length](ts-types.md#length)> | Yes | Spacing between the text and arrow of an option.<br>If **spaceLength** is set to **undefined**, the default value **8** is used.| 518 519### arrowPosition<sup>10+</sup> 520 521arrowPosition(value: ArrowPosition) 522 523Sets the alignment between the text and arrow of an option. 524 525**Atomic service API**: This API can be used in atomic services since API version 11. 526 527**System capability**: SystemCapability.ArkUI.ArkUI.Full 528 529**Parameters** 530 531| Name| Type | Mandatory| Description | 532| ------ | ----------------------------------------- | ---- | ------------------------------------------------------------ | 533| value | [ArrowPosition](#arrowposition10) | Yes | Alignment between the text and arrow of an option.<br>Default value: **ArrowPosition.END**| 534 535### arrowPosition<sup>18+</sup> 536 537arrowPosition(position: Optional\<ArrowPosition>) 538 539Sets the alignment between the text and arrow of an option. Compared with [arrowPosition](#arrowposition10), this API supports the **undefined** type for the **position** parameter. 540 541**Atomic service API**: This API can be used in atomic services since API version 18. 542 543**System capability**: SystemCapability.ArkUI.ArkUI.Full 544 545**Parameters** 546 547| Name | Type | Mandatory| Description | 548| -------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 549| position | [Optional](ts-universal-attributes-custom-property.md#optional12)\<[ArrowPosition](#arrowposition10)> | Yes | Alignment between the text and arrow of an option.<br>If **position** is set to **undefined**, the default value **ArrowPosition.END** is used.| 550 551### menuAlign<sup>10+</sup> 552 553menuAlign(alignType: MenuAlignType, offset?: Offset) 554 555Sets the alignment between the drop-down button and the drop-down menu. 556 557**Atomic service API**: This API can be used in atomic services since API version 11. 558 559**System capability**: SystemCapability.ArkUI.ArkUI.Full 560 561**Parameters** 562 563| Name | Type | Mandatory| Description | 564| --------- | ----------------------------------------- | ---- | ------------------------------------------------------------ | 565| alignType | [MenuAlignType](#menualigntype10) | Yes | Alignment type.<br>Default value: **MenuAlignType.START** | 566| offset | [Offset](ts-types.md#offset) | No | Offset of the drop-down menu relative to the drop-down button after alignment based on the alignment type.<br> Default value: **{dx: 0, dy: 0}**| 567 568### menuAlign<sup>18+</sup> 569 570menuAlign(alignType: Optional\<MenuAlignType>, offset?: Offset) 571 572Sets the alignment between the drop-down button and the drop-down menu. Compared with [menuAlign](#menualign10)<sup>10+</sup>, this API supports the **undefined** type for the **alignType** parameter. 573 574**Atomic service API**: This API can be used in atomic services since API version 18. 575 576**System capability**: SystemCapability.ArkUI.ArkUI.Full 577 578**Parameters** 579 580| Name | Type | Mandatory| Description | 581| --------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 582| alignType | [Optional](ts-universal-attributes-custom-property.md#optional12)\<[MenuAlignType](#menualigntype10)> | Yes | Alignment type.<br>If **alignType** is set to **undefined**, the default value **MenuAlignType.START** is used.| 583| offset | [Offset](ts-types.md#offset) | No | Offset of the drop-down menu relative to the drop-down button after alignment based on the alignment type.<br> Default value: **{dx: 0, dy: 0}**| 584 585### optionWidth<sup>11+</sup> 586 587optionWidth(value: Dimension | OptionWidthMode ) 588 589Sets the width for the drop-down menu option. Percentage values not supported. **OptionWidthMode** specifies whether to inherit the width of the drop-down button. 590 591If an invalid value or a value less than the minimum width of 56 vp is set, the attribute has no effect. In this case, the option width uses the default value, which is the width of two columns. 592 593The **Select** component maintains 16 vp spacing from both left and right screen edges by default. This creates a 32 vp total horizontal margin (16 vp x 2). To prevent horizontal shifting when the drop-down menu is displayed, set the width of the component itself and its menu options to a value less than or equal to **calc(100% - 32 vp)**. 594 595**Atomic service API**: This API can be used in atomic services since API version 12. 596 597**System capability**: SystemCapability.ArkUI.ArkUI.Full 598 599**Parameters** 600 601| Name| Type | Mandatory| Description | 602| ------ | ------------------------------------------------------------ | ---- | ------------------ | 603| value | [Dimension](ts-types.md#dimension10) \| [OptionWidthMode](ts-appendix-enums.md#optionwidthmode11) | Yes | Width of the drop-down menu option.| 604 605### optionWidth<sup>18+</sup> 606 607optionWidth(width: Optional\<Dimension | OptionWidthMode> ) 608 609Sets the width for the drop-down menu option. Percentage values not supported. **OptionWidthMode** specifies whether to inherit the width of the drop-down button. Compared with [optionWidth](#optionwidth11)<sup>11+</sup>, this API supports the **undefined** type for the **width** parameter. 610 611If an invalid value or a value less than the minimum width of 56 vp is set, the attribute has no effect. In this case, the option width uses the default value, which is the width of two columns. 612 613The **Select** component maintains 16 vp spacing from both left and right screen edges by default. This creates a 32 vp total horizontal margin (16 vp x 2). To prevent horizontal shifting when the drop-down menu is displayed, set the width of the component itself and its menu options to a value less than or equal to **calc(100% - 32 vp)**. 614 615**Atomic service API**: This API can be used in atomic services since API version 18. 616 617**System capability**: SystemCapability.ArkUI.ArkUI.Full 618 619**Parameters** 620 621| Name| Type | Mandatory| Description | 622| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 623| width | [Optional](ts-universal-attributes-custom-property.md#optional12)\<[Dimension](ts-types.md#dimension10) \| [OptionWidthMode](ts-appendix-enums.md#optionwidthmode11)> | Yes | Width of the drop-down menu option.<br>If **width** is set to **undefined**, it has no effect. In this case, the option width uses the default value, which is the width of two columns.| 624 625### optionHeight<sup>11+</sup> 626 627optionHeight(value: Dimension) 628 629Sets the maximum height for the drop-down menu. Percentage values not supported. The default maximum height is 80% of the available screen height, and any custom maximum height setting must not exceed this limit. 630 631This attribute has no effect when set to abnormal values or zero. 632 633If the actual height of all drop-down menu options is less than the set height, the menu will automatically adjust to the actual content height. 634 635**Atomic service API**: This API can be used in atomic services since API version 12. 636 637**System capability**: SystemCapability.ArkUI.ArkUI.Full 638 639**Parameters** 640 641| Name| Type | Mandatory| Description | 642| ------ | ------------------------------------ | ---- | ------------------------ | 643| value | [Dimension](ts-types.md#dimension10) | Yes | Maximum height of the drop-down menu.| 644 645### optionHeight<sup>18+</sup> 646 647optionHeight(height: Optional\<Dimension>) 648 649Sets the maximum height for the drop-down menu. Percentage values not supported. The default maximum height is 80% of the available screen height, and any custom maximum height setting must not exceed this limit. Compared with [optionHeight](#optionheight11)<sup>11+</sup>, this API supports the **undefined** type for the **height** parameter. 650 651This attribute has no effect when set to abnormal values or zero. 652 653If the actual height of all drop-down menu options is less than the set height, the menu will automatically adjust to the actual content height. 654 655**Atomic service API**: This API can be used in atomic services since API version 18. 656 657**System capability**: SystemCapability.ArkUI.ArkUI.Full 658 659**Parameters** 660 661| Name| Type | Mandatory| Description | 662| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 663| height | [Optional](ts-universal-attributes-custom-property.md#optional12)\<[Dimension](ts-types.md#dimension10)> | Yes | Maximum height of the drop-down menu.<br>If **height** is set to **undefined**, the default value, which is 80% of the available screen height, is used.| 664 665### menuBackgroundColor<sup>11+</sup> 666 667menuBackgroundColor(value: ResourceColor) 668 669Sets the background color of the drop-down menu. 670 671**Atomic service API**: This API can be used in atomic services since API version 12. 672 673**System capability**: SystemCapability.ArkUI.ArkUI.Full 674 675**Parameters** 676 677| Name| Type | Mandatory| Description | 678| ------ | ------------------------------------------ | ---- | ------------------------------------------------------------ | 679| value | [ResourceColor](ts-types.md#resourcecolor) | Yes | Background color of the drop-down menu.<br>Default value:<br>Versions earlier than API version 11: **$r('sys.color.ohos_id_color_card_bg')**<br>Since API version 11: **Color.Transparent**| 680 681### menuBackgroundColor<sup>18+</sup> 682 683menuBackgroundColor(resColor: Optional\<ResourceColor>) 684 685Sets the background color of the drop-down menu. Compared with [menuBackgroundColor](#menubackgroundcolor11)<sup>11+</sup>, this API supports the **undefined** type for the **resColor** parameter. 686 687**Atomic service API**: This API can be used in atomic services since API version 18. 688 689**System capability**: SystemCapability.ArkUI.ArkUI.Full 690 691**Parameters** 692 693| Name | Type | Mandatory| Description | 694| -------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 695| resColor | [Optional](ts-universal-attributes-custom-property.md#optional12)\<[ResourceColor](ts-types.md#resourcecolor)> | Yes | Background color of the drop-down menu.<br>If **resColor** is set to **undefined**, the default value **Color.Transparent** is used.| 696 697### menuBackgroundBlurStyle<sup>11+</sup> 698 699menuBackgroundBlurStyle(value: BlurStyle) 700 701Sets the background blur style of the drop-down menu. 702 703**Atomic service API**: This API can be used in atomic services since API version 12. 704 705**System capability**: SystemCapability.ArkUI.ArkUI.Full 706 707**Parameters** 708 709| Name| Type | Mandatory| Description | 710| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 711| value | [BlurStyle](ts-universal-attributes-background.md#blurstyle9) | Yes | Background blur style of the drop-down menu.<br>Default value: **BlurStyle.COMPONENT_ULTRA_THICK**.| 712 713### menuBackgroundBlurStyle<sup>18+</sup> 714 715menuBackgroundBlurStyle(style: Optional\<BlurStyle>) 716 717Sets the background blur style of the drop-down menu. Compared with [menuBackgroundBlurStyle](#menubackgroundblurstyle11)<sup>11+</sup>, this API supports the **undefined** type for the **style** parameter. 718 719**Atomic service API**: This API can be used in atomic services since API version 18. 720 721**System capability**: SystemCapability.ArkUI.ArkUI.Full 722 723**Parameters** 724 725| Name| Type | Mandatory| Description | 726| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 727| style | [Optional](ts-universal-attributes-custom-property.md#optional12)\<[BlurStyle](ts-universal-attributes-background.md#blurstyle9)> | Yes | Background blur style of the drop-down menu.<br>If **style** is set to **undefined**, the default value **BlurStyle.COMPONENT_ULTRA_THICK** is used.| 728 729### avoidance<sup>19+</sup> 730 731avoidance(mode: AvoidanceMode) 732 733Sets the avoidance mode for the drop-down menu. 734 735**Atomic service API**: This API can be used in atomic services since API version 19. 736 737**System capability**: SystemCapability.ArkUI.ArkUI.Full 738 739**Parameters** 740 741| Name | Type | Mandatory| Description | 742| --------- | ----------------------------------------- | ---- | ------------------------------------------------------------ | 743| mode | [AvoidanceMode](#avoidancemode19) | Yes | Avoidance mode for the drop-down menu.<br>Default value: **AvoidanceMode.COVER_TARGET**.| 744 745### menuOutline<sup>20+</sup> 746 747menuOutline(outline: MenuOutlineOptions) 748 749Sets the outline style for the drop-down menu. 750 751**Atomic service API**: This API can be used in atomic services since API version 20. 752 753**System capability**: SystemCapability.ArkUI.ArkUI.Full 754 755**Parameters** 756 757| Name| Type | Mandatory| Description | 758| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 759| outline | [MenuOutlineOptions](#menuoutlineoptions20) | Yes | Outline style of the drop-down menu.| 760 761### showDefaultSelectedIcon<sup>20+</sup> 762 763showDefaultSelectedIcon(show: boolean) 764 765Sets whether to display the default selection icon. 766 767**Atomic service API**: This API can be used in atomic services since API version 20. 768 769**System capability**: SystemCapability.ArkUI.ArkUI.Full 770 771**Parameters** 772 773| Name| Type | Mandatory| Description | 774| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 775| show | boolean | Yes | Whether to display the default selection icon.<br>Default value: **false**.<br>**true**: Display the default selection icon.<br>**false**: Hide the default selection icon.<br>When **show** is **true** and **selectedOptionBgColor** is set, both the set background color and default selection icon will be displayed. When **show** is **true** but **selectedOptionBgColor** is not set, only the default selection icon will be displayed (with no background highlight). When **show** is **false**, only the background highlight is used to indicate selection.| 776 777### textModifier<sup>20+</sup> 778 779textModifier(modifier: Optional\<[TextModifier](ts-universal-attributes-attribute-modifier.md)>) 780 781Creates a text modifier to customize the text style of the **Select** button. After **textModifier** is applied, the text style of the **Select** button will be completely customized by the developer. 782 783**Atomic service API**: This API can be used in atomic services since API version 20. 784 785**System capability**: SystemCapability.ArkUI.ArkUI.Full 786 787**Parameters** 788 789| Name | Type | Mandatory| Description | 790| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 791| modifier | [Optional](ts-universal-attributes-custom-property.md#optional12)\<[TextModifier](ts-universal-attributes-attribute-modifier.md)> | Yes | Text modifier to apply to the **Select** button for customizing the text style.| 792 793### arrowModifier<sup>20+</sup> 794 795arrowModifier(modifier: Optional\<[SymbolGlyphModifier](ts-universal-attributes-attribute-modifier.md)>) 796 797Creates an arrow modifier to customize the drop-down arrow icon style of the **Select** button. After **arrowModifier** is applied, the drop-down arrow icon style of the **Select** button will be completely customized by the developer. 798 799**Atomic service API**: This API can be used in atomic services since API version 20. 800 801**System capability**: SystemCapability.ArkUI.ArkUI.Full 802 803**Parameters** 804 805| Name | Type | Mandatory| Description | 806| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 807| modifier | [Optional](ts-universal-attributes-custom-property.md#optional12)\<[SymbolGlyphModifier](ts-universal-attributes-attribute-modifier.md)> | Yes | Arrow modifier to apply to the **Select** button for customizing the drop-down arrow icon style.| 808 809### optionTextModifier<sup>20+</sup> 810 811optionTextModifier(modifier: Optional\<[TextModifier](ts-universal-attributes-attribute-modifier.md)>) 812 813Creates an option text modifier to customize the text style of unselected options in the drop-down menu. After **optionTextModifier** is applied, the unselected option text style will be completely customized by the developer. 814 815If both [optionFont](#optionfont) and **Font** of **optionTextModifier** are set, [optionFont](#optionfont) takes precedence. Any unspecified attributes in **optionFont** will use default values. 816 817**Atomic service API**: This API can be used in atomic services since API version 20. 818 819**System capability**: SystemCapability.ArkUI.ArkUI.Full 820 821**Parameters** 822 823| Name | Type | Mandatory| Description | 824| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 825| modifier | [Optional](ts-universal-attributes-custom-property.md#optional12)\<[TextModifier](ts-universal-attributes-attribute-modifier.md)> | Yes | Option text modifier to apply to the **Select** component for customizing the text style of unselected options in the drop-down menu.| 826 827### selectedOptionTextModifier<sup>20+</sup> 828 829selectedOptionTextModifier(modifier: Optional\<[TextModifier](ts-universal-attributes-attribute-modifier.md)>) 830 831Creates a selected-option text modifier to customize the text style of selected options in the drop-down menu. After **selectedOptionTextModifier** is applied, the selected-option text style will be completely customized by the developer. 832 833If both [selectedOptionFont](#selectedoptionfont) and **Font** of **selectedOptionTextModifier** are set, [selectedOptionFont](#selectedoptionfont) takes precedence. If **selectedOptionFont** is not set, [optionFont](#optionfont) settings are applied. Any unspecified attributes in **selectedOptionFont** or **optionFont** will use default values. 834 835**Atomic service API**: This API can be used in atomic services since API version 20. 836 837**System capability**: SystemCapability.ArkUI.ArkUI.Full 838 839**Parameters** 840 841| Name | Type | Mandatory| Description | 842| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 843| modifier | [Optional](ts-universal-attributes-custom-property.md#optional12)\<[TextModifier](ts-universal-attributes-attribute-modifier.md)> | Yes | Selected-option text modifier to apply to the **Select** component for customizing the text style of selected options in the drop-down menu.<br>You can manage and maintain the text style as needed.| 844 845### showInSubWindow<sup>20+</sup> 846 847showInSubWindow(showInSubWindow:Optional\<boolean>) 848 849Sets whether the menu of the **Select** component is displayed in a subwindow. 850 851**Atomic service API**: This API can be used in atomic services since API version 20. 852 853**System capability**: SystemCapability.ArkUI.ArkUI.Full 854 855**Parameters** 856 857| Name| Type | Mandatory| Description | 858| ------ | ------ | ---- | -------------- | 859| showInSubWindow | [Optional](ts-universal-attributes-custom-property.md#optional12)\<boolean> | Yes | Whether the menu of the **Select** component is displayed in a subwindow.<br>**true**: The menu of the **Select** component is displayed in a subwindow. This is effective only for 2-in-1 devices.<br>**false**: The menu of the **Select** component is not displayed in a subwindow.<br>Default value: **true** for 2-in-1 devices and **false** for other devices| 860 861## ArrowPosition<sup>10+</sup> 862 863Enumerates arrow positions. 864 865**Atomic service API**: This API can be used in atomic services since API version 11. 866 867**System capability**: SystemCapability.ArkUI.ArkUI.Full 868 869| Name | Value | Description | 870| ------------------- | ------------------ | ------------------ | 871| END | 0 | The text is in front of the arrow.| 872| START | 1 | The arrow is in front of the text.| 873 874## MenuAlignType<sup>10+</sup> 875 876Enumerates drop-down menu alignment modes. 877 878**Atomic service API**: This API can be used in atomic services since API version 11. 879 880**System capability**: SystemCapability.ArkUI.ArkUI.Full 881 882| Name | Value| Description | 883| ------------------- | --- | ------------------ | 884| START | 0 |Aligned with the start edge in the same direction as the language in use.| 885| CENTER | 1 |Aligned with the center.| 886| END | 2 |Aligned with the end edge in the same direction as the language in use.| 887 888## AvoidanceMode<sup>19+</sup> 889 890Enumerates the drop-down menu avoidance modes. 891 892**Atomic service API**: This API can be used in atomic services since API version 19. 893 894**System capability**: SystemCapability.ArkUI.ArkUI.Full 895 896| Name | Description | 897| ------------------- | ------------------ | 898| COVER_TARGET | If there is not enough space below the target component, cover the target component.| 899| AVOID_AROUND_TARGET | If there is not enough space around the target component, compress and display in the largest available space (scrollable).| 900 901## MenuItemConfiguration<sup>12+</sup> 902 903You need a custom class to implement the **ContentModifier** API. 904 905**Atomic service API**: This API can be used in atomic services since API version 12. 906 907**System capability**: SystemCapability.ArkUI.ArkUI.Full 908 909| Name| Type | Mandatory| Description | 910| ------ | -------------------------------------------- | ---- | ------------------------------------------------------------ | 911| value | [ResourceStr](ts-types.md#resourcestr) | Yes | Text content of the drop-down menu option.<br>**NOTE**<br>If the text exceeds the width of the menu text area, it is truncated.| 912| icon | [ResourceStr](ts-types.md#resourcestr) | No | Icon of the drop-down menu option.<br>**NOTE**<br>The string type can be used to load network images and local images.| 913| symbolIcon<sup>12+</sup> | [SymbolGlyphModifier](ts-universal-attributes-attribute-modifier.md) | No | Symbol icon of the drop-down menu option.| 914| selected | boolean | Yes | Whether the drop-down menu option is selected. The value **true** means that the option is selected, and **false** means the opposite.<br>Default value: **false**.| 915| index | number | Yes | Index of the drop-down menu option. The index is zero-based.| 916| triggerSelect | (index: number, value: string) :void | Yes | Invoked when a drop-down menu option is selected.<br>**index**: index of the selected option.<br>**value**: text of the selected option.<br>**NOTE**<br>The value of **index** will be assigned to the **index** parameter in the [onSelect](#onselect) callback; the value of **value** will be returned to the **Select** component for display and will also be assigned to the **value** parameter in the [onSelect](#onselect) callback.| 917 918## MenuOutlineOptions<sup>20+</sup> 919 920Defines the outline of the drop-down menu. 921 922**Atomic service API**: This API can be used in atomic services since API version 20. 923 924**System capability**: SystemCapability.ArkUI.ArkUI.Full 925 926| Name | Type |Mandatory | Description | 927| ------ | ----------------------|-------------------------------------- | ------------------------------------------------------------ | 928| width | [Dimension](ts-types.md#dimension10) \| [EdgeOutlineWidths](ts-universal-attributes-outline.md#edgeoutlinewidths)| No| Width of the outline. Percentage values are not supported.<br>Default value: **0**| 929| color | [ResourceColor](ts-types.md#resourcecolor) \| [EdgeColors](ts-universal-attributes-outline.md#edgecolors)|No| Color of the outline.<br>Default value: **#19ffffff**| 930 931## Events 932 933### onSelect 934 935onSelect(callback: (index: number, value: string) => void) 936 937Invoked when a drop-down menu option is selected. 938 939**Atomic service API**: This API can be used in atomic services since API version 11. 940 941**System capability**: SystemCapability.ArkUI.ArkUI.Full 942 943**Parameters** 944 945| Name| Type | Mandatory| Description | 946| ------ | ------ | ---- | ----------------------------- | 947| index | number | Yes | Index of the selected option. The index is zero-based.| 948| value | string | Yes | Value of the selected option. | 949 950### onSelect<sup>18+</sup> 951 952onSelect(callback: Optional\<OnSelectCallback> ) 953 954Invoked when a drop-down menu option is selected. Compared with [onSelect](#onselect), this API supports the **undefined** type for the **callback** parameter. 955 956**Atomic service API**: This API can be used in atomic services since API version 18. 957 958**System capability**: SystemCapability.ArkUI.ArkUI.Full 959 960**Parameters** 961 962| Name | Type | Mandatory| Description | 963| -------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 964| callback | [Optional](ts-universal-attributes-custom-property.md#optional12)\<[OnSelectCallback](#onselectcallback18)> | Yes | Callback invoked when a drop-down menu option is selected.<br>If **callback** is set to **undefined**, the callback function is not used.| 965 966## OnSelectCallback<sup>18+</sup> 967 968type OnSelectCallback = (index: number, selectStr: string) => void 969 970Defines the callback invoked when a drop-down menu option is selected. 971 972**Atomic service API**: This API can be used in atomic services since API version 18. 973 974**System capability**: SystemCapability.ArkUI.ArkUI.Full 975 976**Parameters** 977 978| Name| Type | Mandatory| Description | 979| ------ | ------ | ---- | -------------- | 980| index | number | Yes | Index of the selected option. The index is zero-based.| 981| selectStr | string | Yes | Value of the selected option. | 982 983## Example 1: Creating a Drop-down Menu 984 985This example demonstrates how to create a drop-down menu by configuring **SelectOptions**. 986 987```ts 988// xxx.ets 989@Entry 990@Component 991struct SelectExample { 992 @State text: string = "TTTTT"; 993 @State index: number = 2; 994 @State space: number = 8; 995 @State arrowPosition: ArrowPosition = ArrowPosition.END; 996 997 build() { 998 Column() { 999 Select([{ value: 'aaa', icon: $r("app.media.selection") }, 1000 { value: 'bbb', icon: $r("app.media.selection") }, 1001 { value: 'ccc', icon: $r("app.media.selection") }, 1002 { value: 'ddd', icon: $r("app.media.selection") }]) 1003 .selected(this.index) 1004 .value(this.text) 1005 .font({ size: 16, weight: 500 }) 1006 .fontColor('#182431') 1007 .selectedOptionFont({ size: 16, weight: 400 }) 1008 .optionFont({ size: 16, weight: 400 }) 1009 .space(this.space) 1010 .arrowPosition(this.arrowPosition) 1011 .menuAlign(MenuAlignType.START, { dx: 0, dy: 0 }) 1012 .optionWidth(200) 1013 .optionHeight(300) 1014 .onSelect((index: number, text?: string | undefined) => { 1015 console.info('Select:' + index); 1016 this.index = index; 1017 if (text) { 1018 this.text = text; 1019 } 1020 }) 1021 .avoidance(AvoidanceMode.COVER_TARGET); 1022 }.width('100%') 1023 } 1024} 1025``` 1026 1027 1028 1029 1030 1031## Example 2: Setting the Symbol Icon 1032This example implements a drop-down menu, each option of which uses a symbol as its image. 1033 1034```ts 1035// xxx.ets 1036import { SymbolGlyphModifier } from '@kit.ArkUI'; 1037 1038@Entry 1039@Component 1040struct SelectExample { 1041 @State text: string = "TTTTT"; 1042 @State index: number = 2; 1043 @State space: number = 8; 1044 @State arrowPosition: ArrowPosition = ArrowPosition.END; 1045 @State symbolModifier1: SymbolGlyphModifier = 1046 new SymbolGlyphModifier($r('sys.symbol.ohos_wifi')).fontColor([Color.Green]); 1047 @State symbolModifier2: SymbolGlyphModifier = 1048 new SymbolGlyphModifier($r('sys.symbol.ohos_star')).fontColor([Color.Red]); 1049 @State symbolModifier3: SymbolGlyphModifier = 1050 new SymbolGlyphModifier($r('sys.symbol.ohos_trash')).fontColor([Color.Gray]); 1051 @State symbolModifier4: SymbolGlyphModifier = 1052 new SymbolGlyphModifier($r('sys.symbol.exposure')).fontColor([Color.Gray]); 1053 1054 build() { 1055 Column() { 1056 Select([{ value: 'aaa', symbolIcon: this.symbolModifier1 }, 1057 { value: 'bbb', symbolIcon: this.symbolModifier2 }, 1058 { value: 'ccc', symbolIcon: this.symbolModifier3 }, 1059 { value: 'ddd', symbolIcon: this.symbolModifier4 }]) 1060 .selected(this.index) 1061 .value(this.text) 1062 .font({ size: 16, weight: 500 }) 1063 .fontColor('#182431') 1064 .selectedOptionFont({ size: 16, weight: 400 }) 1065 .optionFont({ size: 16, weight: 400 }) 1066 .space(this.space) 1067 .arrowPosition(this.arrowPosition) 1068 .menuAlign(MenuAlignType.START, { dx: 0, dy: 0 }) 1069 .onSelect((index: number, text?: string | undefined) => { 1070 console.info('Select:' + index); 1071 this.index = index; 1072 if (text) { 1073 this.text = text; 1074 } 1075 }) 1076 .avoidance(AvoidanceMode.COVER_TARGET); 1077 }.width('100%') 1078 } 1079} 1080``` 1081 1082 1083 1084## Example 3: Implementing a Custom Drop-down Menu 1085This example implements a custom drop-down menu, each option of which consists of text + symbol + blank area + text + drawn triangle. After a menu option is clicked, the text content of the menu option is displayed. 1086 1087```ts 1088import { SymbolGlyphModifier } from '@kit.ArkUI'; 1089 1090class MyMenuItemContentModifier implements ContentModifier<MenuItemConfiguration> { 1091 modifierText: string = ""; 1092 1093 constructor(text: string) { 1094 this.modifierText = text; 1095 } 1096 1097 applyContent(): WrappedBuilder<[MenuItemConfiguration]> { 1098 return wrapBuilder(MenuItemBuilder); 1099 } 1100} 1101 1102@Builder 1103function MenuItemBuilder(configuration: MenuItemConfiguration) { 1104 Row() { 1105 Text(configuration.value) 1106 Blank() 1107 if (configuration.symbolIcon) { 1108 SymbolGlyph().attributeModifier(configuration.symbolIcon).fontSize(24) 1109 } else if (configuration.icon) { 1110 Image(configuration.icon).size({ width: 24, height: 24 }) 1111 } 1112 Blank(30) 1113 Text((configuration.contentModifier as MyMenuItemContentModifier).modifierText) 1114 Blank(30) 1115 Path() 1116 .width('100px') 1117 .height('150px') 1118 .commands('M40 0 L80 100 L0 100 Z') 1119 .fillOpacity(0) 1120 .stroke(Color.Black) 1121 .strokeWidth(3) 1122 } 1123 .onClick(() => { 1124 configuration.triggerSelect(configuration.index, configuration.value.valueOf().toString()); 1125 }) 1126} 1127 1128@Entry 1129@Component 1130struct SelectExample { 1131 @State text: string = "Content Modifier Select"; 1132 @State symbolModifier1: SymbolGlyphModifier = 1133 new SymbolGlyphModifier($r('sys.symbol.ohos_trash')).fontColor([Color.Gray]); 1134 @State symbolModifier2: SymbolGlyphModifier = 1135 new SymbolGlyphModifier($r('sys.symbol.exposure')).fontColor([Color.Gray]); 1136 1137 build() { 1138 Column() { 1139 Row() { 1140 Select([{ value: 'item1', icon: $r('app.media.icon'), symbolIcon: this.symbolModifier1 }, 1141 { value: 'item1', icon: $r('app.media.icon'), symbolIcon: this.symbolModifier2 }]) 1142 .value(this.text) 1143 .onSelect((index: number, text?: string) => { 1144 console.info('Select index:' + index); 1145 console.info('Select text:' + text); 1146 }) 1147 .menuItemContentModifier(new MyMenuItemContentModifier("Content Modifier")) 1148 1149 }.alignItems(VerticalAlign.Center).height('50%') 1150 } 1151 } 1152} 1153``` 1154 1155 1156## Example 4: Using the Divider Style 1157This example demonstrates how to configure a drop-down menu with a custom divider style by setting **divider** with **DividerOptions**. 1158 1159```ts 1160// xxx.ets 1161@Entry 1162@Component 1163struct SelectExample { 1164 @State text: string = "TTTTT"; 1165 @State index: number = -1; 1166 @State arrowPosition: ArrowPosition = ArrowPosition.END; 1167 1168 build() { 1169 Column() { 1170 Select([{ value: 'aaa', icon: $r("app.media.icon") }, 1171 { value: 'bbb', icon: $r("app.media.icon") }, 1172 { value: 'ccc', icon: $r("app.media.icon") }, 1173 { value: 'ddd', icon: $r("app.media.icon") }]) 1174 .selected(this.index) 1175 .value(this.text) 1176 .font({ size: 16, weight: 500 }) 1177 .fontColor('#182431') 1178 .selectedOptionFont({ size: 16, weight: 400 }) 1179 .optionFont({ size: 16, weight: 400 }) 1180 .arrowPosition(this.arrowPosition) 1181 .menuAlign(MenuAlignType.START, { dx: 0, dy: 0 }) 1182 .optionWidth(200) 1183 .optionHeight(300) 1184 .divider({ 1185 strokeWidth: 5, 1186 color: Color.Blue, 1187 startMargin: 10, 1188 endMargin: 10 1189 }) 1190 .onSelect((index: number, text?: string | undefined) => { 1191 console.info('Select:' + index); 1192 this.index = index; 1193 if (text) { 1194 this.text = text; 1195 } 1196 }) 1197 .avoidance(AvoidanceMode.COVER_TARGET); 1198 }.width('100%') 1199 } 1200} 1201``` 1202 1203 1204## Example 5: Using the No-Divider Style 1205This example demonstrates how to create a drop-down menu with no divider by setting **divider** to **null**. 1206 1207```ts 1208// xxx.ets 1209@Entry 1210@Component 1211struct SelectExample { 1212 @State text: string = "TTTTT"; 1213 @State index: number = -1; 1214 @State arrowPosition: ArrowPosition = ArrowPosition.END; 1215 1216 build() { 1217 Column() { 1218 Select([{ value: 'aaa', icon: $r("app.media.icon") }, 1219 { value: 'bbb', icon: $r("app.media.icon") }, 1220 { value: 'ccc', icon: $r("app.media.icon") }, 1221 { value: 'ddd', icon: $r("app.media.icon") }]) 1222 .selected(this.index) 1223 .value(this.text) 1224 .font({ size: 16, weight: 500 }) 1225 .fontColor('#182431') 1226 .selectedOptionFont({ size: 16, weight: 400 }) 1227 .optionFont({ size: 16, weight: 400 }) 1228 .arrowPosition(this.arrowPosition) 1229 .menuAlign(MenuAlignType.START, { dx: 0, dy: 0 }) 1230 .optionWidth(200) 1231 .optionHeight(300) 1232 .divider(null) 1233 .onSelect((index: number, text?: string | undefined) => { 1234 console.info('Select:' + index); 1235 this.index = index; 1236 if (text) { 1237 this.text = text; 1238 } 1239 }) 1240 .avoidance(AvoidanceMode.COVER_TARGET); 1241 }.width('100%') 1242 } 1243} 1244``` 1245 1246 1247## Example 6: Setting the Text and Arrow Styles of the Select Component 1248This example shows how to set the text and arrow styles of the **Select** component using **textModifier** and **arrowModifier**. 1249 1250```ts 1251import { TextModifier, SymbolGlyphModifier } from "@kit.ArkUI"; 1252 1253@Entry 1254@Component 1255struct SelectExample { 1256 @State text: string = "TTTTTTTTTT".repeat(3); 1257 @State index: number = 2; 1258 textModifier: TextModifier = new TextModifier(); 1259 symbolGlyphModifier: SymbolGlyphModifier = new SymbolGlyphModifier(); 1260 1261 aboutToAppear(): void { 1262 this.textModifier 1263 .maxLines(2) 1264 .fontSize(18) 1265 .textAlign(TextAlign.Center) 1266 .fontColor('#333333') 1267 .fontWeight(FontWeight.Medium) 1268 .textOverflow({overflow:TextOverflow.Clip}) 1269 1270 this.symbolGlyphModifier 1271 .fontSize(25) 1272 .fontColor(['#999999']) 1273 } 1274 1275 build() { 1276 Column() { 1277 Select([ 1278 { value: 'A very long option text that should be truncated nicely'.repeat(3), icon: $r("app.media.startIcon") }, 1279 { value: 'Option B', icon: $r("app.media.startIcon") }, 1280 { value: 'Option C', icon: $r("app.media.startIcon") }, 1281 { value: 'Option D', icon: $r("app.media.startIcon") } 1282 ]) 1283 .selected(this.index) 1284 .value(this.text) 1285 .textModifier(this.textModifier) 1286 .arrowModifier(this.symbolGlyphModifier) 1287 .onSelect((index: number, text?: string) => { 1288 console.info('Select:' + index); 1289 this.index = index; 1290 if (text) { 1291 this.text = text; 1292 } 1293 }) 1294 .width('90%') 1295 .margin({ top: 20,left:30 }) 1296 .borderRadius(12) 1297 .width(200) 1298 .padding(9) 1299 .backgroundColor(Color.White) 1300 .shadow({ radius: 10, color: '#888888', offsetX: 0, offsetY: 10 }) 1301 } 1302 .alignItems(HorizontalAlign.Start) 1303 .padding(10) 1304 .backgroundColor('#F0F2F5') 1305 .width('100%') 1306 .height('100%') 1307 } 1308} 1309 1310``` 1311 1312 1313## Example 7: Setting the Text Styles of Selected and Unselected Drop-Down Menu Options 1314This example shows how to set the text styles of both selected and unselected drop-down menu options using **optionTextModifier** and **selectedOptionTextModifier**. 1315 1316```ts 1317import { TextModifier } from "@kit.ArkUI"; 1318 1319@Entry 1320@Component 1321struct SelectExample { 1322 @State text: string = "TTTTTTTTTT".repeat(3); 1323 @State index: number = 2; 1324 optiontextModifier: TextModifier = new TextModifier(); 1325 selectedOptiontextModifier: TextModifier = new TextModifier(); 1326 aboutToAppear(): void { 1327 this.optiontextModifier 1328 .maxLines(1) 1329 .fontSize(16) 1330 .textAlign(TextAlign.Start) 1331 .fontColor('#666666') 1332 .fontWeight(FontWeight.Normal) 1333 .width(200) 1334 1335 this.selectedOptiontextModifier 1336 .maxLines(1) 1337 .fontSize(18) 1338 .textAlign(TextAlign.Start) 1339 .fontColor('#007BFF') 1340 .fontWeight(FontWeight.Bold) 1341 .width(200) 1342 } 1343 1344 build() { 1345 Column() { 1346 Select([ 1347 { value: 'A very long option text that should be truncated nicely'.repeat(3), icon: $r("app.media.startIcon") }, 1348 { value: 'Option B', icon: $r("app.media.startIcon") }, 1349 { value: 'Option C', icon: $r("app.media.startIcon") }, 1350 { value: 'Option D', icon: $r("app.media.startIcon") } 1351 ]) 1352 .selected(this.index) 1353 .value(this.text) 1354 .onSelect((index: number, text?: string) => { 1355 console.info('Select:' + index); 1356 this.index = index; 1357 if (text) { 1358 this.text = text; 1359 } 1360 }) 1361 .optionTextModifier(this.optiontextModifier) 1362 .selectedOptionTextModifier(this.selectedOptiontextModifier) 1363 .width('90%') 1364 .margin({ top: 20,left:30 }) 1365 .borderRadius(12) 1366 .width(200) 1367 .padding(9) 1368 .backgroundColor(Color.White) 1369 .shadow({ radius: 10, color: '#888888', offsetX: 0, offsetY: 10 }) 1370 } 1371 .alignItems(HorizontalAlign.Start) 1372 .padding(10) 1373 .backgroundColor('#F0F2F5') 1374 .width('100%') 1375 .height('100%') 1376 } 1377} 1378 1379``` 1380 1381 1382## Example 8: Setting the Divider Mode 1383 1384This example demonstrates how to set the divider mode using the **mode** property of **dividerStyle**. 1385 1386```ts 1387import { LengthMetrics } from '@kit.ArkUI' 1388 1389@Entry 1390@Component 1391struct Index { 1392 build() { 1393 RelativeContainer() { 1394 Select([{ value: "SelectItem" }, { value: "SelectItem" }, { value: "SelectItem" },]) 1395 .value("Select") 1396 .dividerStyle({ 1397 strokeWidth: LengthMetrics.vp(5), 1398 color: '#d5d5d5', 1399 mode: DividerMode.EMBEDDED_IN_MENU 1400 }) 1401 } 1402 .height('100%') 1403 .width('100%') 1404 } 1405} 1406``` 1407 1408 1409 1410## Example 9: Setting the Outline Style of the Drop-Down Menu 1411 1412This example shows how to set the outline style of the drop-down menu using the **width** and **color** properties of **menuOutline**. 1413 1414```ts 1415// xxx.ets 1416@Entry 1417@Component 1418struct SelectExample { 1419 @State text: string = "TTTTT"; 1420 @State index: number = -1; 1421 @State arrowPosition: ArrowPosition = ArrowPosition.END; 1422 1423 build() { 1424 Column() { 1425 Select([{ value: 'aaa' }, 1426 { value: 'bbb' }, 1427 { value: 'ccc' }, 1428 { value: 'ddd' }]) 1429 .selected(this.index) 1430 .value(this.text) 1431 .font({ size: 16, weight: 500 }) 1432 .fontColor('#182431') 1433 .selectedOptionFont({ size: 16, weight: 400 }) 1434 .optionFont({ size: 16, weight: 400 }) 1435 .arrowPosition(this.arrowPosition) 1436 .menuAlign(MenuAlignType.START, { dx: 0, dy: 0 }) 1437 .optionWidth(200) 1438 .optionHeight(300) 1439 .menuOutline({ 1440 width: '5vp', 1441 color: Color.Blue 1442 }) 1443 .onSelect((index: number, text?: string | undefined) => { 1444 console.info('Select:' + index); 1445 this.index = index; 1446 if (text) { 1447 this.text = text; 1448 } 1449 }) 1450 } 1451 .width('100%') 1452 .height('100%') 1453 .backgroundColor('#F0F2F5') 1454 } 1455} 1456``` 1457 1458 1459
