Input types are used to define how settings appear and behave in the theme editor. They allow you to create a user-friendly interface for customizing your theme sections.

​
Usage

Input types are defined in the settings array of your section schema. Each setting must have a type property that specifies which input type to use. In the example below, we define a section with three different input types: a text input for the heading, a toggle group for the layout, and a range slider for padding. 
{
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "label": "Heading",
      "default": "Hello, world!"
    },
    {
      "type": "select",
      "id": "layout",
      "label": "Layout",
      "options": [
        {
          "value": "full_width",
          "label": "Full width",
          "kiwi_extra": {
            "icon": "fa fa-arrows-alt-h"
          }
        },
        {
          "value": "contained",
          "label": "Contained",
          "kiwi_extra": {
            "icon": "fa fa-compress"
          }
        }
      ],
      "default": "full_width",
      "kiwi_extra": {
        "labeled": true
      }
    },
    {
      "type": "range",
      "id": "padding",
      "min": 0,
      "max": 100,
      "step": 5,
      "unit": "px",
      "label": "Padding",
      "default": 15
    }
  ]
}
Resulting fields in editor
Check detailed documentation for each input type:

Text Input

Basic text input fields

Range

Select a numeric value within a range

Select

Toggle button group for selecting an option

Checkbox

For representing true/false values

Image Picker

Image inputs

Course

Select a course from the members area

Module

Select a module from the members area

​
Common Properties

All input types share these common properties:
​
type
string
required
The type of input to use. See available types above.
​
id
string
required
Unique identifier for the setting. Must be unique within the section.
​
label
string
required
The label shown in the theme editor.
​
default
any
Default value for the setting. Type depends on the input type.
​
info
string
Additional information shown below the input.
​
kiwi_extra
object
Additional properties for the setting. Currently supported:
  • hidden: Boolean value, indicates whether this setting should be displayed in Theme Editor’s configuration bar
  • validations: Apply validations to this setting before saving. Currently supported:
    • required: Boolean value. If true, this setting must be filled with a valid value.