salla-conditional-fields

A wrapper that shows or hides parts of a form depending on the value of another field, used for conditional product options. Put data-show-when="<field name>=<value>" (or !=) on an element: it is shown when the field with that name has that value and hidden otherwise. Triggers can be a select, radio, checkbox group or text input/textarea (for a text input, the value true matches any non-empty text; text input changes are debounced by 300ms). Hiding adds the hidden class (the theme must style it) and also disables the inputs inside, clears their values and removes required. Showing removes the class and enables the inputs again, and makes them required only if the closest .s-product-options-option element has data-option-required="true". Conditions on names like options[<id>] also hide nested conditions (elements whose data-option-id is that id). It dispatches the salla-onditional-fields::change Salla event on every change or input event it hears.

Use itCopy Anchor Link

In HTML or JSX, use the tag <salla-conditional-fields> with the Attribute names below. In React, the wrapper takes the Property names (camelCase).

import { SallaConditionalFields } from '@salla.sa/twilight-components-react/conditional-fields';

Client-only. On the server this wrapper renders a placeholder (a skeleton, or nothing), and the real component mounts in the browser. Do not rely on it for content that search engines must see.

ExampleCopy Anchor Link

import { SallaConditionalFields } from '@salla.sa/twilight-components-react/conditional-fields';

export function Example() {
  return (
    <SallaConditionalFields>
      <select name="options[1]">
        <option value="">Choose</option>
        <option value="10">Gift wrap</option>
      </select>
      <div className="s-product-options-option hidden" data-option-id="2" data-option-required="true" data-show-when="options[1]=10">
        <input type="text" name="options[2]" />
      </div>
    </SallaConditionalFields>
  );
}

SlotsCopy Anchor Link

RelatedCopy Anchor Link

Used inside: <salla-product-options>.