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'