Skip to main content

UI Component List

Viewing Components via the uiWidgets Tab in Edit Mode​

This is the simplest method. In the uiWidgets tab of edit mode, you can browse the UI component list in the middle panel to preview each component's appearance and its corresponding sample object in real time.

See Edit Mode UI Walkthrough for details.

uiWidgets reference​

Below is a list of all UI components supported by ToolBake. This content is auto-generated for easy reference.

TextInput (Text Input)​

Single-line value capture with optional prefix label and default text. $.props allow "mini"|"normal" size.

{
  "id": "guide-text-input",
  "type": "TextInput",
  "title": "Context Label",
  "mode": "input",
  "props": {
    "prefixLabel": "Title",
    "prefixLabelSize": "6em",
    "placeholder": "Team sync summary...",
    "defaultValue": "Alpha squad sync notes",
    "size": "mini",
    "delayTrigger": false
  }
}

NumberInput (Number Input)​

Numeric value field with increment controls and optional bounds. $.props allow "mini"|"normal" size.

{
  "id": "guide-number-input",
  "type": "NumberInput",
  "title": "Batch Size",
  "mode": "input",
  "props": {
    "prefixLabel": "Items",
    "min": 1,
    "max": 250,
    "step": 5,
    "defaultValue": 25,
    "size": "mini"
  }
}

RadioGroupInput (Radio Group)​

Pill-style selection for mutually exclusive options.

{
  "id": "guide-radio-input",
  "type": "RadioGroupInput",
  "title": "Execution Profile",
  "mode": "input",
  "props": {
    "orientation": "horizontal",
    "defaultValue": "balanced",
    "options": [
      {
        "value": "fast",
        "label": "Fast",
        "description": "Prioritize speed"
      },
      {
        "value": "balanced",
        "label": "Balanced",
        "description": "Best effort"
      },
      {
        "value": "precise",
        "label": "Precise",
        "description": "Max accuracy"
      }
    ]
  }
}

SelectListInput (Select List)​

Dropdown list for picking a single option.

{
  "id": "guide-select-input",
  "type": "SelectListInput",
  "title": "Dataset",
  "mode": "input",
  "props": {
    "placeholder": "Pick dataset",
    "defaultValue": "recent",
    "options": [
      {
        "value": "recent",
        "label": "Recent"
      },
      {
        "value": "archived",
        "label": "Archived"
      },
      {
        "value": "shared",
        "label": "Shared"
      }
    ]
  }
}

SliderInput (Slider)​

Continuous numeric control with live display badge.

{
  "id": "guide-slider-input",
  "type": "SliderInput",
  "title": "Sampling Rate",
  "mode": "input",
  "props": {
    "defaultValue": 60,
    "max": 100,
    "step": 5,
    "valueSuffix": "%"
  }
}

ToggleInput (Toggle)​

Switch control for boolean values with helper text.

{
  "id": "guide-toggle-input",
  "type": "ToggleInput",
  "title": "Realtime Sync",
  "mode": "input",
  "props": {
    "defaultValue": true,
    "onLabel": "Active",
    "description": "Enable live handler execution"
  }
}

ColorInput (Color Picker)​

Hex color selector with preview circle and copy action.

{
  "id": "guide-color-input",
  "type": "ColorInput",
  "title": "Accent Color",
  "mode": "input",
  "props": {
    "defaultValue": "#0EA5E9",
    "showHex": true
  }
}

ColorPickerInput (Color Picker Panel)​

Popover color palette powered by Sketch picker with preset swatches and copy action.

{
  "id": "guide-color-picker-input",
  "type": "ColorPickerInput",
  "title": "Brand Gradient",
  "mode": "input",
  "props": {
    "defaultValue": "#4B6E35",
    "presetColors": [
      "#FDE68A",
      "#FCA5A5",
      {
        "color": "#D8B4FE",
        "title": "Soft Lavender"
      }
    ]
  }
}

TextareaInput (Textarea)​

Multi-line editor for descriptions, logs, or snippets. Supports syntax highlighting. set $.props.highlight to 'highlight:language' to enable.

{
  "id": "guide-textarea-input",
  "type": "TextareaInput",
  "title": "Operator Notes",
  "mode": "input",
  "props": {
    "placeholder": "Document procedures, shortcuts, or caution items...",
    "rows": 6,
    "highlight": ""
  }
}

FileUploadInput (File Upload)​

Drag and drop zone for optional supporting files. Or paste from clipboard. This component can be used to read content from clipboard.

{
  "id": "guide-file-input",
  "type": "FileUploadInput",
  "title": "Attach Blueprint",
  "mode": "input",
  "props": {
    "description": "Upload diagrams or auxiliary configs",
    "mini": false
  }
}

FilesUploadInput (Files Upload)​

Drag and drop multiple files. Or paste from clipboard to upload files. Set allowDirectory to enable folder selection (Chromium only).

{
  "id": "guide-files-input",
  "type": "FilesUploadInput",
  "title": "Attach Files",
  "mode": "input",
  "props": {
    "description": "Upload multiple files to process",
    "allowDirectory": false
  }
}

TagInput (Tag Input)​

Collect multiple free-form keywords with optional cap.

{
  "id": "guide-tag-input",
  "type": "TagInput",
  "title": "Tag Keywords",
  "mode": "input",
  "props": {
    "placeholder": "Add keywords and press Enter",
    "maxTags": 6
  }
}

ButtonInput (Button)​

Action button that triggers a click event with customizable style. Only user clicks trigger the handler, external value changes don't affect button behavior.

{
  "id": "guide-button-input",
  "type": "ButtonInput",
  "title": "Execute Action",
  "mode": "input",
  "props": {
    "label": "Run Process",
    "variant": "default",
    "size": "default",
    "description": "Click to trigger the action"
  }
}

LabelInput (Label)​

Display-only text label that supports richer HTML tags and optional Tailwind classes.

{
  "id": "guide-label-input",
  "type": "LabelInput",
  "title": "Status",
  "mode": "output",
  "props": {
    "content": "<div class='text-sm leading-relaxed'><div><b>durationStr</b> supports an optional sign (<code>+</code>/<code>-</code>) and one or more <code>&lt;int&gt;&lt;unit&gt;</code> segments like <code>1h30m</code>.</div><div class='text-muted-foreground text-[12px] mt-1'>Units: ms, s, m, h, d, w, M, y.</div></div>",
    "tone": "default",
    "autoHeight": true
  }
}

RawHtmlInput (Raw HTML)​

Display-only HTML label rendered without sanitization. Use with trusted content only.

{
  "id": "guide-raw-html-input",
  "type": "RawHtmlInput",
  "title": "Unsafe HTML",
  "mode": "output",
  "props": {
    "content": "<div class='text-sm leading-relaxed'><div><b>Warning</b>: HTML renders directly without sanitization.</div><div class='text-muted-foreground text-[12px] mt-1'>Use only with trusted content.</div></div>",
    "tone": "default",
    "autoHeight": true
  }
}

DividerInput (Divider)​

Visual separator between widgets with optional inline label.

{
  "id": "guide-divider-input",
  "type": "DividerInput",
  "title": "Divider",
  "mode": "output",
  "props": {
    "label": "Advanced",
    "variant": "dashed",
    "gap": 8,
    "hidden": false
  }
}

ProgressBarInput (Progress Bar)​

Read-only progress indicator with ratio text, percent badge, and optional custom color.

{
  "id": "guide-progress-bar-input",
  "type": "ProgressBarInput",
  "title": "Data Sync",
  "mode": "output",
  "props": {
    "label": "Sync progress",
    "hint": "Server job",
    "defaultValue": 32,
    "defaultTotal": 100,
    "color": "#22c55e"
  }
}

MultiTextInput (Multi Text Input)​

Stacks several text inputs and returns a nested payload keyed by field ids.

{
  "id": "guide-multi-text-input",
  "type": "MultiTextInput",
  "title": "",
  "mode": "input",
  "props": {
    "gap": "0",
    "items": [
      {
        "id": "host",
        "title": "",
        "placeholder": "db.internal.local",
        "prefixLabel": "Host",
        "prefixLabelSize": "5em"
      },
      {
        "id": "port",
        "title": "",
        "prefixLabel": "Port",
        "prefixLabelSize": "5em",
        "defaultValue": "5432"
      },
      {
        "id": "username",
        "title": "",
        "defaultValue": "service-account",
        "prefixLabel": "User",
        "prefixLabelSize": "5em"
      }
    ]
  }
}

SortableListInput (Sortable List)​

Drag to reorder items; handler can return strings or {value,label}[] to build the list.

{
  "id": "guide-sortable-list",
  "type": "SortableListInput",
  "title": "Steps",
  "mode": "input",
  "props": {
    "placeholder": "Add list options to enable drag handles.",
    "options": [
      {
        "value": "plan",
        "label": "Planning"
      },
      {
        "value": "draft",
        "label": "Draft"
      },
      {
        "value": "review",
        "label": "Review"
      }
    ]
  }
}

WaveformPlaylistInput (Waveform Playlist)​

Upload an audio file to preview its waveform, play it back, and download the current track.

{
  "id": "guide-waveform-playlist",
  "type": "WaveformPlaylistInput",
  "title": "Audio Track",
  "mode": "input",
  "props": {
    "description": "Drop an audio file to visualize and preview the waveform",
    "accept": "audio/*",
    "waveHeight": 120,
    "samplesPerPixel": 512,
    "showControls": true
  }
}