NumberInput
Input numérico com botões de incremento/decremento, limites min/max, prefixo/sufixo e precisão.
Demonstração
0–100%
Sizes
Props
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
value | number | undefined | — | Valor numérico |
onChange | (value: number | undefined) => void | — | Callback com novo valor numérico |
min | number | — | Valor mínimo permitido |
max | number | — | Valor máximo permitido |
step | number | 1 | Passo do incremento (padrão: 1) |
precision | number | — | Casas decimais |
prefix | string | — | Símbolo de prefixo (ex: R$) |
suffix | string | — | Símbolo de sufixo (ex: %) |
size | "sm" | "md" | "lg" | "md" | Tamanho: sm | md | lg |
label | string | — | Texto do label |
error | string | — | Mensagem de erro |
helperText | string | — | Texto auxiliar abaixo do input |
Uso
import { NumberInput } from '@ghiberti85/ui'
const [quantity, setQuantity] = useState(1)
// Basic
<NumberInput label="Quantity" value={quantity} onChange={setQuantity} min={0} max={99} />
// Currency
<NumberInput
label="Price"
value={price}
onChange={setPrice}
prefix="$"
min={0}
step={0.01}
precision={2}
/>
// Percentage with helper text
<NumberInput
label="Discount"
value={discount}
onChange={setDiscount}
suffix="%"
min={0}
max={100}
step={5}
helperText="Enter a value between 0 and 100"
/>