1# Counter
2
3The **Counter** component provides an operation to increase or decrease the number.
4
5>  **NOTE**
6>
7> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
8
9
10## Child Components
11
12Supported
13
14
15## APIs
16
17Counter()
18
19**Widget capability**: This API can be used in ArkTS widgets since API version 9.
20
21**Atomic service API**: This API can be used in atomic services since API version 11.
22
23**System capability**: SystemCapability.ArkUI.ArkUI.Full
24
25## Attributes
26
27In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
28
29### enableInc<sup>10+</sup>
30
31enableInc(value: boolean)
32
33Sets whether to enable the increment button.
34
35**Atomic service API**: This API can be used in atomic services since API version 11.
36
37**System capability**: SystemCapability.ArkUI.ArkUI.Full
38
39**Parameters**
40
41| Name| Type   | Mandatory| Description                                 |
42| ------ | ------- | ---- | ------------------------------------- |
43| value  | boolean | Yes  | Whether to enable the increment button.<br>Default value: **true**|
44
45### enableDec<sup>10+</sup>
46
47enableDec(value: boolean)
48
49Sets whether to enable the decrement button.
50
51**Atomic service API**: This API can be used in atomic services since API version 11.
52
53**System capability**: SystemCapability.ArkUI.ArkUI.Full
54
55**Parameters**
56
57| Name| Type   | Mandatory| Description                                 |
58| ------ | ------- | ---- | ------------------------------------- |
59| value  | boolean | Yes  | Whether to enable the decrement button.<br>Default value: **true**|
60
61## Events
62
63In addition to the [universal events](ts-universal-events-click.md), the following events are supported.
64
65### onInc
66
67onInc(event: VoidCallback)
68
69Invoked when the value increases.
70
71**Widget capability**: This API can be used in ArkTS widgets since API version 9.
72
73**Atomic service API**: This API can be used in atomic services since API version 11.
74
75**System capability**: SystemCapability.ArkUI.ArkUI.Full
76
77**Parameters**
78
79| Name| Type                                          | Mandatory| Description                                |
80| ------ | --------------------------------------------- | ---- | ----------------------------------- |
81| event  | [VoidCallback](ts-types.md#voidcallback12)    | Yes  | Callback invoked when the value increases.       |
82
83### onDec
84
85onDec(event: VoidCallback)
86
87Invoked when the value decreases.
88
89**Widget capability**: This API can be used in ArkTS widgets since API version 9.
90
91**Atomic service API**: This API can be used in atomic services since API version 11.
92
93**System capability**: SystemCapability.ArkUI.ArkUI.Full
94
95**Parameters**
96
97| Name| Type                                          | Mandatory| Description                                |
98| ------ | --------------------------------------------- | ---- | ----------------------------------- |
99| event  | [VoidCallback](ts-types.md#voidcallback12)    | Yes  | Callback invoked when the value decreases.       |
100
101
102## Example
103
104This example shows the basic usage of the **Counter** component. Users can touch the **+** or **-** button to adjust the value.
105
106```ts
107// xxx.ets
108@Entry
109@Component
110struct CounterExample {
111  @State value: number = 0
112
113  build() {
114    Column() {
115      Counter() {
116        Text(this.value.toString())
117      }.margin(100)
118      .onInc(() => {
119        this.value++
120      })
121      .onDec(() => {
122        this.value--
123      })
124    }.width("100%")
125  }
126}
127```
128
129![en-us_image_0000001212378424](figures/en-us_image_0000001212378424.gif)
130