1# ChipGroup
2
3**ChipGroup** is an advanced component that provides a group of chips for scenarios such as categorizing files or resource content.
4
5> **NOTE**
6>
7> This component is supported since API version 12. Updates will be marked with a superscript to indicate their earliest API version.
8
9## Modules to Import
10
11```typescript
12import { ChipSize, ChipGroup } from '@kit.ArkUI'
13```
14
15## Child Components
16
17Not supported
18
19## ChipGroup
20
21```
22ChipGroup({
23  items: ChipGroupItemOptions[],
24  itemStyle?: ChipItemStyle,
25  selectedIndexes?: Array<number>,
26  multiple?: boolean,
27  chipGroupSpace?: ChipGroupSpaceOptions,
28  chipGroupPadding?: ChipGroupPaddingOptions,
29  onChange?: (selectedIndexes: Array<number>) => void,
30  suffix?: Callback<void>
31})
32```
33
34**Decorator**: @Component
35
36**Atomic service API**: This API can be used in atomic services since API version 12.
37
38**System capability**: SystemCapability.ArkUI.ArkUI.Full
39
40| Name           | Type                                           | Mandatory| Description                                                                                    |
41| --------------- | ----------------------------------------------- | ---- | ------------------------------------------------------------                             |
42| items           | [ChipGroupItemOptions[]](#chipgroupitemoptions) | Yes  | Specific attributes of individual chips. For details, see [ChipGroupItemOptions[]](#chipgroupitemoptions).<br>If this parameter is set to **undefined**, the chip group is empty by default.              |
43| itemStyle       | [ChipItemStyle](#chipitemstyle)                 | No  | Chip style, including the color and size. For details, see [ChipItemStyle](#chipitemstyle).<br>If this parameter is set to **undefined**, the default chip style is used.                |
44| selectedIndexes | Array&lt;number&gt;                             | No  | Index of the selected chip.<br>If this parameter is set to **undefined**, the first chip is selected.                                           |
45| multiple        | boolean                                         | No  | Whether multiple chips can be selected.<br>**true**: Multiple chips can be selected.<br>**false**: Only one chip can be selected.<br>Default value: **false**<br>If this parameter is set to **undefined**, the default value is used.                    |
46| chipGroupSpace  | [ChipGroupSpaceOptions](#chipgroupspaceoptions) | No  | Left and right padding, and the spacing between chips. For details, see [ChipGroupSpaceOptions](#chipgroupspaceoptions).<br>If this parameter is set to **undefined**, the default value is used.|
47| chipGroupPadding  | [ChipGroupPaddingOptions](#chipgrouppaddingoptions) | No  | Top and bottom padding, used to control the overall height. For details, see [ChipGroupPaddingOptions](#chipgrouppaddingoptions).<br>If this parameter is set to **undefined**, the default value is used.|
48| onChange        | Callback\<Array\<number>>  | No  | Callback invoked when the chip status changes.<br>If the value is **undefined**, the event is unbound.                                                               |
49| suffix          | ()=>void                                        | No  | Suffix, which is a builder customized by the user and requires importing the [IconGroupSuffix](#icongroupsuffix) API when used.<br>Default value: The suffix is not displayed if not passed.|
50
51> **NOTE**
52>
53> 1. When **multiple** is set to **false**, if **selectedIndexes** is not passed in, the first chip is automatically selected by default. However, if the provided **selectedIndexes** includes multiple elements, the chip at the first index is selected by default.
54>
55> 2. For the **suffix** API to work, you must include the **IconGroupSuffix** API when implementing it. If no value is specified for **suffix**, no suffix will be displayed.
56>
57> 3. The icon fill colors, such as **fillColor** and **activedFillColor**, are set to be consistent with the font color (**fontColor**). To differentiate the icon colors from the font color, include **prefixSymbol** when you pass in [ChipGroupSpaceOptions](#chipgroupspaceoptions).
58
59## ChipGroupItemOptions
60
61Defines the specific attributes of individual chips.
62
63**Atomic service API**: This API can be used in atomic services since API version 12.
64
65**System capability**: SystemCapability.ArkUI.ArkUI.Full
66
67| Name        | Type                          | Mandatory| Description                             |
68| ----------   | ----------------------------- | ---- | ----------------------------------- |
69| prefixIcon   | [IconOptions](#iconoptions)   | No  | Prefix image icon of the chip.                  |
70| prefixSymbol | [ChipSymbolGlyphOptions](ohos-arkui-advanced-Chip.md#chipsymbolglyphoptions12) | No  | Prefix symbol glyph icon of the chip.            |
71| label        | [LabelOptions](#labeloptions) | Yes  | Text of the chip.                           |
72| suffixIcon<sup>(deprecated)</sup>   | [IconOptions](#iconoptions) | No  | Suffix image icon of the chip.<br>**NOTE**<br>This API is supported since API version 12 and deprecated since API version 14. You are advised to use **suffixImageIcon** instead.|
73| suffixSymbol | [ChipSymbolGlyphOptions](ohos-arkui-advanced-Chip.md#chipsymbolglyphoptions12) | No  | Suffix symbol glyph icon of the chip.            |
74| allowClose   | boolean                       | No  | Whether to show the close icon.<br>Default value: **false** |
75| suffixImageIcon<sup>14+</sup> | [SuffixImageIconOptions](#suffiximageiconoptions14) | No| Suffix image icon of the chip.|
76| suffixSymbolOptions<sup>14+</sup> | [ChipSuffixSymbolGlyphOptions](ohos-arkui-advanced-Chip.md#chipsuffixsymbolglyphoptions14) | No| Suffix symbol icon of the chip.|
77| closeOptions<sup>14+</sup> | [CloseOptions](ohos-arkui-advanced-Chip.md#closeoptions14) | No| Accessibility options of the default close icon.|
78| accessibilityDescription<sup>14+</sup> | [ResourceStr](ts-types.md#resourcestr) | No| Accessibility description of the chip.|
79| accessibilityLevel<sup>14+</sup> | string | No| Accessibility level of the chip.<br>Default value: **"auto"**|
80
81
82>**NOTE**
83>
84>If **suffixIcon** is specified, **allowClose** has no effect.
85
86## ChipItemStyle
87
88Defines the common attributes shared by all chips in the chip group.
89
90**Atomic service API**: This API can be used in atomic services since API version 12.
91
92**System capability**: SystemCapability.ArkUI.ArkUI.Full
93
94| Name                   | Type                                                        | Mandatory| Description                                                        |
95| ----------------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
96| size                    | [ChipSize](ohos-arkui-advanced-Chip.md#chipsize) \| [SizeOptions](ts-types.md#sizeoptions) | No  | Chip size. To use this API, you must import the **ChipSize** type from the **Chip** component.<br>Default value: **ChipSize**: **ChipSize.NORMAL**<br> If this parameter is set to **undefined**, the default value is used.|
97| backgroundColor         | [ResourceColor](ts-types.md#resourcecolor)                   | No  | Background color of the chip.<br>Default value: **$r('sys.color.ohos_id_color_button_normal')**<br>If this parameter is set to **undefined**, the default value is used.|
98| fontColor               | [ResourceColor](ts-types.md#resourcecolor)                   | No  | Font color of the chip.<br>Default value: **$r('sys.color.ohos_id_color_text_primary')**<br>If this parameter is set to **undefined**, the default value is used.|
99| selectedFontColor       | [ResourceColor](ts-types.md#resourcecolor)                   | No  | Font color of the chip when it is activated or selected.<br>Default value: **$r('sys.color.ohos_id_color_text_primary_contrary')**<br>If this parameter is set to **undefined**, the default value is used.|
100| selectedBackgroundColor | [ResourceColor](ts-types.md#resourcecolor)                   | No  | Background color of the chip when it is activated or selected.<br>Default value: **$r('sys.color.ohos_id_color_emphasize').**<br>If this parameter is set to **undefined**, the default value is used.|
101
102> **NOTE**
103>
104> 1. The size settings for chips can be of two types: (1) **ChipSize**, which conveniently offers two size options, **NORMAL** and **SMALL**; (2) **SizeOptions**.
105>
106> 2. If **undefined** is assigned to **backgroundColor** or **selectedBackgroundColor**, the default background color is used. If an invalid value is assigned, the background color is transparent.
107
108## ChipGroupSpaceOptions
109
110Defines the left and right padding of the chip group, and the spacing between chips.
111
112**Atomic service API**: This API can be used in atomic services since API version 12.
113
114**System capability**: SystemCapability.ArkUI.ArkUI.Full
115
116| Name      | Type           | Mandatory| Description                                            |
117| ---------- | -------------- | ---- | ------------------------------------------------ |
118| itemSpace | string \| number  | No  | Spacing between chips. Percentage values are not supported.<br>Default value: **8**<br>Unit: vp<br>If this parameter is set to **undefined**, the default value is used.     |
119| startSpace | [Length](ts-types.md#length)         | No  | Left padding. Percentage values are not supported.<br>Default value: **16**<br>Unit: vp<br>If this parameter is set to **undefined**, the default value is used.               |
120| endSpace   | [Length](ts-types.md#length)         | No  | Right padding. Percentage values are not supported.<br>Default value: **16**<br>Unit: vp<br>If this parameter is set to **undefined**, the default value is used.|
121
122## ChipGroupPaddingOptions
123
124Defines the top and bottom padding of the chip group, used to control the overall height.
125
126**Atomic service API**: This API can be used in atomic services since API version 12.
127
128**System capability**: SystemCapability.ArkUI.ArkUI.Full
129
130| Name  | Type           | Mandatory| Description                                                     |
131| ------ | -------------- | ---- | ------------------------------------------------            |
132| top    | [Length](ts-types.md#length)         | Yes  | Top padding. Percentage values are not supported.<br>Default value: **14**<br>If this parameter is set to **undefined**, the default value is used.       |
133| bottom | [Length](ts-types.md#length)         | Yes  | Bottom padding. Percentage values are not supported.<br>Default value: **14**<br>If this parameter is set to **undefined**, the default value is used.        |
134
135## SuffixImageIconOptions<sup>14+</sup>
136
137Defines the suffix iconoptions.
138
139Inherits [IconOptions](#iconoptions).
140
141**Atomic service API**: This API can be used in atomic services since API version 14.
142
143**System capability**: SystemCapability.ArkUI.ArkUI.Full
144
145| Name| Type| Mandatory| Description|
146| ---- | ---- | --- | ---- |
147| action | [VoidCallback](ts-types.md#voidcallback12) | No| Action of the suffix icon.|
148| accessibilityText | [ResourceStr](ts-types.md#resourcestr) | No| Accessibility text of the suffix icon.|
149| accessibilityLevel | string | No| Accessibility level of the suffix icon.<br>Default value: **"auto"**|
150
151## SymbolItemOptions<sup>14+</sup>
152
153Defines the options for the trailing symbol item in a chip group.
154
155**Atomic service API**: This API can be used in atomic services since API version 14.
156
157**System capability**: SystemCapability.ArkUI.ArkUI.Full
158
159| Name| Type| Mandatory| Description|
160| ---- | ---- | --- | ---- |
161| symbol | [SymbolGlyphModifier](ts-universal-attributes-attribute-modifier.md) | No| Settings of the trailing symbol item.|
162| action | [VoidCallback](ts-types.md#voidcallback12) | No| Action of the trailing symbol item.|
163| accessibilityText | [ResourceStr](ts-types.md#resourcestr) | No| Accessibility text of the trailing symbol item.|
164| accessibilityDescription | [ResourceStr](ts-types.md#resourcestr) | No| Accessibility description of the trailing symbol item.|
165| accessibilityLevel | string | No| Accessibility level of the trailing symbol item.<br>Default value: **"auto"**|
166
167## IconGroupSuffix
168
169**Decorator**: @Component
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| Name    | Type                   | Mandatory| Description                                                             |
176| -------- | ---------------------- | ---- | ----------------------------------------------|
177| items    | Array<[IconItemOptions](#iconitemoptions) \| [SymbolGlyphModifier](ts-universal-attributes-attribute-modifier.md) \| [ SymbolItemOptions](#symbolItemoptions14)> | Yes  | Custom builder items.|
178
179> **NOTE**
180>
181> With **SymbolGlyphModifier**, neither modifying the animation type with **symbolEffect** nor setting the effect strategy with **effectStrategy** is supported.
182>
183
184## IconItemOptions
185
186Defines the tail builder, which imposes limitations on the settings for the background size and color.
187
188**Atomic service API**: This API can be used in atomic services since API version 12.
189
190**System capability**: SystemCapability.ArkUI.ArkUI.Full
191
192| Name    | Type                           | Mandatory| Description                                   |
193| -------- | --------------                 | ---- | ------------------------------           |
194| icon     | [IconOptions](#iconoptions)    | Yes  | Custom builder icon.<br>When the chip size is **ChipSize.SMALL**, the default suffix is at {width: 16, height: 16}.<br>When the chip size is **ChipSize.NORMAL**, the default suffix is at {width: 24, height: 24}.<br> To dynamically change the size, you must use the [SymbolGlyphModifier](ts-universal-attributes-attribute-modifier.md) type when importing the [IconGroupSuffix](#icongroupsuffix) API.                      |
195| action   | Callback\<void>        | Yes  | Callback of custom builder items.<br>If the value is **undefined**, the event is unbound.           |
196| accessibilityText<sup>14+</sup> | [ResourceStr](ts-types.md#resourcestr) | No| Accessibility text of the trailing symbol item.|
197| accessibilityDescription<sup>14+</sup> | [ResourceStr](ts-types.md#resourcestr) | No| Accessibility description of the trailing symbol item.|
198| accessibilityLevel<sup>14+</sup> | string | No| Accessibility level of the trailing symbol item.<br>Default value: **"auto"**|
199
200## IconOptions
201
202Defines the common attributes of icons.
203
204**Atomic service API**: This API can be used in atomic services since API version 12.
205
206**System capability**: SystemCapability.ArkUI.ArkUI.Full
207
208| Name| Type                                  | Mandatory| Description                                                        |
209| ---- | -------------------------------------- | ---- | ------------------------------------------------------------ |
210| src  | [ResourceStr](ts-types.md#resourcestr) | Yes  | Icon source, which can be a specific image path or an image reference.                                    |
211| size | [SizeOptions](ts-types.md#sizeoptions) | No  | Icon size. This parameter cannot be set in percentage.|
212
213## LabelOptions
214
215Defines the common attributes of labels.
216
217**Atomic service API**: This API can be used in atomic services since API version 12.
218
219**System capability**: SystemCapability.ArkUI.ArkUI.Full
220
221| Name| Type  | Mandatory | Description    |
222| ---- | ------ | ---- | -------- |
223| text | string | Yes  | Text of the chip. |
224
225## Example
226
227### Example 1: Suffix Not Included
228
229```typescript
230import { ChipSize, ChipGroup } from '@kit.ArkUI'
231
232@Entry
233@Preview
234@Component
235struct Index {
236  @State selected_index: Array<number> = [0, 1, 2, 3, 4, 5, 6]
237  build() {
238    Column() {
239      ChipGroup({
240        items: [
241          {
242            prefixIcon: { src: $r('app.media.icon') },
243            label: { text: "Chip 1" },
244            suffixIcon: { src: $r('sys.media.ohos_ic_public_cut') },
245            allowClose: false
246          },
247          {
248            prefixIcon: { src: $r('sys.media.ohos_ic_public_copy') },
249            label: { text: "Chip 2" },
250            allowClose: true
251          },
252          {
253            prefixIcon: { src: $r('sys.media.ohos_ic_public_clock') },
254            label: { text: "Chip 3" },
255            allowClose: true
256          },
257          {
258            prefixIcon: { src: $r('sys.media.ohos_ic_public_cast_stream') },
259            label: { text: "Chip 4" },
260            allowClose: true
261          },
262          {
263            prefixIcon: { src: $r('sys.media.ohos_ic_public_cast_mirror') },
264            label: { text: "Chip 5" },
265            allowClose: true
266          },
267          {
268            prefixIcon: { src: $r('sys.media.ohos_ic_public_cast_stream') },
269            label: { text: "Chip 6" },
270            allowClose: true
271          },
272        ],
273        itemStyle: {
274          size: ChipSize.SMALL,
275          backgroundColor: $r('sys.color.ohos_id_color_button_normal'),
276          fontColor: $r('sys.color.ohos_id_color_text_primary'),
277          selectedBackgroundColor: $r('sys.color.ohos_id_color_emphasize'),
278          selectedFontColor: $r('sys.color.ohos_id_color_text_primary_contrary'),
279        },
280        selectedIndexes: this.selected_index,
281        multiple: false,
282        chipGroupSpace: { itemSpace: 8, endSpace: 0 },
283        chipGroupPadding: { top: 10, bottom: 10 },
284        onChange: (activatedChipsIndex:Array<number>) => {
285          console.log('chips on clicked, activated index ' + activatedChipsIndex)
286        },
287      })
288    }
289  }
290}
291```
292
293![](figures/chipGroupDemo1.jpeg)
294
295### Example 2: Suffix Included
296
297```typescript
298import { ChipSize, ChipGroup, IconGroupSuffix  } from '@kit.ArkUI'
299
300@Entry
301@Preview
302@Component
303struct Index {
304  @State selected_index: Array<number> = [0, 1, 2, 3, 4, 5, 6]
305  @State selected_state: boolean = true;
306
307  @LocalBuilder
308  ChipGroupSuffix(): void {
309    IconGroupSuffix({
310      items: [{
311        icon: { src: $r('sys.media.ohos_ic_public_search_filled'), size: { width: 36, height: 36 } },
312        action: () => {
313          if (this.selected_state == false) {
314            this.selected_index = [0, 1, 2, 3, 4, 5, 6]
315            this.selected_state = true
316          } else {
317            this.selected_index = []
318            this.selected_state = false
319          }
320        }
321      }
322      ]
323    })
324  }
325
326  build() {
327    Column() {
328      ChipGroup({
329        items: [
330          {
331            prefixIcon: { src: $r('app.media.icon') },
332            label: { text: "Chip 1" },
333            suffixIcon: { src: $r('sys.media.ohos_ic_public_cut') },
334            allowClose: false
335          },
336          {
337            prefixIcon: { src: $r('sys.media.ohos_ic_public_copy') },
338            label: { text: "Chip 2" },
339            allowClose: true
340          },
341          {
342            prefixIcon: { src: $r('sys.media.ohos_ic_public_clock') },
343            label: { text: "Chip 3" },
344            allowClose: true
345          },
346          {
347            prefixIcon: { src: $r('sys.media.ohos_ic_public_cast_stream') },
348            label: { text: "Chip 4" },
349            allowClose: true
350          },
351          {
352            prefixIcon: { src: $r('sys.media.ohos_ic_public_cast_mirror') },
353            label: { text: "Chip 5" },
354            allowClose: true
355          },
356          {
357            prefixIcon: { src: $r('sys.media.ohos_ic_public_cast_stream') },
358            label: { text: "Chip 6" },
359            allowClose: true
360          },
361        ],
362        itemStyle: {
363          size: ChipSize.NORMAL,
364          backgroundColor: $r('sys.color.ohos_id_color_button_normal'),
365          fontColor: $r('sys.color.ohos_id_color_text_primary'),
366          selectedBackgroundColor: $r('sys.color.ohos_id_color_emphasize'),
367          selectedFontColor: $r('sys.color.ohos_id_color_text_primary_contrary'),
368        },
369        selectedIndexes: this.selected_index,
370        multiple: true,
371        chipGroupSpace: { itemSpace: 8, endSpace: 0 },
372        chipGroupPadding: { top: 10, bottom: 10 },
373        onChange: (activatedChipsIndex: Array<number>) => {
374          console.log('chips on clicked, activated index ' + activatedChipsIndex)
375        },
376        suffix: this.ChipGroupSuffix
377      })
378    }
379  }
380}
381```
382
383![](figures/chipGroupDemo2.jpeg)
384
385### Example 3
386This example implements **IconGroupSuffix** and **ChipGroup** with **SymbolGlyph** resources.
387```typescript
388import { ChipSize, ChipGroup, IconGroupSuffix, SymbolGlyphModifier } from '@kit.ArkUI'
389
390@Entry
391@Preview
392@Component
393struct Index {
394  @State selected_index: Array<number> = [0, 1, 2, 3, 4, 5, 6];
395  @State selected_state: boolean = true;
396  @State prefixModifierNormal: SymbolGlyphModifier = new SymbolGlyphModifier($r('sys.symbol.ohos_star'));
397  @State prefixModifierActivated: SymbolGlyphModifier = new SymbolGlyphModifier($r('sys.symbol.ohos_star')).fontColor([Color.Red]);
398  @State suffixModifierNormal: SymbolGlyphModifier = new SymbolGlyphModifier($r('sys.symbol.ohos_wifi'));
399  @State suffixModifierActivated: SymbolGlyphModifier = new SymbolGlyphModifier($r('sys.symbol.ohos_wifi')).fontColor([Color.Red]);
400
401  @LocalBuilder
402  ChipGroupSuffix(): void {
403    IconGroupSuffix({
404      items: [
405        new SymbolGlyphModifier($r('sys.symbol.magnifyingglass'))
406          .onClick(() => {
407            if (this.selected_state == false) {
408              this.selected_index = [0, 1, 2, 3, 4, 5, 6];
409              this.selected_state = true;
410            } else {
411              this.selected_index = [];
412              this.selected_state = false;
413            }
414          })
415      ]
416    })
417  }
418
419  build() {
420    Column() {
421      ChipGroup({
422        items: [
423          {
424            prefixSymbol: { normal: this.prefixModifierNormal, activated: this.prefixModifierActivated },
425            label: { text: "Chip 1" },
426            suffixSymbol: { normal: this.suffixModifierNormal, activated: this.suffixModifierActivated },
427            allowClose: false,
428          },
429          {
430            prefixSymbol: { normal: this.prefixModifierNormal, activated: this.prefixModifierActivated },
431            label: { text: "Chip 2" },
432            allowClose: true,
433          },
434          {
435            prefixIcon: { src: $r('sys.media.ohos_ic_public_clock') },
436            label: { text: "Chip 3" },
437            allowClose: true,
438          },
439          {
440            prefixIcon: { src: $r('sys.media.ohos_ic_public_cast_stream') },
441            label: { text: "Chip 4" },
442            allowClose: true,
443          },
444          {
445            prefixIcon: { src: $r('sys.media.ohos_ic_public_cast_mirror') },
446            label: { text: "Chip 5" },
447            allowClose: true,
448          },
449          {
450            prefixIcon: { src: $r('sys.media.ohos_ic_public_cast_stream') },
451            label: { text: "Chip 6" },
452            allowClose: true,
453          },
454        ],
455        itemStyle: {
456          size: ChipSize.NORMAL,
457          backgroundColor: $r('sys.color.ohos_id_color_button_normal'),
458          fontColor: $r('sys.color.ohos_id_color_text_primary'),
459          selectedBackgroundColor: $r('sys.color.ohos_id_color_emphasize'),
460          selectedFontColor: $r('sys.color.ohos_id_color_text_primary_contrary'),
461        },
462        selectedIndexes: this.selected_index,
463        multiple: true,
464        chipGroupSpace: { itemSpace: 8, endSpace: 0 },
465        chipGroupPadding: { top: 10, bottom: 10 },
466        onChange: (activatedChipsIndex: Array<number>) => {
467          console.log('chips on clicked, activated index ' + activatedChipsIndex)
468        },
469        suffix: this.ChipGroupSuffix
470      })
471    }
472  }
473}
474
475```
476![](figures/chipGroupDemo3.jpeg)
477
478### Example 4
479
480This example implements the screen reader feature for a chip group with and without a suffix area in a single-selection scenario.
481
482```typescript
483import { ChipGroup, IconGroupSuffix, SymbolGlyphModifier } from '@kit.ArkUI';
484
485@Builder function DefaultFunction(): void {}
486
487@Component
488struct SectionGroup {
489  @Prop
490  @Require
491  title: ResourceStr;
492  @BuilderParam
493  @Require
494  content: () => void = DefaultFunction;
495
496  build() {
497    Column({ space: 4 }) {
498      Text(this.title)
499        .fontColor('#FF666666')
500        .fontSize(12)
501      Column({ space: 8 }) {
502        this.content()
503      }
504    }
505    .alignItems(HorizontalAlign.Start)
506    .width('100%')
507  }
508}
509@Component
510struct SectionItem {
511  @Prop
512  @Require
513  title: ResourceStr;
514  @BuilderParam
515  @Require
516  content: () => void = DefaultFunction;
517
518  build() {
519    Column({ space: 12 }) {
520      Text(this.title)
521      this.content()
522    }
523    .backgroundColor('#FFFFFFFF')
524    .borderRadius(12)
525    .padding(12)
526    .width('100%')
527  }
528}
529
530@Entry
531@Component
532export struct ChipGroupExample2 {
533  @LocalBuilder
534  Suffix() {
535    IconGroupSuffix({
536      items: [
537        {
538          icon: { src: $r('sys.media.ohos_ic_public_more'), },
539          accessibilityText: 'More',
540          accessibilityDescription: 'Speak usage hints',
541          action: () => {
542            this.getUIContext().getPromptAction().showToast({
543              message: 'More icon touched.'
544            });
545          }
546        },
547        {
548          symbol: new SymbolGlyphModifier($r('sys.symbol.more'))
549            .accessibilityText('More')
550            .accessibilityDescription('Speak usage hints'),
551          action: () => {
552            this.getUIContext().getPromptAction().showToast({
553              message: 'More icon touched.'
554            });
555          }
556        },
557        {
558          icon: { src: $r('sys.media.ohos_ic_public_more'), },
559          accessibilityText: 'More',
560          accessibilityDescription: 'Speak usage hints',
561          accessibilityLevel: 'no',
562          action: () => {
563            this.getUIContext().getPromptAction().showToast({
564              message: 'More icon touched.'
565            });
566          }
567        }
568      ]
569    })
570  }
571
572  build() {
573    NavDestination() {
574      Scroll() {
575        Column({ space: 12 }) {
576          SectionGroup({ title: 'Available' }) {
577            SectionItem({ title: 'Single selection without suffix area' }) {
578              ChipGroup({
579                items: [
580                  {
581                    prefixIcon: {
582                      src: $r('app.media.startIcon')
583                    },
584                    label: { text: "Option 1" },
585                    suffixImageIcon: {
586                      src: $r('sys.media.save_button_picture'),
587                      accessibilityText: 'Save',
588                      action: () => {
589                        this.getUIContext().getPromptAction().showToast({
590                          message: 'Suffix icon touched.'
591                        });
592                      },
593                    }
594                  },
595                  {
596                    label: { text: "Option 2" },
597                    suffixSymbol: {
598                      normal: new SymbolGlyphModifier($r('sys.symbol.save')),
599                      activated: new SymbolGlyphModifier($r('sys.symbol.save'))
600                    },
601                    suffixSymbolOptions: {
602                      normalAccessibility: {
603                        accessibilityText: 'Save'
604                      },
605                      action: () => {
606                        this.getUIContext().getPromptAction().showToast({
607                          message: 'Suffix icon touched.'
608                        });
609                      }
610                    }
611                  },
612                  {
613                    label: { text: "Option 3" },
614                    suffixIcon: { src: $r('sys.media.save_button_picture'), }
615                  },
616                  { label: { text: "Option 4" } },
617                  { label: { text: "Option 5" } },
618                  { label: { text: "Option 6" } },
619                  { label: { text: "Option 7" } },
620                  { label: { text: "Option 8" } },
621                  { label: { text: "Option 9" } },
622                ]
623              })
624            }
625            SectionItem({ title: 'Single selection with suffix area' }) {
626              ChipGroup({
627                items: [
628                  { label: { text: "Option 1" } },
629                  { label: { text: "Option 2" } },
630                  { label: { text: "Option 3" } },
631                  { label: { text: "Option 4" } },
632                  { label: { text: "Option 5" } },
633                  { label: { text: "Option 6" } },
634                  { label: { text: "Option 7" } },
635                  { label: { text: "Option 8" } },
636                  { label: { text: "Option 9" } },
637                ],
638                suffix: this.Suffix.bind(this),
639              })
640            }
641          }
642        }
643      }
644      .padding({
645        top: 8,
646        bottom: 8,
647        left: 16,
648        right: 16, })
649    }
650    .title('Basic usage')
651    .backgroundColor('#F1F3F5')
652  }
653}
654```
655
656### Example 5
657
658This example implements the screen reader feature for a chip group with and without a suffix area in a multi-selection scenario.
659
660```typescript
661import { ChipGroup, IconGroupSuffix, SymbolGlyphModifier } from '@kit.ArkUI';
662
663@Builder function DefaultFunction(): void {}
664
665@Component
666struct SectionGroup {
667  @Prop
668  @Require
669  title: ResourceStr;
670  @BuilderParam
671  @Require
672  content: () => void = DefaultFunction;
673
674  build() {
675    Column({ space: 4 }) {
676      Text(this.title)
677        .fontColor('#FF666666')
678        .fontSize(12)
679      Column({ space: 8 }) {
680        this.content()
681      }
682    }
683    .alignItems(HorizontalAlign.Start)
684    .width('100%')
685  }
686}
687@Component
688struct SectionItem {
689  @Prop
690  @Require
691  title: ResourceStr;
692  @BuilderParam
693  @Require
694  content: () => void = DefaultFunction;
695
696  build() {
697    Column({ space: 12 }) {
698      Text(this.title)
699      this.content()
700    }
701    .backgroundColor('#FFFFFFFF')
702    .borderRadius(12)
703    .padding(12)
704    .width('100%')
705  }
706}
707
708@Entry
709@Component
710export struct ChipGroupExample2 {
711  @LocalBuilder
712  Suffix() {
713    IconGroupSuffix({
714      items: [
715        {
716          icon: { src: $r('sys.media.ohos_ic_public_more'), },
717          accessibilityText: 'More',
718          accessibilityDescription: 'Speak usage hints',
719          action: () => {
720            this.getUIContext().getPromptAction().showToast({
721              message: 'More icon touched.'
722            });
723          }
724        },
725        {
726          symbol: new SymbolGlyphModifier($r('sys.symbol.more'))
727            .accessibilityText('More')
728            .accessibilityDescription('Speak usage hints'),
729          action: () => {
730            this.getUIContext().getPromptAction().showToast({
731              message: 'More icon touched.'
732            });
733          }
734        },
735        {
736          icon: { src: $r('sys.media.ohos_ic_public_more'), },
737          accessibilityText: 'More',
738          accessibilityDescription: 'Speak usage hints',
739          accessibilityLevel: 'no',
740          action: () => {
741            this.getUIContext().getPromptAction().showToast({
742              message: 'More icon touched.'
743            });
744          }
745        }
746      ]
747    })
748  }
749
750  build() {
751    NavDestination() {
752      Scroll() {
753        Column({ space: 12 }) {
754          SectionGroup({ title: 'Available' }) {
755            SectionItem({ title: 'Multi-selection without suffix area' }) {
756              ChipGroup({
757                items: [
758                  { label: { text: "Option 1" } },
759                  { label: { text: "Option 2" } },
760                  { label: { text: "Option 3" } },
761                  { label: { text: "Option 4" } },
762                  { label: { text: "Option 5" } },
763                  { label: { text: "Option 6" } },
764                  { label: { text: "Option 7" } },
765                  { label: { text: "Option 8" } },
766                  { label: { text: "Option 9" } },
767                ],
768                multiple: true
769              })
770            }
771            SectionItem({ title: 'Multi-selection with suffix area' }) {
772              ChipGroup({
773                items: [
774                  { label: { text: "Option 1" } },
775                  { label: { text: "Option 2" } },
776                  { label: { text: "Option 3" } },
777                  { label: { text: "Option 4" } },
778                  { label: { text: "Option 5" } },
779                  { label: { text: "Option 6" } },
780                  { label: { text: "Option 7" } },
781                  { label: { text: "Option 8" } },
782                  { label: { text: "Option 9" } },
783                ],
784                suffix: this.Suffix.bind(this),
785                multiple: true,
786              })
787            }
788          }
789        }
790      }
791      .padding({
792        top: 8,
793        bottom: 8,
794        left: 16,
795        right: 16, })
796    }
797    .title('Basic usage')
798    .backgroundColor('#F1F3F5')
799  }
800}
801```
802