Text inputs

Form fields that require key-press input

In Budibase there are a number of fields that require user key-press input. They are:

  • JSON field
  • Long form field
  • Number field
  • Password field
  • Text field

Adding text inputs

In all cases these components must be nested within a Form component.

Within the component panel of your screen click Add component and select the Form component.

Next click on the form component that was just added, then click add component again. This will ensure that the field will be nested inside the form once added, however you can also drag orphan input fields into your form if needed.

When looking for a key-press input, a handy tip is to search for the word 'field'.

Search for and select a field to add

Search for and select a field to add

Example form component tree

Example form component tree

Finally, for an input to be useable, it must be given a field name. If the form has been given a schema, then you will be able to select from a list of type matched fields. Alternatively you can manually enter a field name.

Selecting a field from the form schema

Selecting a field from the form schema

Fields are now visible

Fields are now visible


Using form blocks

When using a Form block the field components are not directly accessible. If you want to edit the field components, then you will need to Eject the form block.

Otherwise, Budibase will match the Data type of the field to a corresponding field component. Most commonly this will be the Text field and Number field, however it could also be the JSON field for the JSON data type, among others.


Common settings

All of the key-press inputs share common settings, which are presented in the reference table below.

SettingDescription
FieldConnected field from the parent Form element, or custom by typing in a field name.
LabelThe text visible to the user next to the input box as a descriptor of the field.
PlaceholderThe text displayed in a lighter tint inside the input box. Will only display when nothing is entered in the field.
Default ValueOn initial load of the form the field will be pre-filled with specified default value. Entering this will also prevent the placeholder from showing.
DisabledWhen checked, disables the field; the user cannot change the value.

On change

Allows you to specify Actions to be triggered when the input field changes value. Specifically this event is triggered when the user presses the tab key or clicks off the field (on blur), or if the user pressed the enter key.

When using the field value as a Binding, make sure to use the current field value. For example, you may want to use the first name value in an on change action:

Select the field that triggered the on change

Select the field that triggered the on change

Select Field Value; i.e. the on change value

Select Field Value; i.e. the on change value

πŸ‘

{{ Field Value }}

Gets the current field value.

❗️

{{ Form.Fields.First Name }}

Will get the previous value; before the on change was triggered.

Configure validation

Allows you to configure custom validation rules for the input field.
See more about Form validation.


Text field

The text field allows users to enter inline text. This is the most common text input.

It is compatible with the Text data type.

836

Number field

Allows users to enter whole or decimal numbers.

It is compatible with the Number data type.


Password field

Same as the text field, however it hides the text being entered.

Any binding of the field value will be in plain text, and Budibase does not perform any hashing by default on password fields when saving rows.


Long form field

The long form field is a text field that allows for longer and multiline input.

You can also enable rich-text editing with markdown support by selecting Rich text in the formatting setting.

Selecting rich text formatting

Selecting rich text formatting

Usually when importing a table from CSV or fetching SQL tables string data types will automatically be assigned as a Text type.

If you want to support the long form field, then you will need to edit column and change the type.

Allowing the address to be multi-line

Allowing the address to be multi-line


JSON field

The JSON field allows you to enter JSON into resizable box with formatting enabled.