Input Number
数量选择器 — [−] [input] [+] 3 元素边框连接。min/max/step 同时在 HTML 属性和 Alpine 限制中强制执行,到达边界时 ± 按钮自动禁用。原生微调箭头隐藏。支持小数步长(如 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
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" />