Counter

Display a number input with increment buttons

Use the Counter component to display a numbered input that can be changed using increment and decrements buttons with a visually intuitive UI. The component supports long-press increments.

---
import { Counter } from 'webcoreui/astro'
---

<Counter />

<script>
    import { listen } from 'webcoreui'

    listen('counterOnChange', event => console.log(event))
</script>

<script>
    import { Counter } from 'webcoreui/svelte'

    let counter = $state(0)
</script>

 <Counter
    bind:value={counter}
    onChange={event => console.log(event)}
/>

import React from 'react'
import { Counter } from 'webcoreui/react'

const Component = () => {
    const [counter, setCounter] = useState(0)

    return (
        <Counter
            value={counter}
            onChange={event => {
                console.log(event)

                setCounter(event)
            }}
        />
    )
}

export default Component

You can use the Counter component without any props. In this case, it’ll be set to 0 by default without a minimum or maximum limit. You can listen to change events by listening to the counterOnChange event in Astro. The event object will dispatch a name and a value property, where name is the name you set on the component, and the value reflecting the current value of the counter.

States

To set a min/max limit on the counter, you can use the min and max props. In fact, the component is based on a number input, so you can pass any valid number input attribute to the component. For example, set disabled to true to disable the input.

<Counter min={-10} max={10} />

<Counter disabled={true} />

Types

The component comes with 3 different types: compact (the default type), buttons, and separated. This sets the visuals of the counter. To set a type, set the type prop to buttons or separated. You can also optionally set an additional rounded prop to true and combine it with the type prop to get rounded counters:

<Counter type="buttons" />

<Counter type="separated" />

<Counter rounded={true} />

Themes

The component comes with four different themes that you can set using the theme prop: info, success, warning, and alert. You can use all themes together with a type or the rounded prop to create a counter that best fits your brand:

<Counter theme="info" />
<Counter theme="success" />
<Counter theme="warning" />
<Counter theme="alert" />

<Counter theme="info" type="buttons" />
<Counter theme="success" type="buttons" />
<Counter theme="warning" type="buttons" />
<Counter theme="alert" type="buttons" />

Custom Icons

Custom icons can be used for the min/max buttons. Simply specify a minIcon and maxIcon prop on the component and either pass an icon type or an SVG string:

<Counter
    minIcon="chevron-left"
    maxIcon="chevron-right"
/>

---
// Path to your icons might differ
import minIcon from '@icons/min.svg?raw'
import maxIcon from '@icons/min.svg?raw'
---

<Counter
    minIcon={minIcon}
    maxIcon={maxIcon}
/>

Counter Width

In case you’re dealing with large numbers, you might want to adjust the width of the counter. This could be done using the className prop and custom CSS, but you can also directly set the width using the width prop, or you can override the following CSS variable to set the width for all of your Counter components:

html body {
    --w-counter-width: 10ch;
}

API

type CounterProps = {
    type?: 'compact' | 'buttons' | 'separated'
    theme?: 'info' | 'success' | 'warning' | 'alert'
    rounded?: boolean
    minIcon?: string
    maxIcon?: string
    width?: string
    className?: string
}

type SvelteCounterProps = {
    onChange?: (value: number) => void
} & CounterProps

type ReactCounterProps = {
    onChange?: (value: number) => void
} & CounterProps

Changelog

• v1.3.0 Added in version.