Input Number
數量選擇器 — [−] [input] [＋] 3 元素邊框連結。min/max/step 同時由 HTML 屬性和 Alpine 鉗制強制，達邊界時 ± 按鈕自動停用。原生旋轉箭頭隱藏。支援小數 step (如 0.5)。
default size=md, value=1, min=1 — カートの quantity selector
bounded — min=1, max=8, step=1 (8 を超えると + が disable される)
1〜8 まで
decimal step — value=3.5, step=0.5 (0.5 刻み)
size variants — xs / sm / md (default) / lg
xs
sm
md
lg
error state — label/hint が text-error に
At least 1 required
disabled — input/buttons 全部 disable
この設定は管理者のみ変更可能
width override — width="w-full" でフル幅
no label / no chrome — 単体で table cell 等に
使い方
{{-- 最小 — name + label + min/value --}}
<x-input-number name="quantity" label="Quantity" :value="1" :min="1" />
{{-- bounded with step --}}
<x-input-number
name="seats" label="Seats"
:value="2" :min="1" :max="8" :step="1"
hint="1〜8 まで" />
{{-- decimal step --}}
<x-input-number :value="3.5" :min="0" :max="5" :step="0.5" />
{{-- size: xs / sm / md (default) / lg --}}
<x-input-number size="sm" :value="1" />
{{-- width override (default は max-w-[10rem] でキャップ) --}}
<x-input-number width="w-full" :value="1" />
{{-- error state --}}
<x-input-number label="Qty" :value="0" :min="1" error="At least 1 required" />
{{-- Livewire model --}}
<x-input-number name="qty" wire:model.live="qty" :value="$qty" :min="0" :max="99" />