NumberInput
O componente NumberInput permite que os usuários insiram e editem valores numéricos em uma interface.
Quando usar:
- Precisar de um campo para que os usuários insiram informações exclusivamente numéricas, como:
- Quantidades (por exemplo, número de itens em um carrinho de compras).
- Valores monetários (por exemplo, preços, descontos).
- Idades, medidas, ou qualquer outro dado que seja estritamente numérico.
- A entrada de dados for numérica e não exigir texto livre ou seleção de opções pré-definidas.
Quando não usar:
- O dado a ser inserido for textual. Nesse caso, considere usar o componente
TextInput. - O tipo de uso envolver valores incrementais. Nesse caso, considere usar o componente
StepperInput.
Uso
js
<CdsNumberInput
v-model="inputValue"
/>Preview
supportingText
Props
Nome | Tipo | Default | Opções | Descrição |
|---|---|---|---|---|
label | string | 'Valor' | -- | Especifica a label do input. |
disabled | boolean | false | -- | Desabilita o input. |
state | string | 'default' | default valid loading invalid | Especifica o estado do TextInput. As opções são 'default', 'valid', 'loading' e 'invalid'. |
required | boolean | false | -- | Exibe asterisco de obrigatório (obs.: não faz a validação) |
placeholder | string | 'Digite aqui a informação' | -- | Especifica o placeholder do input |
supportingText | string|array | '' | -- | Especifica mensagem de auxílio. |
errorMessage | string | 'Valor inválido' | -- | Especifica a mensagem de erro, que será exibida caso o estado seja inválido |
fluid | boolean | false | -- | Especifica se a largura do TextInput deve ser fluida. |
tooltip | string | null | -- | Define exibição e texto do tooltip do input |
tooltipIcon | string | 'info-outline' | -- | Especifica ícone do tooltip do TextInput. |
money | boolean | false | -- | Indica se o input vai funcionar com a máscara de dinheiro. A máscara utiliza `R$` como prefixo,` , ` como separador de decimais e tem precisão de 2 dígitos. Ao utilizar essa prop o `update:modelValue` vai deixar de emitir `Number`e vai passar a emitir uma `String` contendo a máscara. Para receber o valor sem máscara, utilize a prop `unmaskedValue` com v-model: `v-model:unmaskedValue="nome da propriedade a ser atualizada"` |
linkText Deprecated | string | null | -- | Define exibição e texto do link do input (localizado à direita da label). |
linkUrl Deprecated | string | 'https://cuida.framer.wiki/' | -- | Define a url a ser acessada no clique do link (no caso do link ser exibido). |
supportLink | string | null | -- | Controla a exibição e o conteúdo do link de suporte exibido ao lado da label. |
supportLinkUrl | string|null | null | -- | Define a url a ser acessada no clique do link de suporte. |
lazy | boolean | false | -- | Quando true, o v-model é atualizado com o evento `change` no lugar do `input`. |
mask | string|array | null | -- | Especifica a máscara a ser aplicada ao TextInput. Exemplo: "(##) #####-####" |
mobile Deprecated | boolean | false | -- | Define o tipo do input, se true será um input adaptador para o mobile |
floatingLabel | boolean | false | -- | Define o tipo do input, se true será um input adaptado para o mobile |