Edit on GitHub

Input elements

Text input

Matte.text_input — Function
text_input(id, label; default = "")

Free text field for string input by users

Note that a text input always returns a String to the server. If you need users to be able to freely enter a number, use number_input.

source

Numeric inputs

Matte.number_input — Function
number_input(id, label; default = 0)

Form input that only accepts numbers

Note that number_input always returns a float to the server. If you need a string use text_input. If you need integers, you can use a slider or round the result.

source
Matte.slider — Function
slider(id, label, min, max; default = Int(round((max + min) / 2))

Input element that allows users to select among a set of integers using a slider

source

number_input provides more flexibility, as sliders can only offer integers.

Note

number_input will return an empty string if the user deletes all of the digits in the input box. This may cause your server-side functions to fail if they assume a number will be returned.

Selecting among options

Matte.selector — Function
function selector(id, label, items; multiple = false, autocomplete = false)

Create a selection box in your UI for users to choose among options. Allow multiple selections with multiple. Let users type in the box to filter options by setting autocomplete to true. items can either be a string for a static (javascript) array of options (i.e. "['a first option', 'the second option']") or an id that corresponds to a function in your Server that returns an array of options (potentially dynamically).

Returns either an Array (if no or multiple elements are selected) or the type of the individual element if only one is selected. The type that is returned depends on the types of the elements in the select list.

source
Matte.radio — Function
radio(id, values, labels)

Give users a set of options to choose from (exclusively).

Unlike a select, all radio options are displayed (not a drop down list), and cannot be dynamic.

source
Matte.switch — Function
switch(id, label; default = false)

Add a switch that returns true or false based on whether it is turned on.

source
Matte.checkbox — Function
checkbox(id, label; default = false)

Add a checkbox that returns true or false based on whether it is ticked.

source
Matte.list — Function
function list(id, items...; title = nothing)

Create a list of items for users to choose from. items... should be populated with list_items.

title is optional; if specified it provides a grey title at the top of the list.

The selected list item is returned to the server as a zero-based index.

source
Matte.list_item — Function
list_item(title, subtitle = nothing)

Should only be used as part of a list

subtitle is optional. It provides more detail in a smaller font beneath the main item.

source
Matte.button_group — Function
button_group(id, buttons...)

Group together a set of buttons to provide radio-like exclusive selections.

The list of buttons given as input should only contain buttons. The number (0-based index) of the selected button is returned to the server. A selection is mandatory and exclusive.

Component buttons can still have their own ids and will still tell the server when they are pushed.

source

Dynamically setting the options in a selector

By setting the item argument to an id, Matte will fetch the items from the server. This can be used to create dynamic selections, where the options in the list depend on the values of other inputs. The example dynamic_select shows how this works (create it by running matte_example("dynamic_select")).

In the UI, we define a selector, which has items defined by dynamic_items:

selector("main_select", "Choose a subgroup", "dynamic_items")

And we define another selector called first_select that will determine what shows up in dynamic_items, but has static options:

selector("first_select", "Select First Option:", "['Group #1', 'Group #2']")

We then define a function in the Server module in the app called dynamic_items

function dynamic_items(first_select)
  if (first_select == "Group #1")
    ["Subgroup 1.$i" for i in 1:10]
  elseif (first_select == "Group #2")
    ["Subgroup 2.$i" for i in 1:10]
  else
    ["No group selected"]
  end
end

Now, when users make a selection of a group in the first selector, the options in the second select will reflect that choice.

This pattern can be applied to create complex chains of dependent selectors.

Dates and times

Matte.date_picker — Function
date_picker(id::AbstractString; color::AbstractString = "primary")

Add a date picker to your UI. Date is returned as a String in ISO 8601 form (YYYY-MM-DD)

source
Matte.time_picker — Function
time_picker(id; color = "primary", default = nothing)

Add a clock time picker to your UI. Time is returned as a String, in HH:MM 24 hour format. Returns nothing if user has not yet picked a time.

source

Buttons

Matte.floating_action_button — Function
floating_action_button(id, label; location = "bottom right", color = "red")

Add a floating action button to your UI at location

source
Matte.button — Function
button(id, label; color, size)

Add a button to a UI. Buttons return true to the server when clicked, and false otherwise.

size can be one of x-small, small, normal, large, x-large color can be any valid color (see docs on colors for a full list) - e.g. primary, error, teal etc

source