Input Number
数量セレクタ — [−] [input] [＋] の 3 要素を border 連結。min/max/step は HTML 属性と Alpine clamp 両方で enforced、bound 到達時は ± ボタンが auto-disable する。native spinner arrows は非表示。decimal step (e.g. 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" />