Input

Componente para inputs de formulários.

Props

id String obrigatório

Atributo id do input.

name String

Atributo name do input.

default: props.id

label String

Texto da tag label associada a este input.

default: ''

value Any

Valor inicial do input.

default: undefined

component String

Nome do componente de input. Por padrão, os inputs aceitam valores do tipo texto.

default: "text"

Os tipos definidos são:

"text"

Input para campos do tipo texto. Veja o componente InputText.

props: {
  label: 'A text input',
  component: 'test',
  value: 'A text value'
}
"autocomplete"

Input para campos do tipo texto com suporte a autocomplete. Veja o componente InputAutocomplete.

props: {
  label: 'An autocomplete input',
  component: 'autocomplete',
  options: [{
            id: 0,
            name: 'word 1'},
          {
            id: 1,
            name: 'word 2'},
          {
            id: 2,
            name: 'word 3'
          }
        ]
  }
"textarea"

Input para inserção de textos multi-linha. Veja o componente InputTextarea.

props: {
  label: 'A textarea input',
  component: 'textarea',
  value: 'A text value in textarea'
}
"number"

Input para campos do tipo número. Veja o componente InputNumber.

props: {
  label: 'A number input',
  component: 'number',
  value: 12345
}
"masked"

Input para definir um formato predefinido utilizando máscaras. Veja o componente InputMasked.

props: {
  label: 'A masked input',
  component: 'masked',
  maskType: 'currency',
  value: 1.85
}
"password"

Input para campos do tipo senha. Veja o componente InputPassword.

props: {
  label: 'A password input',
  component: 'password',
  value: '123abc456'
}
"datepicker"

Input para inserção de datas utilizando um calendário. Veja o componente InputDatepicker.

props: {
  label: 'A datepicker input',
  component: 'datepicker',
  value: '20151210'
}
"file"

Input para seleção e upload de arquivos. Veja o componente InputFile.

props: {
  label: 'A datepicker input',
  component: 'file'
}
"hidden"

Input invisível. Veja o componente InputHidden.

props: {
  component: 'hidden'
}
"switch"

Input para campos do tipo boolean. Veja o componente InputSwitch.

props: {
  label: 'A switch input',
  component: 'switch',
  value: true
}

formStyle String

Estilo da grid de inputs especificado nas configurações de tema. Caso não especificado, utiliza o estilo definido no formulário.

default: "default"

data Object

Objeto mapeando o valor deste input, na forma {input_id: value}.

default: {}

errors Object

Objeto que define os campos com erros de validação. Os erros serão exibidos através do componente InputError.

default: {}
Exemplo
errors: {
  password: [ 'Senha incorreta' ],
  date: [ 'Data com formato incorreto' ]
}

maxLength Number

Tamanho máximo do valor do input.

default: null

renderLabel Boolean

Caso false, renderiza input sem título.

default: true

resource String

Essa propriedade serve para alterar o name e o id dos inputs do componente Input.

default: null
Exemplo
<Input id="usuarios" name="usuarios" resource='cadastros' />

// O id dos inputs ficará assim:
id='cadastros_usuarios';

// O name dos inputs ficará assim:
name='cadastros[usuarios]';

scope String

Tipo de escopo do input. Pode ser "resource" ou "global". Caso "resource", insere o nome do resource como prefixo do id do input.

default: "resource"
id: 'name'
resource: 'product'
scope: 'resource'
// id do input será product_name

themeClassKey String

Chave atribuida ao objeto especificado nas configurações de tema.

default: "form.inputGroup"