Counter

Counter Component

The Counter component provides a numeric input with increment and decrement buttons. It supports configurable minimum and maximum values, step increments, decimal precision, and can show labels, hints, tooltips, and validation messages. It is designed to work seamlessly with Livewire for reactive data binding.

Example Usage

<x-counter label="Quantity" wire:model="quantity" tooltip="Adjust the quantity" />

Props

• label (string|null)
  Optional label text displayed above the counter input.

• hint (string|null)
  Optional hint text shown below the input to provide additional information.

• min (int|float, default: 0)
  The minimum allowed value for the counter.

• max (int|float, default: 99999999)
  The maximum allowed value for the counter.

• increment (int|float, default: 1)
  The amount by which the counter increases or decreases on button clicks.

• decimalPoints (int, default: 0)
  Number of decimal places allowed in the counter value.

• current (int|float, default: 0)
  The initial or current value of the counter.

• minusIcon (string, default: "icon-minus")
  CSS class for the icon used on the decrement button.

• plusIcon (string, default: "icon-plus")
  CSS class for the icon used on the increment button.

• showRequired (bool, default: true)
  Whether to show a required asterisk on the label when the field is required.

• showValidation (bool, default: true)
  Controls if validation error messages should be displayed below the counter.

• uuid (string|null)
  Unique identifier for the input element; autogenerated if not provided.

• tooltip (string|null)
  Tooltip text displayed on hover over the buttons and input field.

Overview

This Counter component is a reusable numeric stepper input designed for use with Laravel Livewire. It offers customizable bounds, step sizes, and decimal precision, along with accessibility features like labels, tooltips, and validation messages. The component uses Alpine.js for interactive increment/decrement behavior and supports Tailwind CSS styling for consistent UI appearance.