Dial

The Dial system turns a flat array of control descriptors — the schemas — into a rendered panel of typed inputs. Each schema has a name and a dtype; the dtype decides which input is drawn (a slider, a color picker, a vector3 field, a button, and so on). You write the data shape, not the widgets.

Two pieces work together:

• DialProvider owns the values. It holds state, exposes getValue / setValue through context, and supports both controlled and uncontrolled modes. Inputs read and write through it — they never talk to each other directly.
• DialPanel reads the same schemas and renders the matching inputs, optionally arranging them into groups.

Controlled value flow

In controlled mode you pass values and an onValueChange callback to DialProvider. Every edit fires onValueChange(name, value) and you store the result yourself, feeding it back through values — exactly like a controlled <input>, but for the whole panel. Omit values to run the panel uncontrolled, where the provider keeps its own internal state seeded from each schema's value (or initialValues).

The example below covers several dtypes and mirrors the live values as JSON.

{
  "opacity": 0.75,
  "segments": 12,
  "wireframe": false,
  "tint": "3b82f6",
  "position": [
    0,
    1,
    0
  ],
  "label": "camera_main"
}

Grouping

Tag any schema with grouping to file it under a section header. Pass a matching groups config to DialPanel to control each section's layout — grid column count, flex wrapping, and so on. A group named transform always sorts first; the rest follow alphabetically.

{
  "position": [
    0,
    0,
    0
  ],
  "rotation": [
    0,
    0,
    0
  ],
  "scale": 1,
  "color": "f59e0b",
  "metalness": 0.2,
  "roughness": 0.8
}

DialProvider props

DialPanel props

DialSchema fields

Every control is one DialSchema. The most commonly used fields:

Supported dtype values