Skip to content
GolemUI

Include & Exclude

Use include to render a widget only when a named state is active; use exclude to render it only when it is not active.

import { gui } from '@golemui/gui-shared';


const states = {
  hasDiscount: '$form.hasDiscountCode === true',
};


const formDef = [
  gui.inputs.booleanInput('hasDiscountCode', { label: 'I have a discount code' }),
  gui.inputs.textInput('discountCode', {
    label: 'Discount code',
    include: { in: ['hasDiscount'] },
  }),
];

The discount-code input only renders when $form.hasDiscountCode === true.

Active-state lists vs reactive when

Section titled “Active-state lists vs reactive when”

Both include and exclude accept either a list of state names or a one-off reactive expression:

include: { in: ['hasDiscount'] }       // active-state list
include: { when: '$form.age >= 18' }   // ad-hoc expression

Use named states when the same condition appears in multiple places. Use when for one-shot conditions (see Inline when).

See also

Section titled “See also”