1# Chip
2
3The chip component is typically used in the search box history or email address list.
4
5> **NOTE**
6>
7> This component is supported since API version 11. Updates will be marked with a superscript to indicate their earliest API version.
8
9## Modules to Import
10
11```ts
12import { Chip, ChipOptions, ChipSize } from '@kit.ArkUI';
13```
14
15## Child Components
16
17Not supported
18
19## Chip
20
21Chip({options:ChipOptions})
22
23**Decorator**: @Builder
24
25**Atomic service API**: This API can be used in atomic services since API version 12.
26
27**System capability**: SystemCapability.ArkUI.ArkUI.Full
28
29**Parameters**
30
31| Name   | Type                       | Mandatory| Decorator| Description                |
32| ------- | --------------------------- | ---- | ---------- | -------------------- |
33| options | [ChipOptions](#chipoptions) | Yes  | @Builder   | Parameters of the chip.|
34
35## ChipOptions
36
37Defines the type and style parameters of the chip.
38
39**System capability**: SystemCapability.ArkUI.ArkUI.Full
40
41| Name           | Type                                                        | Mandatory| Description                                                        |
42| --------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
43| size            | [ChipSize](#chipsize) \| [SizeOptions](ts-types.md#sizeoptions) | No  | Size of the chip.<br>Default value: **ChipSize**: **ChipSize.NORMAL**<br>   If of the SizeOptions type, this parameter cannot be set in percentage.<br>**Atomic service API**: This API can be used in atomic services since API version 12.|
44| enabled         | boolean                                                      | No  | Whether the chip can be selected.<br>Default value: **true**<br>**Atomic service API**: This API can be used in atomic services since API version 12.|
45| activated      | boolean                                        | No  | Whether the chip is activated.<br>Default value: **false**<br>**Atomic service API**: This API can be used in atomic services since API version 12.                     |
46| prefixIcon      | [PrefixIconOptions](#prefixiconoptions)                      | No  | Prefix icon of the chip.<br>**Atomic service API**: This API can be used in atomic services since API version 12.|
47| prefixSymbol   | [ChipSymbolGlyphOptions](#chipsymbolglyphoptions12)              | No  | Symbol-type prefix icon of the chip.<br>**Atomic service API**: This API can be used in atomic services since API version 12.|
48| label           | [LabelOptions](#labeloptions)                                | Yes  | Text of the chip.<br>**Atomic service API**: This API can be used in atomic services since API version 12.  |
49| suffixIcon      | [SuffixIconOptions](#suffixiconoptions)                      | No  | Suffix icon of the chip.<br>**Atomic service API**: This API can be used in atomic services since API version 12.|
50| suffixSymbol    | [ChipSymbolGlyphOptions](#chipsymbolglyphoptions12)              | No  | Symbol-type suffix icon of the chip.<br>**Atomic service API**: This API can be used in atomic services since API version 12.|
51| suffixSymbolOptions<sup>14+</sup> | [ChipSuffixSymbolGlyphOptions](#chipsuffixsymbolglyphoptions14) | No| Accessibility settings of the symbol-type suffix icon.<br>**Atomic service API**: This API can be used in atomic services since API version 14.|
52| backgroundColor | [ResourceColor](ts-types.md#resourcecolor)                   | No  | Background color of the chip.<br>Default value: **$r('sys.color.ohos_id_color_button_normal')**<br>**Atomic service API**: This API can be used in atomic services since API version 12.|
53| activatedBackgroundColor | [ResourceColor](ts-types.md#resourcecolor)          | No  | Background color of the chip when it is activated.<br>Default value: **$r('sys.color.ohos_id_color_emphasize').**<br>**Atomic service API**: This API can be used in atomic services since API version 12.|
54| borderRadius    | [Dimension](ts-types.md#dimension10)                         | No  | Border radius of the chip. This parameter cannot be set in percentage.<br>Default value: **$r('sys.float.ohos_id_corner_radius_button')**<br>**Atomic service API**: This API can be used in atomic services since API version 12.|
55| allowClose      | boolean                                                      | No  | Whether to show the close icon.<br>Default value: **true**<br>**Atomic service API**: This API can be used in atomic services since API version 12.|
56| onClose         | ()=>void                                                     | No  | Event triggered when the close icon is clicked.<br>**Atomic service API**: This API can be used in atomic services since API version 12.|
57| onClicked      | Callback\<void> | No  | Event triggered when the chip is clicked.<br>**Atomic service API**: This API can be used in atomic services since API version 12.                                      |
58| direction | [Direction](ts-appendix-enums.md#direction) | No| Layout direction.<br>Default value: **Direction.Auto**<br>**Atomic service API**: This API can be used in atomic services since API version 12.|
59| closeOptions<sup>14+</sup> | [CloseOptions](#closeoptions14) | No| Accessibility settings of the default close icon.<br>**Atomic service API**: This API can be used in atomic services since API version 14.|
60| accessibilityDescription<sup>14+</sup> | [ResourceStr](ts-types.md#resourcestr) | No| Accessibility description of the chip.<br>**Atomic service API**: This API can be used in atomic services since API version 14.|
61| accessibilityLevel<sup>14+</sup> | string | No| Accessibility level of the chip.<br>Default value: **"auto"**<br>**Atomic service API**: This API can be used in atomic services since API version 14.|
62| accessibilitySelectedType<sup>14+</sup> | [AccessibilitySelectedType](#accessibilityselectedtype14) | No| Type of selected state for the chip.<br>**Atomic service API**: This API can be used in atomic services since API version 14.|
63
64> **NOTE**
65>
66> 1. When **suffixSymbol** is provided with an argument, **suffixIcon** and **allowClose** will not take effect. If **suffixSymbol** is not provided, but **suffixIcon** is, **allowClose** still will not take effect. When neither **suffixSymbol** nor **suffixIcon** is provided with arguments, **allowClose** determines whether the deletion icon is displayed.
67>
68> 2. If **undefined** is assigned to **backgroundColor** or **activatedBackgroundColor**, the default background color is used. If an invalid value is specified, the background color is transparent.
69>
70> 3. Default font colors for **prefixSymbol** and **suffixSymbol**: **normalFontColor**: **[$r('sys.color.ohos_id_color_primary')]**; **activatedFontColor**: **[$r('sys.color.ohos_id_color_text_primary_contrary')]**. The default value of **fontColor** is **16**.
71>
72> 4. The default value of **fillColor** is **$r('sys.color.ohos_id_color_secondary')** for **prefixIcon** and **$r('sys.color.ohos_id_color_primary')** for **suffixIcon**. The color parsing of **fillColor** is the same as that of the **Image** component.
73>
74> 5. The default value of **activatedFillColor** is **$r('sys.color.ohos_id_color_text_primary_contrary')** for **prefixIcon** and **$r('sys.color.ohos_id_color_text_primary_contrary')** for **suffixIcon**. The color parsing of **activatedFillColor** is the same as that of the **Image** component.
75
76## ChipSize
77
78Enumerates the size types of the chip.
79
80**Atomic service API**: This API can be used in atomic services since API version 12.
81
82**System capability**: SystemCapability.ArkUI.ArkUI.Full
83
84| Name  | Value      | Description              |
85| ------ | -------- | ------------------ |
86| NORMAL | "NORMAL" | Normal size.|
87| SMALL  | "SMALL"  | Small size. |
88
89## AccessibilitySelectedType<sup>14+</sup>
90
91Enumerates the selected state types of the chip.
92
93**Atomic service API**: This API can be used in atomic services since API version 14.
94
95**System capability**: SystemCapability.ArkUI.ArkUI.Full
96
97| Name| Value| Description|
98| ---- | -- | ---- |
99| CLICKED | 0 | Default selected state type of the chip.|
100| CHECKED | 1 | Selected state type of the chip when used as a check box.|
101| SELECTED | 2 | Selected state type of the chip when used as a radio button.|
102
103## IconCommonOptions
104
105Defines the common icon options of the chip.
106
107**Atomic service API**: This API can be used in atomic services since API version 12.
108
109**System capability**: SystemCapability.ArkUI.ArkUI.Full
110
111| Name     | Type                                      | Mandatory| Description                                                        |
112| --------- | ------------------------------------------ | ---- | ------------------------------------------------------------ |
113| src       | [ResourceStr](ts-types.md#resourcestr)     | Yes  | Icon source, which can be a specific image path or an image reference.|
114| size      | [SizeOptions](ts-types.md#sizeoptions)     | No  | Icon size. This parameter cannot be set in percentage.<br>Default value: **{width: 16,height: 16}**|
115| fillColor | [ResourceColor](ts-types.md#resourcecolor) | No  | Icon fill color.|
116| activatedFillColor<sup>12+</sup> | [ResourceColor](ts-types.md#resourcecolor) | No  | Icon fill color when the chip is activated.                           |
117
118> **NOTE**
119>
120> **fillColor** and **activatedFillColor** take effect only when the icon format is SVG.
121>
122
123## PrefixIconOptions
124
125Defines the prefix icon options.
126
127Inherits [IconCommonOptions](#iconcommonoptions).
128
129**Atomic service API**: This API can be used in atomic services since API version 12.
130
131**System capability**: SystemCapability.ArkUI.ArkUI.Full
132
133## SuffixIconOptions
134
135Defines the suffix icon options.
136
137Inherits [IconCommonOptions](#iconcommonoptions).
138
139**System capability**: SystemCapability.ArkUI.ArkUI.Full
140
141| Name  | Type      | Mandatory| Description              |
142| ------ | ---------- | ---- | ------------------ |
143| action | () => void | No  | Action of the suffix icon.<br>**Atomic service API**: This API can be used in atomic services since API version 12.|
144| accessibilityText<sup>14+</sup> | [ResourceStr](ts-types.md#resourcestr) | No| Accessibility text of the suffix icon.<br>**Atomic service API**: This API can be used in atomic services since API version 14.|
145| accessibilityDescription<sup>14+</sup> | [ResourceStr](ts-types.md#resourcestr) | No| Accessibility description of the suffix icon.<br>**Atomic service API**: This API can be used in atomic services since API version 14.|
146| accessibilityLevel<sup>14+</sup> | string | No| Accessibility level of the suffix icon.<br>Default value: **"auto"**<br>**Atomic service API**: This API can be used in atomic services since API version 14.|
147
148## AccessibilityOptions<sup>14+</sup>
149
150Defines the accessibility options of the suffix icon.
151
152**Atomic service API**: This API can be used in atomic services since API version 14.
153
154**System capability**: SystemCapability.ArkUI.ArkUI.Full
155
156| Name| Type| Mandatory| Description|
157| ------ | ---------- | ---- | ------------------ |
158| accessibilityText | [ResourceStr](ts-types.md#resourcestr) | No| Accessibility text.|
159| accessibilityDescription | [ResourceStr](ts-types.md#resourcestr) | No| Accessibility description.|
160| accessibilityLevel | string | No| Accessibility level.<br>Default value: **"auto"**|
161
162## ChipSuffixSymbolGlyphOptions<sup>14+</sup>
163
164Defines the accessibility options of the symbol-type suffix icon.
165
166**Atomic service API**: This API can be used in atomic services since API version 14.
167
168**System capability**: SystemCapability.ArkUI.ArkUI.Full
169
170| Name| Type| Mandatory| Description|
171| ---- | ---- | --- | ---- |
172| action | [VoidCallback](ts-types.md#voidcallback12) | No| Action of the suffix icon.|
173| normalAccessibility | [AccessibilityOptions](#accessibilityoptions14) | No| Accessibility settings for the normal state.|
174| activatedAccessibility | [AccessibilityOptions](#accessibilityoptions14) | No| Accessibility settings for the activated state.|
175
176## ChipSymbolGlyphOptions<sup>12+</sup>
177
178Defines the prefix and suffix icon options.
179
180**Atomic service API**: This API can be used in atomic services since API version 12.
181
182**System capability**: SystemCapability.ArkUI.ArkUI.Full
183
184| Name  | Type      | Mandatory| Description              |
185| ------ | ---------- | ---- | ------------------ |
186| normal | [SymbolGlyphModifier](ts-universal-attributes-attribute-modifier.md) | No  | Icon setup event.|
187| activated | [SymbolGlyphModifier](ts-universal-attributes-attribute-modifier.md) | No  | Icon setup event when the icon is activated.|
188
189> **NOTE**
190>
191> Modifying the animation type with **symbolEffect** and setting the animation with **effectStrategy** are not supported.
192>
193
194## LabelOptions
195
196Defines the label options of the chip.
197
198**Atomic service API**: This API can be used in atomic services since API version 12.
199
200**System capability**: SystemCapability.ArkUI.ArkUI.Full
201
202| Name       | Type                                      | Mandatory| Description                                                        |
203| ----------- | ------------------------------------------ | ---- | ------------------------------------------------------------ |
204| text        | string                                     | Yes  | Text content.|
205| fontSize    | [Dimension](ts-types.md#dimension10)       | No  | Font size. This parameter cannot be set in percentage.<br>Default value: **$r('sys.float.ohos_id_text_size_button2')**|
206| fontColor   | [ResourceColor](ts-types.md#resourcecolor) | No  | Font color.<br>Default value: **$r('sys.color.ohos_id_color_text_primary')**|
207| activatedFontColor<sup>12+</sup>   | [ResourceColor](ts-types.md#resourcecolor) | No  | Font color when the chip is activated.<br>Default value: **$r('sys.color.ohos_id_color_text_primary_contrary').**|
208| fontFamily  | string                                     | No  | Font family.<br>Default value: **"HarmonyOS Sans"**|
209| labelMargin | [LabelMarginOptions](#labelmarginoptions)  | No  | Spacing between the text and the left and right icons.|
210| localizedLabelMargin<sup>12+</sup> | [LocalizedLabelMarginOptions](#localizedlabelmarginoptions12) | No| Spacing between the localized text and the left and right icons.<br>Default value: {<br>start:  LengthMetrics.vp(6), end: LengthMetrics.vp(6)<br>} |
211
212## CloseOptions<sup>14+</sup>
213
214Defines the accessibility settings of the close icon. The default value of **accessibilityText** is **Delete**.
215
216Inherits [AccessibilityOptions](#accessibilityoptions14).
217
218**Atomic service API**: This API can be used in atomic services since API version 14.
219
220**System capability**: SystemCapability.ArkUI.ArkUI.Full
221
222## LabelMarginOptions
223
224Defines the spacing between the text and the left and right icons.
225
226**Atomic service API**: This API can be used in atomic services since API version 12.
227
228**System capability**: SystemCapability.ArkUI.ArkUI.Full
229
230| Name | Type                                | Mandatory| Description                                  |
231| ----- | ------------------------------------ | ---- | -------------------------------------- |
232| left  | [Dimension](ts-types.md#dimension10) | No  | Spacing between the text and the left icon. This parameter cannot be set in percentage.|
233| right | [Dimension](ts-types.md#dimension10) | No  | Spacing between the text and the right icon. This parameter cannot be set in percentage.|
234
235## LocalizedLabelMarginOptions<sup>12+</sup>
236
237Defines the spacing between the localized text and the left and right icons.
238
239**Atomic service API**: This API can be used in atomic services since API version 12.
240
241**System capability**: SystemCapability.ArkUI.ArkUI.Full
242
243| Name | Type                                                        | Mandatory| Description                                  |
244| ----- | ------------------------------------------------------------ | ---- | -------------------------------------- |
245| start | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | No  | Spacing between the text and the left icon. This parameter cannot be set in percentage.|
246| end   | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | No  | Spacing between the text and the right icon. This parameter cannot be set in percentage.|
247
248## Example
249
250### Example 1
251
252This example defines a custom chip for the deletion icon.
253
254```ts
255import { Chip, ChipSize } from '@kit.ArkUI';
256
257@Entry
258@Component
259struct Index {
260  build() {
261    Column({ space: 10 }) {
262      Chip({
263        prefixIcon: {
264          src: $r('app.media.chips'),
265          size: { width: 16, height: 16 },
266          fillColor: Color.Red
267        },
268        label: {
269          text: "Chip",
270          fontSize: 12,
271          fontColor: Color.Blue,
272          fontFamily: "HarmonyOS Sans",
273          labelMargin: { left: 20, right: 30 }
274        },
275        suffixIcon: {
276          src: $r('app.media.close'),
277          size: { width: 16, height: 16 },
278          fillColor: Color.Red
279        },
280        size: ChipSize.NORMAL,
281        allowClose: false,
282        enabled: true,
283        backgroundColor: $r('sys.color.ohos_id_color_button_normal'),
284        borderRadius: $r('sys.float.ohos_id_corner_radius_button')
285      })
286    }
287  }
288}
289```
290
291
292![](figures/chip1.png)
293
294### Example 2
295
296This example implements the default chip for the deletion icon.
297
298```ts
299import { Chip, ChipSize } from '@kit.ArkUI';
300
301@Entry
302@Component
303struct Index {
304  build() {
305    Column({ space: 10 }) {
306      Chip({
307        prefixIcon: {
308          src: $r('app.media.chips'),
309          size: { width: 16, height: 16 },
310          fillColor: Color.Blue
311        },
312        label: {
313          text: "Chip",
314          fontSize: 12,
315          fontColor: Color.Blue,
316          fontFamily: "HarmonyOS Sans",
317          labelMargin: { left: 20, right: 30 }
318        },
319        size: ChipSize.NORMAL,
320        allowClose: true,
321        enabled: true,
322        backgroundColor: $r('sys.color.ohos_id_color_button_normal'),
323        borderRadius: $r('sys.float.ohos_id_corner_radius_button')
324      })
325    }
326  }
327}
328```
329
330
331![](figures/chip2.png)
332
333### Example 3
334
335This example shows how to hide the chip for the deletion icon.
336
337```ts
338import { Chip, ChipSize } from '@kit.ArkUI';
339
340@Entry
341@Component
342struct Index {
343  build() {
344    Column({ space: 10 }) {
345      Chip({
346        prefixIcon: {
347          src: $r('app.media.chips'),
348          size: { width: 16, height: 16 },
349          fillColor: Color.Blue
350        },
351        label: {
352          text: "Chip",
353          fontSize: 12,
354          fontColor: Color.Blue,
355          fontFamily: "HarmonyOS Sans",
356          labelMargin: { left: 20, right: 30 }
357        },
358        size: ChipSize.SMALL,
359        allowClose: false,
360        enabled: true,
361        backgroundColor: $r('sys.color.ohos_id_color_button_normal'),
362        borderRadius: $r('sys.float.ohos_id_corner_radius_button'),
363        onClose:()=>{
364          console.log("chip on close")
365      }
366      })
367    }
368  }
369}
370```
371
372
373![](figures/chip3.png)
374
375### Example 4
376
377This example implements a chip in the activated state.
378
379```ts
380import { Chip, ChipSize } from '@kit.ArkUI';
381
382@Entry
383@Component
384struct Index {
385  @State isActivated: boolean = false
386
387  build() {
388    Column({ space: 10 }) {
389      Chip({
390        prefixIcon: {
391          src: $r('app.media.chips'),
392          size: { width: 16, height: 16 },
393          fillColor: Color.Blue,
394          activatedFillColor: $r('sys.color.ohos_id_color_text_primary_contrary')
395        },
396        label: {
397          text: "Chip",
398          fontSize: 12,
399          fontColor: Color.Blue,
400          activatedFontColor: $r('sys.color.ohos_id_color_text_primary_contrary'),
401          fontFamily: "HarmonyOS Sans",
402          labelMargin: { left: 20, right: 30 }
403        },
404        size: ChipSize.NORMAL,
405        allowClose: true,
406        enabled: true,
407        activated: this.isActivated,
408        backgroundColor: $r('sys.color.ohos_id_color_button_normal'),
409        activatedBackgroundColor: $r('sys.color.ohos_id_color_emphasize'),
410        borderRadius: $r('sys.float.ohos_id_corner_radius_button'),
411        onClose:()=>{
412          console.log("chip on close")
413        },
414        onClicked:()=>{
415          console.log("chip on clicked")
416        }
417      })
418
419      Button('Activate/Deactivate').onClick(()=>{
420        this.isActivated = !this.isActivated
421      })
422    }
423  }
424}
425```
426
427
428![](figures/chip4.gif)
429
430### Example 5
431
432This example implements symbol-type prefix and suffix icons for the **Chip** component.
433
434```ts
435import { Chip, ChipSize, SymbolGlyphModifier } from '@kit.ArkUI';
436
437@Entry
438@Component
439struct Index {
440  @State isActivated: boolean = false
441
442  build() {
443    Column({ space: 10 }) {
444      Chip({
445        prefixIcon: {
446          src: $r('app.media.chips'),
447          size: { width: 16, height: 16 },
448          fillColor: Color.Blue,
449          activatedFillColor: $r('sys.color.ohos_id_color_text_primary_contrary')
450        },
451		prefixSymbol: {
452          normal: new SymbolGlyphModifier($r('sys.symbol.ohos_star')).fontSize(16).fontColor([Color.Green]),
453          activated: new SymbolGlyphModifier($r('sys.symbol.ohos_star')).fontSize(16).fontColor([Color.Red]),
454		},
455        label: {
456          text: "Chip",
457          fontSize: 12,
458          fontColor: Color.Blue,
459          activatedFontColor: $r('sys.color.ohos_id_color_text_primary_contrary'),
460          fontFamily: "HarmonyOS Sans",
461          labelMargin: { left: 20, right: 30 },
462        },
463        size: ChipSize.NORMAL,
464        allowClose: true,
465        enabled: true,
466        activated: this.isActivated,
467        backgroundColor: $r('sys.color.ohos_id_color_button_normal'),
468        activatedBackgroundColor: $r('sys.color.ohos_id_color_emphasize'),
469        borderRadius: $r('sys.float.ohos_id_corner_radius_button'),
470        onClose:()=>{
471          console.log("chip on close")
472        },
473        onClicked:()=>{
474          console.log("chip on clicked")
475        }
476      })
477
478      Button('Activate/Deactivate').onClick(()=>{
479        this.isActivated = !this.isActivated
480      })
481    }
482  }
483}
484```
485
486![](figures/chip5.gif)
487
488### Example 6
489
490This example mirrors the layout of the **Chip** component.
491
492```ts
493
494import { Chip, ChipSize,LengthMetrics } from '@kit.ArkUI';
495
496@Entry
497@Component
498struct ChipPage {
499
500  build() {
501    Column() {
502      Chip({
503        direction: Direction.Rtl,
504        prefixIcon: {
505          src: $r('app.media.chips'),
506          size: { width: 16, height: 16 },
507          fillColor: Color.Red,
508        },
509        label: {
510          text: "Chip",
511          fontSize: 12,
512          fontColor: Color.Blue,
513          fontFamily: "HarmonyOS Sans",
514          localizedLabelMargin: { start: LengthMetrics.vp(20), end: LengthMetrics.vp(20) },
515        },
516        suffixIcon: {
517          src: $r('app.media.close'),
518          size: { width: 16, height: 16 },
519          fillColor: Color.Red,
520        },
521        size: ChipSize.NORMAL,
522        allowClose: false,
523        enabled: true,
524        backgroundColor: $r('sys.color.ohos_id_color_button_normal'),
525        borderRadius: $r('sys.float.ohos_id_corner_radius_button')
526      })
527    }.justifyContent(FlexAlign.Center)
528    .width('100%')
529    .height('100%')
530  }
531}
532```
533
534
535![](figures/chip6.png)
536
537### Example 7
538
539This example implements the accessibility feature for a chip with an image-type suffix icon.
540
541```ts
542
543import { Chip, SymbolGlyphModifier } from '@kit.ArkUI';
544
545@Builder
546function DefaultFunction(): void {
547}
548
549@Component
550struct SectionGroup {
551  @Prop
552  @Require
553  title: ResourceStr;
554  @BuilderParam
555  @Require
556  content: () => void = DefaultFunction;
557
558  build() {
559    Column({ space: 4 }) {
560      Text(this.title)
561        .fontColor('#FF666666')
562        .fontSize(12)
563      Column({ space: 8 }) {
564        this.content()
565      }
566    }
567    .alignItems(HorizontalAlign.Start)
568    .width('100%')
569  }
570}
571
572@Component
573struct SectionItem {
574  @Prop
575  @Require
576  title: ResourceStr;
577  @BuilderParam
578  @Require
579  content: () => void = DefaultFunction;
580
581  build() {
582    Column({ space: 12 }) {
583      Text(this.title)
584      this.content()
585    }
586    .backgroundColor('#FFFFFFFF')
587    .borderRadius(12)
588    .padding(12)
589    .width('100%')
590  }
591}
592
593@Entry
594@Component
595struct ChipExample2 {
596  @State activated: boolean = false;
597
598  build() {
599    NavDestination() {
600      Scroll() {
601        SectionGroup({ title: 'Suffix icon readout' }) {
602          SectionItem({ title: 'Custom Readout' }) {
603            Chip({
604              label: { text: 'Chip' },
605              suffixIcon: {
606                src: $r('sys.media.ohos_ic_public_cut'),
607                accessibilityText: 'Icon',
608                accessibilityDescription: 'Usage hints',
609                action: () => {
610                  this.getUIContext().getPromptAction().showToast({
611                    message: 'Suffix icon touched.'
612                  });
613                }
614              },
615              onClicked: () => {
616                this.getUIContext().getPromptAction().showToast({
617                  message: 'Chip touched.'
618                });
619              }
620            })
621          }
622        }
623      }
624    }
625  }
626}
627```
628
629### Example 8
630
631This example implements the accessibility feature for a chip with a symbol-type suffix icon.
632
633```ts
634
635import { Chip, SymbolGlyphModifier } from '@kit.ArkUI';
636
637@Builder
638function DefaultFunction(): void {
639}
640
641@Component
642struct SectionGroup {
643  @Prop
644  @Require
645  title: ResourceStr;
646  @BuilderParam
647  @Require
648  content: () => void = DefaultFunction;
649
650  build() {
651    Column({ space: 4 }) {
652      Text(this.title)
653        .fontColor('#FF666666')
654        .fontSize(12)
655      Column({ space: 8 }) {
656        this.content()
657      }
658    }
659    .alignItems(HorizontalAlign.Start)
660    .width('100%')
661  }
662}
663
664@Component
665struct SectionItem {
666  @Prop
667  @Require
668  title: ResourceStr;
669  @BuilderParam
670  @Require
671  content: () => void = DefaultFunction;
672
673  build() {
674    Column({ space: 12 }) {
675      Text(this.title)
676      this.content()
677    }
678    .backgroundColor('#FFFFFFFF')
679    .borderRadius(12)
680    .padding(12)
681    .width('100%')
682  }
683}
684
685@Entry
686@Component
687struct ChipExample2 {
688  @State activated: boolean = false;
689
690  build() {
691    NavDestination() {
692      Scroll() {
693          SectionGroup({ title: 'Suffix symbol readout' }) {
694            SectionItem({ title: 'activatedAccessibility' }) {
695              Chip({
696                label: { text: 'Chip' },
697                activated: true,
698                suffixSymbol: {
699                  activated: new SymbolGlyphModifier($r('sys.symbol.media_sound'))
700                    .fontSize(72),
701                },
702                suffixSymbolOptions: {
703                  activatedAccessibility: {
704                    accessibilityText: 'Music',
705                    accessibilityDescription: 'Usage hints'
706                  },
707                  action: () => {
708                    this.getUIContext().getPromptAction().showToast({
709                      message: 'Suffix symbol touched.'
710                    });
711                  }
712                },
713                onClicked: () => {
714                  this.getUIContext().getPromptAction().showToast({
715                    message: 'Chip touched.'
716                  });
717                }
718              })
719            }
720            SectionItem({ title: 'normalAccessibility' }) {
721              Chip({
722                label: { text: 'Chip' },
723                suffixSymbol: {
724                  normal: new SymbolGlyphModifier($r('sys.symbol.media_sound'))
725                    .fontSize(72),
726                },
727                suffixSymbolOptions: {
728                  normalAccessibility: {
729                    accessibilityText: 'Music',
730                    accessibilityDescription: 'Usage hints'
731                  },
732                  action: () => {
733                    this.getUIContext().getPromptAction().showToast({
734                      message: 'Suffix symbol touched.'
735                    });
736                  }
737                },
738                onClicked: () => {
739                  this.getUIContext().getPromptAction().showToast({
740                    message: 'Chip touched.'
741                  });
742                }
743              })
744            }
745          }
746        }
747      }
748      .padding({
749        top: 8,
750        bottom: 8,
751        left: 16,
752        right: 16,
753      })
754    }
755}
756```
757