# salla-conditional-fields (https://docs.salla.dev/twilight/react/web-components/salla-conditional-fields)



{/* Generated by scripts/sync-web-components.mjs from the components docs.json. Do not edit by hand. */}

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 it [#use-it]

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

```tsx
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.

## Example [#example]

```tsx
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>
  );
}
```

```html
<salla-conditional-fields>
  <select name="options[1]">
    <option value="">Choose</option>
    <option value="10">Gift wrap</option>
  </select>
  <div class="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>
</salla-conditional-fields>
```

## Slots [#slots]

| Slot      | Description                                                   |
| --------- | ------------------------------------------------------------- |
| (default) | The form fields and the elements that carry `data-show-when`. |

## Related [#related]

Used inside: [`<salla-product-options>`](https://docs.salla.dev/twilight/react/web-components/salla-product-options).