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**Atomic service API**: This API can be used in atomic services since API version 11.
18
19**Parameters**
20
21| Name | Type                                      | Mandatory | Description      |
22| ------- | ---------------------------------------------- | ---- | -------------- |
23| options | Array\<[SelectOption](#selectoption)\>  | Yes  | Options in the drop-down list box. |
24
25## SelectOption
26
27**Atomic service API**: This API can be used in atomic services since API version 11.
28
29| Name | Type                           | Mandatory | Description      |
30| ------ | ----------------------------------- | ---- | -------------- |
31| value  | [ResourceStr](ts-types.md#resourcestr) | Yes  | Value of an option in the drop-down list box. |
32| icon   | [ResourceStr](ts-types.md#resourcestr) | No  | Icon of an option in the drop-down list box. |
33| symbolIcon<sup>12+</sup>  | [SymbolGlyphModifier](ts-universal-attributes-attribute-modifier.md) | No  | Symbol icon of an option in the drop-down menu.<br>**symbolIcon** is at a higher priority than **icon**.|
34
35## Attributes
36
37In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
38
39### selected
40
41selected(value: number | Resource)
42
43Sets the index of the initial selected option in the drop-down list box. The index of the first option is **0**. 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.
44
45Since API version 10, this attribute supports two-way binding through [$$](../../../quick-start/arkts-two-way-sync.md).
46
47**Atomic service API**: This API can be used in atomic services since API version 11.
48
49**System capability**: SystemCapability.ArkUI.ArkUI.Full
50
51**Parameters** 
52
53| Name | Type                                                        | Mandatory | Description                    |
54| ------ | ------------------------------------------------------------ | ---- | ------------------------ |
55| value  | number \| [Resource](ts-types.md#resource)<sup>11+</sup> | Yes  | Index of the initial selected option in the drop-down list box. |
56
57### value
58
59value(value: ResourceStr)
60
61Sets the text of the drop-down button. By default, it will be replaced by the content of the selected option, if any.
62
63Since API version 10, this attribute supports two-way binding through [$$](../../../quick-start/arkts-two-way-sync.md).
64
65**Atomic service API**: This API can be used in atomic services since API version 11.
66
67**System capability**: SystemCapability.ArkUI.ArkUI.Full
68
69**Parameters** 
70
71| Name | Type                                                | Mandatory | Description                    |
72| ------ | ---------------------------------------------------- | ---- | ------------------------ |
73| value  | [ResourceStr](ts-types.md#resourcestr)<sup>11+</sup> | Yes  | Text of the drop-down button. |
74
75### controlSize<sup>12+</sup>
76
77controlSize(value: ControlSize)
78
79Sets the size of the **\<Select>** component.
80
81**System capability**: SystemCapability.ArkUI.ArkUI.Full
82
83**Parameters** 
84
85| Name | Type                                         | Mandatory | Description                                            |
86| ------ | --------------------------------------------- | ---- | ------------------------------------------------ |
87| value  | [ControlSize](ts-basic-components-button.md#controlsize11)<sup>11+</sup>  | Yes  | Size of the **\<Select>** component.<br>Default value: **ControlSize.NORMAL** |
88
89The priorities of **controlSize**, **width**, and **height** are as follows:
90
91   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 is displayed as an ellipsis (...).
92
93   2. If only controlSize is set but width and height are not set, the width and height of the component adapt to the text. The text cannot exceed the component, and minWidth and minHeight are set.
94
95   3) If controlSize, width, and height are set, the values of width and height take effect. If the values of width and height are less than the values of minWidth and minHeight set by controlSize, the values of width and height do not take effect, the width and height are the same as the minimum width minWidth and minimum height minHeight configured by controlSize.
96
97### menuItemContentModifier<sup>12+</sup>
98
99menuItemContentModifier(modifier: ContentModifier\<MenuItemConfiguration>)
100
101Creates a content modifier for the drop-down list box.
102
103**System capability**: SystemCapability.ArkUI.ArkUI.Full
104
105**Parameters**
106
107| Name | Type                                         | Mandatory | Description                                            |
108| ------ | --------------------------------------------- | ---- | ------------------------------------------------ |
109| modifier  | [ContentModifier\<MenuItemConfiguration>](#menuitemconfiguration12)  | Yes  | Content modifier to apply to the drop-down list box.<br>**modifier**: content modifier. You need a custom class to implement the **ContentModifier** API. |
110
111### divider<sup>12+</sup>
112
113divider(options: Optional\<DividerOptions> | null)
114
115Sets the divider style. If this attribute is not set, the divider is displayed based on the default value.
116
117**System capability**: SystemCapability.ArkUI.ArkUI.Full
118
119**Parameters**
120| Name | Type   | Mandatory | Description                                                                 |
121| ------ | ------- | ---- | --------------------------------------------------------------------- |
122| 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.|
123
124### font
125
126font(value: Font)
127
128Sets the text font 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.
129
130**Atomic service API**: This API can be used in atomic services since API version 11.
131
132**System capability**: SystemCapability.ArkUI.ArkUI.Full
133
134**Parameters** 
135
136| Name | Type                    | Mandatory | Description                                                        |
137| ------ | ------------------------ | ---- | ------------------------------------------------------------ |
138| value  | [Font](ts-types.md#font) | Yes  | Text font of the drop-down button.<br>Default value:<br>API version 11 and earlier versions:<br>{<br>size: '16fp',<br>weight: FontWeight.Medium<br>} <br>Since API version 12:<br>The default value of **size** is **14fp** when **controlSize** is set to **controlSize.SMALL** and **16fp** otherwise.|
139
140### fontColor
141
142fontColor(value: ResourceColor)
143
144Sets the font color of the drop-down button.
145
146**Atomic service API**: This API can be used in atomic services since API version 11.
147
148**System capability**: SystemCapability.ArkUI.ArkUI.Full
149
150**Parameters** 
151
152| Name | Type                                      | Mandatory | Description                                             |
153| ------ | ------------------------------------------ | ---- | ------------------------------------------------- |
154| value  | [ResourceColor](ts-types.md#resourcecolor) | Yes  | Font color of the drop-down button.<br>Default value: **'\#E5182431'** |
155
156### selectedOptionBgColor
157
158selectedOptionBgColor(value: ResourceColor)
159
160Sets the background color of the selected option in the drop-down list box.
161
162**Atomic service API**: This API can be used in atomic services since API version 11.
163
164**System capability**: SystemCapability.ArkUI.ArkUI.Full
165
166**Parameters** 
167
168| Name | Type                                      | Mandatory | Description                                             |
169| ------ | ------------------------------------------ | ---- | ------------------------------------------------- |
170| value  | [ResourceColor](ts-types.md#resourcecolor) | Yes  | Background color of the selected option in the drop-down list box.<br>Default value: **'\#33007DFF'** |
171
172### selectedOptionFont
173
174selectedOptionFont(value: Font)
175
176Sets the text font of the selected option in the drop-down list box. 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.
177
178**Atomic service API**: This API can be used in atomic services since API version 11.
179
180**System capability**: SystemCapability.ArkUI.ArkUI.Full
181
182**Parameters** 
183
184| Name | Type                    | Mandatory | Description                                                        |
185| ------ | ------------------------ | ---- | ------------------------------------------------------------ |
186| value  | [Font](ts-types.md#font) | Yes  | Text font of the selected option in the drop-down list box.<br>Default value:<br>{<br>size: '16fp',<br>weight: FontWeight.Regular<br>} |
187
188### selectedOptionFontColor
189
190selectedOptionFontColor(value: ResourceColor)
191
192Sets the font color of the selected option in the drop-down list box.
193
194**Atomic service API**: This API can be used in atomic services since API version 11.
195
196**System capability**: SystemCapability.ArkUI.ArkUI.Full
197
198**Parameters** 
199
200| Name | Type                                      | Mandatory | Description                                               |
201| ------ | ------------------------------------------ | ---- | --------------------------------------------------- |
202| value  | [ResourceColor](ts-types.md#resourcecolor) | Yes  | Font color of the selected option in the drop-down list box.<br>Default value: **'\#ff007dff'** |
203
204### optionBgColor
205
206optionBgColor(value: ResourceColor)
207
208Sets the background color of options in the drop-down list box.
209
210**Atomic service API**: This API can be used in atomic services since API version 11.
211
212**System capability**: SystemCapability.ArkUI.ArkUI.Full
213
214**Parameters** 
215
216| Name | Type                                      | Mandatory | Description                                         |
217| ------ | ------------------------------------------ | ---- | --------------------------------------------- |
218| value  | [ResourceColor](ts-types.md#resourcecolor) | Yes  | Background color of an option in the drop-down list box.<br>Default value: **'\#ffffffff'** |
219
220### optionFont
221
222optionFont(value: Font)
223
224Sets the text font of options in the drop-down list box. 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.
225
226**Atomic service API**: This API can be used in atomic services since API version 11.
227
228**System capability**: SystemCapability.ArkUI.ArkUI.Full
229
230**Parameters** 
231
232| Name | Type                    | Mandatory | Description                                                        |
233| ------ | ------------------------ | ---- | ------------------------------------------------------------ |
234| value  | [Font](ts-types.md#font) | Yes  | Text font of options in the drop-down list box.<br>Default value:<br>{<br>size: '16fp',<br>weight: FontWeight.Regular<br>} |
235
236### optionFontColor
237
238optionFontColor(value: ResourceColor)
239
240Sets the font color of options in the drop-down list box.
241
242**Atomic service API**: This API can be used in atomic services since API version 11.
243
244**System capability**: SystemCapability.ArkUI.ArkUI.Full
245
246**Parameters** 
247
248| Name | Type                                      | Mandatory | Description                                           |
249| ------ | ------------------------------------------ | ---- | ----------------------------------------------- |
250| value  | [ResourceColor](ts-types.md#resourcecolor) | Yes  | Font color of options in the drop-down list box.<br>Default value: **'\#ff182431'** |
251
252### space<sup>10+</sup>
253
254space(value: Length)
255
256Sets the spacing between the text and arrow of an option. This attribute cannot be set in percentage. If the value specified is **null**, **undefined**, or a value less than or equal to 8, the default value is used.
257
258**Atomic service API**: This API can be used in atomic services since API version 11.
259
260**System capability**: SystemCapability.ArkUI.ArkUI.Full
261
262**Parameters** 
263
264| Name | Type                        | Mandatory | Description                                            |
265| ------ | ---------------------------- | ---- | ------------------------------------------------ |
266| value  | [Length](ts-types.md#length) | Yes  | Spacing between the text and arrow of an option.<br>Default value: **8** |
267
268### arrowPosition<sup>10+</sup>
269
270arrowPosition(value: ArrowPosition)
271
272Sets the alignment between the text and arrow of an option.
273
274**Atomic service API**: This API can be used in atomic services since API version 11.
275
276**System capability**: SystemCapability.ArkUI.ArkUI.Full
277
278**Parameters** 
279
280| Name | Type                                     | Mandatory | Description                                                        |
281| ------ | ----------------------------------------- | ---- | ------------------------------------------------------------ |
282| value  | [ArrowPosition](#arrowposition10)  | Yes  | Alignment between the text and arrow of an option.<br>Default value: **ArrowPosition.END** |
283
284### menuAlign<sup>10+</sup>
285
286menuAlign(alignType: MenuAlignType, offset?: Offset)
287
288Sets the alignment between the drop-down button and the drop-down menu.
289
290**Atomic service API**: This API can be used in atomic services since API version 11.
291
292**System capability**: SystemCapability.ArkUI.ArkUI.Full
293
294**Parameters** 
295
296| Name   | Type                                     | Mandatory | Description                                                        |
297| --------- | ----------------------------------------- | ---- | ------------------------------------------------------------ |
298| alignType | [MenuAlignType](#menualigntype10)  | Yes  | Alignment type.<br>Default value: **MenuAlignType.START**              |
299| 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}** |
300
301### optionWidth<sup>11+</sup>
302
303optionWidth(value: Dimension | OptionWidthMode )
304
305Sets the width for the option in the drop-down list box. This attribute cannot be set in percentage. **OptionWidthMode** specifies whether to inherit the width of the drop-down list button.
306
307If 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.
308
309If 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.
310
311**Atomic service API**: This API can be used in atomic services since API version 12.
312
313**System capability**: SystemCapability.ArkUI.ArkUI.Full
314
315**Parameters** 
316
317| Name | Type                                                        | Mandatory | Description              |
318| ------ | ------------------------------------------------------------ | ---- | ------------------ |
319| value  | [Dimension](ts-types.md#dimension10) \| [OptionWidthMode](#optionwidthmode11)  | Yes  | Width of the option in the drop-down list box. |
320
321### optionHeight<sup>11+</sup>
322
323optionHeight(value: Dimension)
324
325Sets the maximum height for the option in the drop-down list box. This attribute cannot be set in percentage. The default and maximum value is 80% of the available height of the screen.
326
327If set to **undefined**, null, or a negative number, this attribute does not take effect. In this case, the default value is used.
328
329The 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.
330
331**Atomic service API**: This API can be used in atomic services since API version 12.
332
333**System capability**: SystemCapability.ArkUI.ArkUI.Full
334
335**Parameters** 
336
337| Name | Type                                | Mandatory | Description                    |
338| ------ | ------------------------------------ | ---- | ------------------------ |
339| value  | [Dimension](ts-types.md#dimension10) | Yes  | Maximum height of the option in the drop-down list box. |
340
341### menuBackgroundColor<sup>11+</sup>
342
343menuBackgroundColor(value: ResourceColor)
344
345Sets the background color of the drop-down list box.
346
347**System capability**: SystemCapability.ArkUI.ArkUI.Full
348
349**Parameters** 
350
351| Name | Type                                      | Mandatory | Description                                            |
352| ------ | ------------------------------------------ | ---- | ------------------------------------------------ |
353| value  | [ResourceColor](ts-types.md#resourcecolor) | Yes  | Background color of the drop-down list box.<br>Default value: **Color.Transparent** |
354
355### menuBackgroundBlurStyle<sup>11+</sup>
356
357menuBackgroundBlurStyle(value: BlurStyle)
358
359Sets the background blur style of the drop-down list box.
360
361**System capability**: SystemCapability.ArkUI.ArkUI.Full
362
363**Parameters** 
364
365| Name | Type                                        | Mandatory | Description                                                        |
366| ------ | -------------------------------------------- | ---- | ------------------------------------------------------------ |
367| value  | [BlurStyle](ts-appendix-enums.md#blurstyle9) | Yes  | Background blur style of the drop-down list box.<br>Default value: **BlurStyle.COMPONENT_ULTRA_THICK** |
368
369## OptionWidthMode<sup>11+</sup>
370
371**Atomic service API**: This API can be used in atomic services since API version 12.
372
373| Name       | Description                          |
374| ----------- | ------------------------------ |
375| FIT_CONTENT | Uses the default width, that is, width of two columns.           |
376| FIT_TRIGGER | Inherits the width of the drop-down list button. |
377
378## ArrowPosition<sup>10+</sup>
379
380**Atomic service API**: This API can be used in atomic services since API version 11.
381
382| Name               | Description              |
383| ------------------- | ------------------ |
384| END<sup>10+</sup>   | The text is in front of the arrow. |
385| START<sup>10+</sup> | The arrow is in front of the text. |
386
387## MenuAlignType<sup>10+</sup>
388
389**Atomic service API**: This API can be used in atomic services since API version 11.
390
391| Name               | Description              |
392| ------------------- | ------------------ |
393| START               | Aligned with the start edge in the same direction as the language in use. |
394| CENTER              | Aligned with the center. |
395| END                 | Aligned with the end edge in the same direction as the language in use. |
396
397## MenuItemConfiguration<sup>12+</sup>
398
399| Name | Type                                        | Mandatory | Description                                                        |
400| ------ | -------------------------------------------- | ---- | ------------------------------------------------------------ |
401| value  | [ResourceStr](ts-types.md#resourcestr) | Yes  | Text content of the option in the drop-down list box. |
402| icon  | [ResourceStr](ts-types.md#resourcestr) | No  | Icon of the option in the drop-down list box. |
403| symbolIcon<sup>12+</sup>  | [SymbolGlyphModifier](ts-universal-attributes-attribute-modifier.md) | No  | Symbol icon of the option in the drop-down list box.|
404| selected  | boolean | Yes  | Whether the option in the drop-down list box is selected.<br>Default value: **false** |
405| index  | number | Yes  | Index of the option in the drop-down list box. |
406| triggerSelect  | (index: number, value: string) => void | Yes  | Invoked when an option in the drop-down list box 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. |
407
408## Events
409
410### onSelect
411
412onSelect(callback: (index: number, value: string) => void)
413
414Invoked when an option in the drop-down list box is selected.
415
416**Atomic service API**: This API can be used in atomic services since API version 11.
417
418**System capability**: SystemCapability.ArkUI.ArkUI.Full
419
420**Parameters** 
421
422| Name | Type  | Mandatory | Description          |
423| ------ | ------ | ---- | -------------- |
424| index  | number | Yes  | Index of the selected option. |
425| value  | string | Yes  | Value of the selected option.  |
426
427##  Example 1
428
429```ts
430// xxx.ets
431@Entry
432@Component
433struct SelectExample {
434  @State text: string = "TTTTT"
435  @State index: number = 2
436  @State space: number = 8
437  @State arrowPosition: ArrowPosition = ArrowPosition.END
438  build() {
439    Column() {
440      Select([{ value: 'aaa', icon: $r("app.media.selecticon") },
441        { value: 'bbb', icon: $r("app.media.selecticon") },
442        { value: 'ccc', icon: $r("app.media.selecticon") },
443        { value: 'ddd', icon: $r("app.media.selecticon") }])
444        .selected(this.index)
445        .value(this.text)
446        .font({ size: 16, weight: 500 })
447        .fontColor('#182431')
448        .selectedOptionFont({ size: 16, weight: 400 })
449        .optionFont({ size: 16, weight: 400 })
450        .space(this.space)
451        .arrowPosition(this.arrowPosition)
452        .menuAlign(MenuAlignType.START, {dx:0, dy:0})
453        .optionWidth(200)
454        .optionHeight(300)
455        .onSelect((index:number, text?: string | undefined)=>{
456          console.info('Select:' + index)
457          this.index = index;
458          if(text){
459            this.text = text;
460          }
461        })
462    }.width('100%')
463  }
464}
465```
466
467![](figures/selectExample.png)
468
469##  Example 2
470This example implements a custom drop-down list box, each option of which consists of text + image + blank area + text + drawn triangle. After a menu option is clicked, the text content of the menu option is displayed.
471
472```ts
473import { MenuItemModifier } from '@kit.ArkUI'
474
475class MyMenuItemContentModifier implements ContentModifier<MenuItemConfiguration> {
476  modifierText: string = ""
477  constructor(text: string) {
478    this.modifierText = text;
479  }
480  applyContent(): WrappedBuilder<[MenuItemConfiguration]> {
481    return wrapBuilder(MenuItemBuilder)
482  }
483}
484
485@Builder
486function MenuItemBuilder(configuration: MenuItemConfiguration) {
487  Row() {
488    Text(configuration.value)
489    Blank()
490    Image(configuration.icon).size({ width: 40, height: 40 })
491    Blank(30)
492    Text((configuration.contentModifier as MyMenuItemContentModifier).modifierText)
493    Path()
494      .width('100px')
495      .height('150px')
496      .commands('M40 0 L80 100 L0 100 Z')
497      .fillOpacity(0)
498      .stroke(Color.Black)
499      .strokeWidth(3)
500  }
501  .onClick(() => {
502    configuration.triggerSelect(configuration.index, configuration.value.valueOf().toString())
503  })
504}
505
506@Entry
507@Component
508struct SelectExample {
509  @State text: string = "With modifier"
510  build() {
511    Column() {
512      Row() {
513        Select([{ value: 'item1', icon: $r("app.media.icon") },
514          { value: 'item2', icon: $r("app.media.icon") }])
515          .value(this.text)
516          .onSelect((index:number, text?: string)=>{
517            console.info('Select index:' + index)
518            console.info('Select text:' + text)
519          })
520          .menuItemContentModifier(new MyMenuItemContentModifier("I'm from Modifier"))
521
522      }.alignItems(VerticalAlign.Center).height("50%")
523    }
524  }
525}
526```
527![](figures/selectBuilderExample.png)
528
529##  Example 3
530This example implements a drop-down list box, each option of which uses a symbol as its image.
531
532```ts
533// xxx.ets
534import { SymbolGlyphModifier } from '@kit.ArkUI'
535
536@Entry
537@Component
538struct SelectExample {
539  @State text: string = "TTTTT"
540  @State index: number = 2
541  @State space: number = 8
542  @State arrowPosition: ArrowPosition = ArrowPosition.END
543  @State symbolModifier1: SymbolGlyphModifier = new SymbolGlyphModifier($r('sys.symbol.ohos_wifi')).fontColor([Color.Green]);
544  @State symbolModifier2: SymbolGlyphModifier = new SymbolGlyphModifier($r('sys.symbol.ohos_star')).fontColor([Color.Red]);
545  @State symbolModifier3: SymbolGlyphModifier = new SymbolGlyphModifier($r('sys.symbol.ohos_trash')).fontColor([Color.Gray]);
546  @State symbolModifier4: SymbolGlyphModifier = new SymbolGlyphModifier($r('sys.symbol.exposure')).fontColor([Color.Gray]);
547  build() {
548    Column() {
549      Select([{ value: 'aaa', symbolIcon: this.symbolModifier1 },
550        { value: 'bbb', symbolIcon: this.symbolModifier2 },
551        { value: 'ccc', symbolIcon: this.symbolModifier3 },
552        { value: 'ddd', symbolIcon: this.symbolModifier4 }])
553        .selected(this.index)
554        .value(this.text)
555        .font({ size: 16, weight: 500 })
556        .fontColor('#182431')
557        .selectedOptionFont({ size: 16, weight: 400 })
558        .optionFont({ size: 16, weight: 400 })
559        .space(this.space)
560        .arrowPosition(this.arrowPosition)
561        .menuAlign(MenuAlignType.START, {dx:0, dy:0})
562        .onSelect((index:number, text?: string | undefined)=>{
563          console.info('Select:' + index)
564          this.index = index;
565          if(text){
566            this.text = text;
567          }
568        })
569    }.width('100%')
570  }
571}
572```
573
574![](figures/SelectSymbol.png)
575
576##  Example 4
577This example implements a custom drop-down list box, 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.
578
579```ts
580import { MenuItemModifier, SymbolGlyphModifier } from '@kit.ArkUI'
581
582class MyMenuItemContentModifier implements ContentModifier<MenuItemConfiguration> {
583  modifierText: string = ""
584  constructor(text: string) {
585    this.modifierText = text;
586  }
587  applyContent(): WrappedBuilder<[MenuItemConfiguration]> {
588    return wrapBuilder(MenuItemBuilder)
589  }
590}
591
592@Builder
593function MenuItemBuilder(configuration: MenuItemConfiguration) {
594  Row() {
595    Text(configuration.value)
596    Blank()
597    if (configuration.symbolIcon) {
598      SymbolGlyph().attributeModifier(configuration.symbolIcon).fontSize(24)
599    } else if (configuration.icon) {
600      Image(configuration.icon).size({ width: 24, height: 24 })
601    }
602    Blank(30)
603    Text((configuration.contentModifier as MyMenuItemContentModifier).modifierText)
604    Blank(30)
605    Path()
606      .width('100px')
607      .height('150px')
608      .commands('M40 0 L80 100 L0 100 Z')
609      .fillOpacity(0)
610      .stroke(Color.Black)
611      .strokeWidth(3)
612  }
613  .onClick(() => {
614    configuration.triggerSelect(configuration.index, configuration.value.valueOf().toString())
615  })
616}
617
618@Entry
619@Component
620struct SelectExample {
621  @State text: string = "Content Modifier Select"
622  @State symbolModifier1: SymbolGlyphModifier = new SymbolGlyphModifier($r('sys.symbol.ohos_trash')).fontColor([Color.Gray]);
623  @State symbolModifier2: SymbolGlyphModifier = new SymbolGlyphModifier($r('sys.symbol.exposure')).fontColor([Color.Gray]);
624  build() {
625    Column() {
626      Row() {
627        Select([{ value: 'item1', icon: $r('app.media.icon'), symbolIcon: this.symbolModifier1 },
628          { value: 'item1', icon: $r('app.media.icon'), symbolIcon: this.symbolModifier2 }])
629          .value(this.text)
630          .onSelect((index:number, text?: string)=>{
631            console.info('Select index:' + index)
632            console.info('Select text:' + text)
633          })
634          .menuItemContentModifier(new MyMenuItemContentModifier("Content Modifier"))
635
636      }.alignItems(VerticalAlign.Center).height('50%')
637    }
638  }
639}
640```
641![](figures/SelectBuilderSymbol.png)
642
643##  Example 5
644This example implements a drop-down list box with custom dividers.
645
646```ts
647// xxx.ets
648@Entry
649@Component
650struct SelectExample {
651  @State text: string = "TTTTT"
652  @State index: number = -1
653  @State arrowPosition: ArrowPosition = ArrowPosition.END
654  build() {
655    Column() {
656      Select([{ value: 'aaa', icon: $r("app.media.icon") },
657        { value: 'bbb', icon: $r("app.media.icon") },
658        { value: 'ccc', icon: $r("app.media.icon") },
659        { value: 'ddd', icon: $r("app.media.icon") }])
660        .selected(this.index)
661        .value(this.text)
662        .font({ size: 16, weight: 500 })
663        .fontColor('#182431')
664        .selectedOptionFont({ size: 16, weight: 400 })
665        .optionFont({ size: 16, weight: 400 })
666        .arrowPosition(this.arrowPosition)
667        .menuAlign(MenuAlignType.START, {dx:0, dy:0})
668        .optionWidth(200)
669        .optionHeight(300)
670        .divider( { strokeWidth: 5, color: Color.Blue, startMargin: 10, endMargin: 10 })
671        .onSelect((index:number, text?: string | undefined)=>{
672          console.info('Select:' + index)
673          this.index = index;
674          if(text){
675            this.text = text;
676          }
677        })
678    }.width('100%')
679  }
680}
681```
682![](figures/SelectCustomDivider.png)
683
684##  Example 6
685This example implements a drop-down list box where the dividers are hidden.
686
687```ts
688// xxx.ets
689@Entry
690@Component
691struct SelectExample {
692  @State text: string = "TTTTT"
693  @State index: number = -1
694  @State arrowPosition: ArrowPosition = ArrowPosition.END
695  build() {
696    Column() {
697      Select([{ value: 'aaa', icon: $r("app.media.icon") },
698        { value: 'bbb', icon: $r("app.media.icon") },
699        { value: 'ccc', icon: $r("app.media.icon") },
700        { value: 'ddd', icon: $r("app.media.icon") }])
701        .selected(this.index)
702        .value(this.text)
703        .font({ size: 16, weight: 500 })
704        .fontColor('#182431')
705        .selectedOptionFont({ size: 16, weight: 400 })
706        .optionFont({ size: 16, weight: 400 })
707        .arrowPosition(this.arrowPosition)
708        .menuAlign(MenuAlignType.START, {dx:0, dy:0})
709        .optionWidth(200)
710        .optionHeight(300)
711        .divider( null )
712        .onSelect((index:number, text?: string | undefined)=>{
713          console.info('Select:' + index)
714          this.index = index;
715          if(text){
716            this.text = text;
717          }
718        })
719    }.width('100%')
720  }
721}
722```
723![](figures/SelectHideDivider.png)
724