Counter
A numeric input with increment and decrement buttons.
0
1<Counter />#Installation
1bunx barefoot add counter#Usage
1import { createSignal } from '@barefootjs/dom'2import { Counter } from '@/components/ui/counter'34export default function Page() {5 const [count, setCount] = createSignal(0)6 return (7 <Counter8 value={count()}9 onIncrement={() => setCount(n => n + 1)}10 onDecrement={() => setCount(n => n - 1)}11 />12 )13}#Examples
#Basic
0
1const [count, setCount] = createSignal(0)23<Counter4 value={count()}5 onIncrement={() => setCount(n => n + 1)}6 onDecrement={() => setCount(n => n - 1)}7/>#Derived State (Memo)
0
Doubled: 0
Is even: Yes
1const [count, setCount] = createSignal(0)2const doubled = createMemo(() => count() * 2)3const isEven = createMemo(() => count() % 2 === 0)45<div>6 <Counter7 value={count()}8 onIncrement={() => setCount(n => n + 1)}9 onDecrement={() => setCount(n => n - 1)}10 />11 <p>Doubled: {doubled()}</p>12 <p>Is even: {isEven() ? 'Yes' : 'No'}</p>13</div>#Disabled
5
1<Counter value={5} disabled />#API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | 0 | The current value of the counter. |
| disabled | boolean | false | Whether the counter is disabled. |
| onIncrement | () => void | - | Event handler called when increment button is clicked. |
| onDecrement | () => void | - | Event handler called when decrement button is clicked. |