Input Select

Input component for selecting items from a list of options, with support for load options for ajax request.

Props

options Array

Static list of select’s options. Each list element is an object with name and value properties that, respectively, referes to the name and value of select’s options.

default: []

optionsUrl String

URL address that returns the select’s options.

default: undefined

optionsParam String

Object’s property name received from backend which contains the select options.

default: null

nameField String

Object’s property name received from backend which contains the option name.

default: 'name'

valueField String

Object’s property name received from backend which contains the option value.

default: 'id'

dependsOn Object

Object that defines the input which the select is dependent.

dependableId String

DOM’s element id to the dependent input.

param String

Parameter to be sended to backend for request the options.

default: null

multiple Boolean

In case of true, enables multiples selections.

default: false

onSelect Function

Callback function executed when an option on select is selected.

default: null
function onSelect(event) {
  // Logic to be executed when an option is selected
}

onLoad Function

Callback function that runs when the select's options are loaded.

default: function (data) { return true; }
function onLoad(event) {
  // Logic to be executed when the options are loaded
}

onLoadError Function

Callback function that is called if there is an error when the options are loaded.

default: null
function onLoadError(xhr, status, error) {
  // Logic when case of an error.
}

includeBlank Boolean

If true, will be included a null option in the first element list

default: true

blankText String

Text of the null item in the list.

default: 'select'

themeClassKey String

Key assigned to the object specified in the theme settings.

default: "input.select"

Defining a select

The following example is implementation of a form with InputSelect component listing states that user can select.

var formProps = {
  inputs: {
    state: {
      label: 'State',
      component: 'select',
      options: [
        {
          value: 0,
          name: 'Rio de Janeiro'
        },
        {
          value: 1,
          name: 'São Paulo'
        }
      ]
    }
  }
};

Same form, but using options loaded via ajax call to "/state" url. This call returns a list of states and can be implemented as the next example:

// Server response
type StatesResponse = {
  states: Array<State>,
  count: number
}

type State = {
  pk: number,
  fullname: string,
  shortname: string
}

// Form's properties using the InputSelect component
var formProps = {
  inputs: {
    state: {
      label: 'State',
      component: 'select',

      optionsUrl: '/states'
      optionsParam: 'states',
      nameField: 'fullname',
      valueField: 'pk'
    }
  }
};

// form
// <Form {...formProps} />

Defining dependent selects

Inputs of the select type may have dependent options that depend on values of other form inputs, as the cities list in a particular state. To use that feature, the component has to be setup as you can see right below:

var formProps = {
  inputs: {
    state: {
      label: 'State',
      component: 'select',
      optionsUrl: '/states'
    },
    city: {
      label: 'City',
      component: 'select',
      optionsUrl: '/cities',
      dependsOn: {
        dependableId: 'state'
      }
    }
  }
};

// form
<Form {...formProps} />