Counter Component

The Counter component provides a numeric input with increment and decrement buttons for easy value adjustment.

Usage

Use the counter for numeric inputs with a defined range:

<x-counter 
    label="Items(s)" 
    :value="1" 
    :min="0" 
    :max="10" 
/>

With Custom Step

Control the increment/decrement amount using the step prop:

<x-counter 
    label="Quantity" 
    :value="5" 
    :min="0" 
    :max="100" 
    :step="5"
/>

Livewire Integration

Bind the counter to Livewire properties using wire:model:

<x-counter 
    label="Guest Count" 
    wire:model.live="guestCount"
    :min="1" 
    :max="20" 
/>

class BookingForm extends Component
{
    public int $guestCount = 2;

    public function calculateTotal(): float
    {
        return $this->guestCount * 50.00;
    }

    public function render(): View
    {
        return view('livewire.booking-form', [
            'total' => $this->calculateTotal(),
        ]);
    }
}

Props Reference

Prop	Type	Default	Description
id	string	Auto-generated	The input ID attribute. Auto-generates unique ID if not provided
name	string|null	null	The input name attribute for form submission
label	string|null	null	Label text displayed above the counter
value	int	1	Initial value of the counter
min	int	0	Minimum allowed value
max	int	10	Maximum allowed value
step	int	1	Increment/decrement amount

References

Category	Path / Name	Description
Component	resources/views/components/counter.blade.php	Counter component file

For the detailed documentation, please visit the Penguin UI Counters.