Fields

Fields

Properties for all fields

  • type (String, required)
  • name (String, required)
  • label (String) a bold label displayed before the input field
  • description (String) a description displayed before the input field
  • default (Mixed) a default value for the field
  • ready (Function) a function to run when a field is initialized

Types

Text input

A simple text input field. Also supports the following optional properties:

  • placeholder (String)
  • required (Boolean)

Example:

{
  type: 'text',
  name: 'firstName',
  label: 'First Name',
  description: 'The first name of the user',
  placeholder: 'Type your name',
  default: 'John',
  required: true
}

Textarea

A simple textarea input field. Also supports the following optional properties:

  • required (Boolean)
  • rows (Number)

Example:

{
  type: 'textarea',
  name: 'bio',
  label: 'Bio',
  description: 'Type your bio',
  required: true,
  rows: 5
}

Checkbox

A list of checkboxes for the user to allow a multiple choice selection. Supports the following property:

  • options (Array of strings or objects with either { value: string} or { value: string, label: string })

Example:

{
  type: 'checkbox',
  name: 'fruits',
  label: 'Choose one or more fruits',
  options: ['Apple', 'Orange']
}

Example with different label and value:

{
  type: 'checkbox',
  name: 'fruits',
  label: 'What stocks do you like?',
  options: [
    { value: 'AAPL', label: 'Apple' },
    { value: 'GOOGL', label: 'Google' }
  ]
}

Radio

A list of radio buttons for the user to allow a single choice selection. Supports the following property:

  • options (Array of strings or objects with either { value: string} or { value: string, label: string })

Example:

{
  type: 'radio',
  name: 'fruits',
  label: 'Choose a fruit',
  options: ['Apple', 'Orange']
}

Example with different label and value:

{
  type: 'radio',
  name: 'fruits',
  label: 'Which stock do you like most?',
  options: [
    { value: 'AAPL', label: 'Apple' },
    { value: 'GOOGL', label: 'Google' }
  ]
}

Provider

A provider (Fliplet first-party component) to perform a variety of tasks. These are commonly used to reuse existing functionality, e.g. let the user choose a screen or a data source.

  • package (string, e.g. com.fliplet.link)

These are the supported provider packages:

  • com.fliplet.link: choose an App Screen or URL for a navigate action
  • com.fliplet.data-source-provider: choose a Data Source

Example:

{
  type: 'provider',
  name: 'action',
  label: 'Choose an action to do when the button is pressed',
  package: 'com.fliplet.link'
}

HTML

A freeform HTML field. Supports the following properties:

  • html (HTML String) the HTML template
  • ready (Function) a function to run when a field is initialized
{
  type: 'html',
  html: '<input type="email" name="Email" />'
}

Further reading

Recommended reading

Hooks & Events

Learn the different hooks and events for helper interfaces.