Number
The <x-xf::number> component is a custom Blade component designed for rendering number input fields. It supports optional labels, default values, sizing, and additional attributes — making numeric inputs consistent, clean, and highly configurable within Laravel forms.
📄 <x-xf::number>
📘 Description
The <x-xf::number> component is a reusable Laravel Blade component for creating numeric input fields. It provides a structured way to collect number-based input such as quantities, prices, ratings, etc., while supporting optional labels, value defaults, and size variations.
You can enhance it further with HTML attributes like min, max, and step using the attr parameter.
✅ Usage Example
<x-xf::number
name="quantity"
label="Quantity"
value="5"
size="md"
:attr="['min' => 1, 'max' => 100]"
class="mb-4"
/>
🔑 Props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
name |
string | ✅ | — | Name of the input field. Required for form submission and binding. |
attr |
array | ❌ | [] | Additional HTML attributes such as min, max, step. |
size |
string | ❌ | 'md' |
Controls visual size: accepts sm, md, lg. |
label |
string|null | ❌ | null | Label displayed above the input field. |
value |
mixed | ❌ | null | Default numeric value pre-filled in the input. |
class |
string|null | ❌ | null | CSS class for custom styling of the input or wrapper. |
🛡 Features
- ✅ Consistent numeric input fields
- ✅ Size and label customization
- ✅ Supports additional HTML attributes
- ✅ Works with form model binding and
old()values