GLayer provides standardized reusable inputs that can be used to change a layer variable value. Unless specified otherwise, the inputs use 100% width of their parent container, and height is dependent on the input type. GLayer currently supports the following inputs with these properties:

TextField

Text field input for strings / numbers / dates. The default value is “”.

• type – type of the field (text/number/date…); defaults to text
• placeholder – input placeholder (shown when input is empty)

type = text

• pattern – optional pattern attribute for validation of text input types
• minlength – min length for text input types
• maxlength – max length for text input types
• options – an optional array of options for an autocomplete datalist, with value and description properties

type = number

• min – min number for number input types
• max – max number for number input types
• step – input step for number input types, can be any number or string “any”

TextArea

Textarea input for longer strings. The default value is “”.

• height – height of the text area, defaults to 3rem
• placeholder – textarea placeholder (shown when textarea is empty)

Toggle

Toggle input that can be switched between on (true) and off (false) states. The default value is false (off).

Checkbox

Checkbox input that can be switched between checked (true) and unchecked (false) states. The default value is false (unchecked).

Select

Select input with predefined selectable values. The default value is “” (nothing selected).

• options – an array of options for select input, with the following properties:
  • value – value of the option (returned as the value of the input when an option is selected)
  • title – title of the option, shown as the primary text (instead of the value) if provided
  • description – description of the option, shown as a secondary text in the option (for providing additional information)
• searchable – if set to true, the options can be searched by the user (filters only options that have given text in value/title/description)

ButtonSelect

Select-like input, where each option is a clickable button. The default value is “” (nothing selected). The individual button width is dependent on the option description/value.

• options – array of options for select input, with the following properties:
  • value – value of the option (returned as the value of the input when an option is clicked)
  • title – title of the option, shown as the primary text (instead of value) if provided
  • description – description of the option, shown as a tooltip when hovering on the option (for providing additional information)
  • imgSrc – if provided, replaces the button with an image with given source.
• direction – direction of the select buttons – “row” (default) or “column”
• justify – sets the justify-content property for the buttons. Possible values are: start (default), end, center, between, around, or evenly.

Range

Range input for number values with min and max values, showing the currently selected value next to the slider. Default value is (min+max)/2. 2/3 of the input width is used for the slider and 1/3 for value text.

• min – min number for range types
• max – max number for range types
• step – input step for range, can be any number or string “any”

Color

Color input (using default browser color selection), with optional alpha channel configuration. Stores the value in the same 4 array 0-1 format as the server (e.g. purple with half opacity as [1, 0, 1, 0.5]). Default value is [0, 0, 0, 1].

• allowAlpha – when set to false, will not allow to change the alpha value (will always be 100%)