Skip to content
GolemUI

Item Renderers

Some widgets render a list of items — dropdown, list, radiogroup, and similar. By default, each item is rendered as a label/value pair. Item renderers let you supply a richer template (e.g. a country flag next to its label, a product card with a thumbnail and a price).

Item renderers live in formConfig.itemRenderers, keyed by a name you reference from the widget’s itemRenderer prop.

Wiring an item renderer

Section titled “Wiring an item renderer”
import { gui } from '@golemui/gui-shared';


const formDef = [
  gui.inputs.dropdown('country', {
    items: [
      { id: 'US', flag: '🇺🇸', label: 'United States' },
      { id: 'CA', flag: '🇨🇦', label: 'Canada' },
    ],
    labelField: 'label',
    valueField: 'id',
    itemRenderer: 'countryItemRenderer', // <- name of the renderer
  }),
];


const formConfig = {
  itemRenderers: {
    countryItemRenderer: CountryItemRenderer, // <- framework component
  },
};

The shape of CountryItemRenderer is framework-specific — see Extending GolemUI / Item Renderers for the implementation contract.

See also

Section titled “See also”