Input

Component to form inputs.

Props

id String mandatory

Input id atribute.

name String

Input name atribute.

default: props.id

label String

Texto da tag label associada a este input.

default: ''

value Any

Initial value of the input.

default: undefined

component String

Input component name. By default, inputs accept text type values.

default: "text"

The defined types are:

"text"

Input for text type fields. See the component InputText.

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

Input to type text fields with support autocomplete. See the component 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 for inputting multi-line text. See the component InputTextarea.

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

Input to the type number fields. See the component InputNumber.

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

Input to set a predefined format using masks. See the component InputMasked.

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

Input for fields password type. See the component InputPassword.

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

Input for entering dates using a calendar. See the component InputDatepicker.

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

Input for selecting and uploading files. See the component InputFile.

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

Input invisible. See the component InputHidden.

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

Input for fields of type boolean. See the component InputSwitch.

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

formStyle String

Style grid of inputs specified in the theme settings. If not specified, it uses the style defined in the form.

default: "default"

data Object

Object mapping the value of this input, in the form {input_id: value}.

default: {}

errors Object

Object that defines the fields with validation errors. Those errors are going to be rendered by InputError component.

default: {}
Example
errors: {
  password: [ 'Wrong password.' ],
  date: [ 'Wrong date format.' ]
}

maxLength Number

Max lenght of input value.

default: null

renderLabel Boolean

If false, the input render without label

default: true

resource String

This property is used to change the inputs name and id of Input component.

default: null
Example
<Input id="users" name="users" resource='register' />

// Inputs id will be like:
id='register_users';

// Inputs name will be like:
name='register[users]';

scope String

The scope type input . Can be "resource" or "global". If "resource", insert the name of "resource" as the prefix propref_s}id's input .

default: "resource"
id: 'name'
resource: 'product'
scope: 'resource'
// Input id will be product_name

themeClassKey String

Key assigned to the object specified in the theme settings.

default: "form.inputGroup"