components
number-input
Input numérico com botões + e − pra ajuste fino. Usado quando precisão exata é necessária ou quando o usuário precisa visualizar o valor.
overview
variantes
Inteiro
Decimal
Com label
máx 10 por pedido
estados
comportamentos
- Botões − / + ajustam por step
- Digitação direta sempre permitida
- Setas ↑/↓ no input nativo funcionam
- Botões boundary desabilitam quando min/max atingido
- JS auto-init pelo components.js
modifiers · api
| prop | tipo | default | descrição |
|---|---|---|---|
| .number-input | class | — | container |
| data-action="dec" | attr | — | botão diminuir |
| data-action="inc" | attr | — | botão aumentar |
| min | attr | — | valor mínimo |
| max | attr | — | valor máximo |
| step | attr | — | incremento |
quando usar
use
não use
acessibilidade
- Botões com aria-label descritivo
- Input nativo <input type='number'>
- Foco visível em todos os 3 elementos
- Disabled refletido visualmente E semanticamente
código
<div class="number-input">
<button type="button" data-action="dec" aria-label="diminuir">−</button>
<input type="number" value="1" min="0" max="99">
<button type="button" data-action="inc" aria-label="aumentar">+</button>
</div>