@ohos.arkui.advanced.Chip (Chip)

The chip component is typically used in the search box history or email address list.

NOTE

This component is supported since API version 11. Updates will be marked with a superscript to indicate their earliest API version.

Child Components

Not supported

Chip

Chip({options:ChipOptions})

Decorator: @Builder

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Decorator	Description
options	ChipOptions	Yes	@Builder	Parameters of the chip.

ChipOptions

Defines the type and style parameters of the chip.

System capability: SystemCapability.ArkUI.ArkUI.Full

Name	Type	Mandatory	Description
size	ChipSize \| SizeOptions	No	Size of the chip. Default value: ChipSize: ChipSize.NORMAL If of the SizeOptions type, this parameter cannot be set in percentage.
enabled	boolean	No	Whether the chip can be selected. Default value: true
prefixIcon	PrefixIconOptions	No	Prefix icon of the chip.
label	LabelOptions	Yes	Text of the chip.
suffixIcon	SuffixIconOptions	No	Suffix icon of the chip.
backgroundColor	ResourceColor	No	Background color of the chip. Default value: $r('sys.float.ohos_id_color_button_normal')
borderRadius	Dimension	No	Border radius of the chip. This parameter cannot be set in percentage. Default value: $r('sys.float.ohos_id_corner_radius_button')
allowClose	boolean	No	Whether to show the deletion icon. Default value: true
onClose	()=>void	No	Event triggered when the close icon is clicked.

NOTE

If the width set for the chip is less than the minimum width, the chip is displayed at the minimum width.

If suffixIcon is specified, allowClose has no effect.

If undefined is assigned to backgroundColor, the default background color is used. If an invalid value is assigned to backgroundColor, the background color is transparent.

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.

ChipSize

Defines the size type of the chip.

Name	Value	Description
NORMAL	"NORMAL"	Normal size.
SMALL	"SMALL"	Small size.

IconCommonOptions

Defines the common icon attributes of the chip.

Name	Type	Mandatory	Description
src	ResourceStr	Yes	Icon source, which can be a specific image path or an image reference.
size	SizeOptions	No	Icon size. This parameter cannot be set in percentage. Default value: {width: 16,height: 16}
fillColor	ResourceColor	No	Icon fill color.

NOTE

fillColor takes effect only when the icon format is svg.

PrefixIconOptions

Defines the attributes of the prefix icon.

Inherited from IconCommonOptions.

SuffixIconOptions

Defines the attributes of the suffix icon.

Inherited from IconCommonOptions.

Name	Type	Mandatory	Description
action	() => void	No	Action of the suffix icon.

LabelOptions

Defines the text attributes of the chip.

Name	Type	Mandatory	Description
text	string	Yes	Text content.
fontSize	Dimension	No	Font size. This parameter cannot be set in percentage. Default value: $r('sys.float.ohos_id_text_size_button3')
fontColor	ResourceColor	No	Font color. Default value: $r('sys.color.ohos_id_color_text_primary')
fontFamily	string	No	Font family. Default value: "HarmonyOS Sans"
labelMargin	LabelMarginOptions	No	Spacing between the text and the left and right icons.

LabelMarginOptions

Defines the spacing between the text and the left and right icons.

Name	Type	Mandatory	Description
left	Dimension	No	Spacing between the text and the left icon. This parameter cannot be set in percentage. Default value: 6vp
right	Dimension	No	Spacing between the text and the right icon. This parameter cannot be set in percentage. Default value: 6vp

Example

Example 1

import { Chip, ChipSize } from '@ohos.arkui.advanced.Chip';

@Entry
@Component
struct Index {
  build() {
    Column({ space: 10 }) {
      Chip({
        prefixIcon: {
          src: $r('app.media.chips'),
          size: { width: 16, height: 16 },
          fillColor: Color.Red,
        },
        label: {
          text: "Chip",
          fontSize: 12,
          fontColor: Color.Blue,
          fontFamily: "HarmonyOS Sans",
          labelMargin: { left: 20, right: 30 },
        },
        suffixIcon: {
          src: $r('app.media.close'),
          size: { width: 16, height: 16 },
          fillColor: Color.Red,
        },
        size: ChipSize.NORMAL,
        allowClose: false,
        enabled: true,
        backgroundColor: $r('sys.color.ohos_id_color_button_normal'),
        borderRadius: $r('sys.float.ohos_id_corner_radius_button')
      })
    }
  }
}

Example 2

import { Chip, ChipSize } from '@ohos.arkui.advanced.Chip';

@Entry
@Component
struct Index {
  build() {
    Column({ space: 10 }) {
      Chip({
        prefixIcon: {
          src: $r('app.media.chips'),
          size: { width: 16, height: 16 },
          fillColor: Color.Blue,
        },
        label: {
          text: "Chip",
          fontSize: 12,
          fontColor: Color.Blue,
          fontFamily: "HarmonyOS Sans",
          labelMargin: { left: 20, right: 30 },
        },
        size: ChipSize.NORMAL,
        allowClose: true,
        enabled: true,
        backgroundColor: $r('sys.color.ohos_id_color_button_normal'),
        borderRadius: $r('sys.float.ohos_id_corner_radius_button')
      })
    }
  }
}

Example 3

import { Chip, ChipSize } from '@ohos.arkui.advanced.Chip';

@Entry
@Component
struct Index {
  build() {
    Column({ space: 10 }) {
      Chip({
        prefixIcon: {
          src: $r('app.media.chips'),
          size: { width: 16, height: 16 },
          fillColor: Color.Blue,
        },
        label: {
          text: "Chip",
          fontSize: 12,
          fontColor: Color.Blue,
          fontFamily: "HarmonyOS Sans",
          labelMargin: { left: 20, right: 30 },
        },
        size: ChipSize.SMALL,
        allowClose: false,
        enabled: true,
        backgroundColor: $r('sys.color.ohos_id_color_button_normal'),
        borderRadius: $r('sys.float.ohos_id_corner_radius_button'),
        onClose:()=>{
          console.log("chip on close")
      }
      })
    }
  }
}