Formulários

Incrementador numérico

Number stepper

Aumenta ou diminui um número por passos definidos.

Quantidade2

De 1 a 10 unidades

Exemplo didático · Experimente os controles acima

Quando usar

Ajustar quantidade de itens ou um número pequeno e limitado.

Cuidados e acessibilidade

Exponha limites e passo; não use para identificadores como CPF e telefone.

Partes e comportamento

Valor, controles de incremento e decremento, passo e limites.

Não confunda

Números que identificam pessoas ou documentos não são quantidades e não devem ter incremento.

Exemplo de código

<label for="quantidade">Quantidade</label>
<input type="number" id="quantidade" min="1" max="10" step="1" value="1">

Trecho didático. Integre e teste no contexto do seu projeto.

Peça assim para uma IA

Crie um componente de interface do tipo Incrementador numérico (Number stepper) em português do Brasil. Aumenta ou diminui um número por passos definidos. Contexto de uso: Ajustar quantidade de itens ou um número pequeno e limitado. Estrutura: Valor, controles de incremento e decremento, passo e limites. Referência técnica: <input type="number">. Requisito: Exponha limites e passo; não use para identificadores como CPF e telefone. Considere também: Números que identificam pessoas ou documentos não são quantidades e não devem ter incremento. Adapte cores e tipografia ao projeto. Cubra estados inicial, foco, ativo, indisponível, carregamento, vazio e erro quando aplicáveis. Garanta contraste legível, comportamento responsivo, movimento reduzido e acesso por teclado. Use textos em PT-BR, valores em reais e datas no formato brasileiro quando houver. Explique quais partes exigem integração real e não simule sucesso sem concluir a operação.

Consultar referência técnica ↗Copiar link deste termo ↗