Introduction

Inputs provide a straightforward way to set the values of the Global Parameters of your views. Basically they let you provide a user interface to your queries.

When an input is empty, the parameter will NOT be sent in any query request. This means that you will want to add a fallback to your query to handle this case. For more information, check out Query Parameters

Basic usage

The most basic usage of an input is to provide a text input for a parameter. You can do this by using the param prop to specify the name of the parameter you want to control. param is mandatory so if you don’t include it the app will return an error.

<Input param="name" value="Jon" />

This will create a text input that is associated with the name parameter. If you load the page with the name parameter already in the URL, you will see the value from the URL in the input. You can also provide a default value for the input by using the value prop.

If you load the page without the name parameter in the URL, the input will be set to the default value. If you load the page with a different value for the name parameter in the URL, the input will be set to that value.

Types

You can also specify the type of input you want to use by using the type prop. This works with the type attribute of the <input> element in HTML. You can use this to specify that the input should be a number, email, tel (phone number), time, etc.

<Input param="age" type="number" />

This will create a number input that is associated with the age parameter.

Properties

In addition to the standard HTML input properties, the Input component accepts the following props:

label
string

A label for the input.

description
string

A description to display below the input.