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## Attributes
24
25In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
26
27### enableInc<sup>10+</sup>
28
29enableInc(value: boolean)
30
31Sets whether to enable the increment button.
32
33**Atomic service API**: This API can be used in atomic services since API version 11.
34
35**System capability**: SystemCapability.ArkUI.ArkUI.Full
36
37**Parameters**
38
39| Name| Type   | Mandatory| Description                                 |
40| ------ | ------- | ---- | ------------------------------------- |
41| value  | boolean | Yes  | Whether to enable the increment button.<br>Default value: **true**|
42
43### enableDec<sup>10+</sup>
44
45enableDec(value: boolean)
46
47Sets whether to enable the decrement button.
48
49**Atomic service API**: This API can be used in atomic services since API version 11.
50
51**System capability**: SystemCapability.ArkUI.ArkUI.Full
52
53**Parameters**
54
55| Name| Type   | Mandatory| Description                                 |
56| ------ | ------- | ---- | ------------------------------------- |
57| value  | boolean | Yes  | Whether to enable the decrement button.<br>Default value: **true**|
58
59## Events
60
61In addition to the [universal events](ts-universal-events-click.md), the following events are supported.
62
63### onInc
64
65onInc(event: () =&gt; void)
66
67Invoked when the value increases.
68
69**Widget capability**: This API can be used in ArkTS widgets since API version 9.
70
71**Atomic service API**: This API can be used in atomic services since API version 11.
72
73**System capability**: SystemCapability.ArkUI.ArkUI.Full
74
75### onDec
76
77onDec(event: () =&gt; void)
78
79Invoked when the value decreases.
80
81**Widget capability**: This API can be used in ArkTS widgets since API version 9.
82
83**Atomic service API**: This API can be used in atomic services since API version 11.
84
85**System capability**: SystemCapability.ArkUI.ArkUI.Full
86
87
88## Example
89
90```ts
91// xxx.ets
92@Entry
93@Component
94struct CounterExample {
95  @State value: number = 0
96
97  build() {
98    Column() {
99      Counter() {
100        Text(this.value.toString())
101      }.margin(100)
102      .onInc(() => {
103        this.value++
104      })
105      .onDec(() => {
106        this.value--
107      })
108    }.width("100%")
109  }
110}
111```
112
113![en-us_image_0000001212378424](figures/en-us_image_0000001212378424.gif)
114