• Controls Panel

    index
    3
    status
    Draft

    The controls panel is automatically generated based on the props definition for a given Workbench. It gives learners a way to explore and manipulate interactive values — and provides authors with simple yet flexible tools to shape that experience.

    How controls are generated

    Only props marked with configurable: true will appear in the controls panel. Derived props may be shown but will be disabled to prevent editing. Static or internal props are omitted entirely.

    Workbench creates controls dynamically based on each prop’s type, value, and related metadata. Controls are bound bidirectionally to prop values unless the prop is derived or disabled.

    Control types and default widgets

    By default, each prop type renders with a sensible control:

    • "number" – range slider (respects min, max)
    • "string" – radio group (if options array is provided), or text input
    • "boolean" – checkbox

    Authors can override defaults by providing additional config, or suppress display elements like labels or units for clarity.

    • If a prop has both configurable and playable, it will show a control that pauses animation when used.

    Enums and radio groups

    String props can behave like enums by specifying a list of options:

    displayMode: {
  type: "string",
  value: "flat",
  options: [
    {
      value: "flat",
      label: "Flat",
    },
    {
      value: "pressed",
      label: "Pressed",
    },
    {
      value: "outline",
      label: "Outline",
    },
  ],
  configurable: true,
}

    Workbench will automatically render a radio group for props with options.

    Layout and display behavior

    Authors may flag props as secondary: true to move them into a secondary panel section, typically used for checkboxes or less prominent controls.

    Each control may also include:

    • label: custom display label
    • help: optional short description or tooltip string
    • showValue, showUnit: for number types, toggles inline display of value and/or unit
    • unitDisplay: display name for the unit (can differ from internal string)

    Smart defaults and override behavior

    Workbench tries to provide useful defaults, but authors have full control over:

    • Which props are shown
    • How props are labeled
    • Which props are grouped or emphasized

    In v1, grouping and heading affordances are not supported, but may be added in future versions.