This video is available to students only

Built-in input types

Using the various input types provided with React Query Builder, including numeric inputs and drop-down lists

Built-in input types#

In this lesson we'll be working with the built-in input types and value getters. Input types will set the type attribute of an <input> element, and value getters will set up options for drop-down lists.

Input types#

There are two ways to configure input types:

  • the getInputType prop at the query level

  • the inputType attribute at the field level

We'll use the field-level attribute because it's simpler for our purposes.

Set the inputType attribute to "number" for order_id and all other numeric fields.

We'll leave the rest as the default (which is "text") since we're going to enhance the date fields with a proper date picker in a later lesson.

Now we'll set up the drop-downs for fields that have discrete value lists.

First we need to define their valueEditorType as "select". Once again, there are two ways to do this - at the query level and at the field level. We are going to use the field-level attribute for this configuration.

No discussions yet