Element Types

NexoMaker provides several built-in element types for common use cases. All elements share common properties and can be customized with additional options.

---

Common Properties

All elements support these base properties:

Property	Type	Required	Description
id	String	✅	Unique identifier for the element
label	String	✅	Display label
type	String	✅	Element type identifier
default	Any	❌	Default value
description	String	❌	Help text shown below the element
hint	String	❌	Small hint text
required	Boolean	❌	Whether the field is required
disabled	Boolean	❌	Whether the element is disabled
style	Object	❌	Custom CSS styles

---

Text Input

Single-line text input field.

Example

{
  id: "username",
  label: "Username",
  type: "text",
  placeholder: "Enter username",
  description: "Your unique username",
  default: "",
  required: true,
  maxLength: 50
}

Properties

Property	Type	Description
placeholder	String	Placeholder text
maxLength	Number	Maximum character length
required	Boolean	Whether field is required
readOnly	Boolean	Make field read-only
disabled	Boolean	Disable the input

---

Textarea

Multi-line text input field.

Example

{
  id: "description",
  label: "Description",
  type: "textarea",
  placeholder: "Enter description...",
  rows: 5,
  default: "",
  maxLength: 500
}

Properties

Property	Type	Description
rows	Number	Number of visible rows (default: 4)
resize	String	Resize behavior: 'vertical', 'horizontal', 'both', 'none'
minHeight	Number	Minimum height in pixels (default: 80)
maxLength	Number	Maximum character length

---

Number Input

Numeric input with optional min/max constraints.

Example

{
  id: "max-items",
  label: "Maximum Items",
  type: "number",
  min: 1,
  max: 1000,
  default: 100,
  step: 1
}

Properties

Property	Type	Description
min	Number	Minimum value
max	Number	Maximum value
step	Number	Increment/decrement step (default: 1)

---

Checkbox

Boolean checkbox input.

Example

{
  id: "enable-feature",
  label: "Enable Feature",
  type: "checkbox",
  description: "Enable this awesome feature",
  default: false
}

Properties

Property	Type	Description
default	Boolean	Default checked state

---

Dropdown

Select dropdown with predefined options.

Example

{
  id: "theme",
  label: "Theme",
  type: "dropdown",
  options: [
    { value: "light", label: "Light" },
    { value: "dark", label: "Dark" },
    { value: "auto", label: "Auto (System)" }
  ],
  default: "auto"
}

Properties

Property	Type	Description
options	Array	Array of {value, label} objects
default	String	Default selected value

---

Color Picker

Color selection input.

Example

{
  id: "primary-color",
  label: "Primary Color",
  type: "color",
  default: "#3b82f6",
  description: "Choose your primary brand color"
}

Properties

Property	Type	Description
default	String	Default color in hex format

---

Slider

Numeric slider for range selection.

Example

{
  id: "volume",
  label: "Volume",
  type: "slider",
  min: 0,
  max: 100,
  default: 50,
  step: 1
}

Properties

Property	Type	Description
min	Number	Minimum value
max	Number	Maximum value
step	Number	Increment step
default	Number	Default value

---

Radio Group

Single selection from multiple options.

Example

{
  id: "difficulty",
  label: "Difficulty",
  type: "radio",
  options: [
    { value: "easy", label: "Easy" },
    { value: "normal", label: "Normal" },
    { value: "hard", label: "Hard" }
  ],
  default: "normal"
}

Properties

Property	Type	Description
options	Array	Array of {value, label} objects
default	String	Default selected value

---

Toggle Group

Multiple toggle buttons (like radio but with toggle UI).

Example

{
  id: "view-mode",
  label: "View Mode",
  type: "toggle-group",
  options: [
    { value: "grid", label: "Grid" },
    { value: "list", label: "List" },
    { value: "compact", label: "Compact" }
  ],
  default: "grid"
}

Properties

Property	Type	Description
options	Array	Array of {value, label} objects
default	String	Default selected value

---

Static Text

Display-only text (no input).

Example

{
  type: "static-text",
  content: "⚠️ Warning: Changing these settings may affect performance."
}

Properties

Property	Type	Description
content	String	Text content to display

---

Separator

Horizontal line divider between elements.

Example

{
  type: "separator"
}

---

Action Button

Button that triggers a callback.

Example

{
  id: "export-btn",
  label: "Export Data",
  type: "action-button",
  buttonText: "Export",
  onClick: async () => {
    // Perform action
    await exportData();
  }
}

Properties

Property	Type	Description
buttonText	String	Text displayed on the button
onClick	Function	Function called when button is clicked

---

Choosing the Right Element

Data Type	Recommended Element
Short text	text
Long text	textarea
Numbers	number or slider
True/False	checkbox
Predefined options	dropdown or radio
Colors	color
Display only	static-text
Trigger action	action-button

---

Next Steps

• Create Custom Elements →

• Learn about Reading Settings →

• See Best Practices →