Input
Insere um campo para inserção de dados.
Exemplo
Utilização
<Window>
<Input
inputMode="email"
type="text"
mode="danger"
label="Seu email"
hint="Preencha corretamente"
onChange={(value)=>{ ... }}
/>
</Window>
Propriedades
Type
Define o tipo do campo input.
Valores aceitos:
"text"
"tel"
"url"
"email"
"password"
"number"
password"
InputMode
Altera o modo do campo e tipo de teclado.
<Input inputMode="email"/>
Valores aceitos:
"none"
"text"
"decimal"
"numeric"
"tel"
"search"
"email"
"url"
PlaceHolder
Texto descritivo dentro do input.
<Input PlaceHolder="Usuário"/>
Label
Rótulo do input.
<Input label="Seu email"/>
Hint
Permite adicionar uma mensagem logo abaixo do input, indicando um erro ou informação importante. Pode ser numéricos, alfabéticos ou caracteres.
<Window>
<Input hint="Preencha corretamente"/>
</Window>
Multiline
O campo input
é transformado em textarea
<Input multiline />
NextInputId
Permite que o Input atual realize focus
no Input referenciado.
Obrigatório o uso da propriedade id
<Input id="emai" nextInputId="telefone"/>
PreviousInputId
Esta propriedade faz referência ao input anterior na hierarquia de inputs do documento.
<Input id="emai" previousInputId="telefone"/>
Id
Atribuiu um id ao input. Indica qual elemento irá receber o focus
através da propriedade nextInputId
.
<Input id="idade" />
Mask
Indica que o conteúdo do input deverá ser formatado de acordo com uma máscara.
<Input mask={"999.999.999-99"} />
AutoCapitalize
Atributo que sugere ao sistema operacional adicionar uma letra maiúscula nas sentenças conforme o valor.
Aceita somente os valores:
- off - Não aplica capitalização.
- on - Aplica capitalização padrão do sistema operacional.
- sentences - Tenta aplicar capitalização em frases.
- words - Tenta aplicar capitalização em palavras.
- characters - Tenta aplicar caixa alta em todas as letras.
<Input autoCapitalize="off" />
Spellcheck
Este atributo permite ativar ou desativar a checagem de ortografia.
<Input spellcheck={false} />
Autocorrect
Atributo que indica se é necessário ativar ou não a correção automática enquanto o usuário estiver editando este campo.
É necessário que o spellcheck
esteja declarado na tag para o atributo funcionar.
<Input spellcheck autocorrect={true} />
Disabled
Desabilita o campo
<Input disabled />
OnChange
Função a ser executada quando o valor é alterado.
<Input onChange={() => ``'``'} />
OnSubmit
Função a ser executada ao submeter o campo.
<Input onSubmit={() => ``'``'} />
Value
Define o valor do campo
<Input value="Olá, mundo!" />
Password
Altera o campo para o tipo senha.
<Input password />
AutoNextOnFill
Deve ser usado em conjunto com as propriedades maxLength e nextInputId
Localiza automaticamente o próximo campo input a ser preenchido quando este atinge o limite máximo de caracteres.
<Input autoNextOnFill maxLength={3} nextInputId="proximoInput"/>
AutoPreviousOnEmpty
Deve ser usado em conjunto com a propriedade previousInputId
Localiza automaticamente o campo input anterior a ser preenchido quando o usuário digita backspace em um input vazio.
<Input autoPreviousOnEmpty previousInputId="inputAnterior"/>
Autocomplete
Preenchimento automático do campo.
<Input autoPreviousOnEmpty autocomplete="tel"/>
Valores aceitos:
'off'
'on'
'name
''honorific-prefix'
'given-name'
'additional-name'
'family-name'
'honorific-suffix'
'nickname'
'email'
'username'
'new-password'
'current-password'
'one-time-code'
'organization-title'
'organization'
'street-address'
'address-line1'
'address-line2'
'address-line3'
'address-level4'
'address-level3'
'address-level2'
'address-level1'
'country'
'country-name'
'postal-code'
'cc-name'
'cc-given-name'
'cc-additional-name'
'cc-family-name'
'cc-number'
'cc-exp'
'cc-exp-month'
'cc-exp-year'
'cc-csc'
'cc-type'
'transaction-currency'
'transaction-amount'
'language'
'bday'
'bday-day'
'bday-month'
'bday-year'
'sex'
'tel'
'tel-country-code'
'tel-national'
'tel-area-code'
'tel-local'
'tel-extension'
'impp'
'url'
'photo'