Input Group

Block component to group inputs.

Props

inputs Object mandatory

Object that defines the props of the inputs of the group, where the key is the id of the input. See the component Input.

inputs: {
  name: {
    label: "Product Name"
  },
  price: {
    label: "Price",
    component: "masked",
    maskType: "currency"
  }
}

label String

Group title.

default: null

data Object

Map to the values ​​of the inputs, where the key is the id of the input and the value of this is the value associated with the input.

default: {}
data: {
  name: 'Ballpoint Pen',
  price: 1.85
}

disabled Boolean

If true, disable input field.

default: false

separator Boolean

If true, inserts a tab at the end of the block.

default: false

errors Object

Object that defines the fields with validation errors.

default: {}
/* Using resource scope */
resource: 'product',
errors: {
  product: {
    name: 'Wrong name...'
  }
}
/* Using global scope */
errors: {
  name: 'Wrong name...'
}

resource String

This property is used to change the inputs name and id of Input component. See the Input component for more information and examples.

default: null

readOnly Boolean

If true, input field will be read only

default: false

formStyle String

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

default: "default"

themeClassKey String

Key assigned to the object specified in the theme settings.

default: "form.inputGroup"

wrapperClassName String

Class element that encapsulates the child elements.

default: "nav-wrapper container"