Kobana UI
GitHub

PercentageInput

Input de porcentagem com sufixo % e formatação decimal configurável.

%

Valor numérico: 12.5

Instalação

npx @kobana/ui add percentage-input

Dependências npm: react-number-format

Importação

import { PercentageInput } from "@/components/kobana/percentage-input"

Props

PropTipoDefaultDescrição
valuenumberValor numérico da porcentagem
onValueChange(value: number) => voidCallback de mudança
decimalScalenumber2Casas decimais
maxnumber100Valor máximo permitido

Estende todas as props de NumericFormatProps (react-number-format).

Uso

<PercentageInput
  value={taxa}
  onValueChange={setTaxa}
  decimalScale={2}
  max={100}
/>

Ideal para taxas de juros, descontos, comissões e outros campos percentuais. O sufixo % é exibido de forma fixa e o valor é limitado ao máximo configurado.

On this page