onFormDisabled

Runs when the element becomes disabled or enabled, either through its own disabled attribute or a surrounding <fieldset disabled>. For components defined with form-associated.

onFormDisabled(fn: (disabled: boolean) => void): void
onFormDisabled((disabled) => {
  refs.control.tabIndex = disabled ? -1 : 0;
});

Parameters

Parameter Type Meaning
fn (disabled: boolean) => void Runs from the element's formDisabledCallback with the new state

You often do not need it. With a disabled prop, props.disabled already reads true while a fieldset disables the element, and the component starts disabled when it is created inside one.

Example

Previewindex.htmldisable-aware.html

I am .
Fieldset
Toggle fieldset disabled 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>onFormDisabled demo</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@realmorg/realm@alpha/dist/realm.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@realmorg/ui@alpha/dist/theme.css">
  <script type="module" src="https://cdn.jsdelivr.net/npm/@realmorg/realm@alpha/dist/realm.js"></script>
</head>
<body>
  <import-element from="https://cdn.jsdelivr.net/npm/@realmorg/ui@alpha/components/button.html"></import-element>

  <import-element from="./disable-aware.html"></import-element>

  <fieldset id="disable-set">
    <legend>Fieldset</legend>
    <disable-aware></disable-aware>
  </fieldset>
  <ui-button variant="outline" onclick="document.getElementById('disable-set').toggleAttribute('disabled')">Toggle fieldset disabled</ui-button>
</body>
</html>
<custom-element name="disable-aware" form-associated>
  <script>
    const status = useState({ text: "enabled" });

    onFormDisabled((disabled) => {
      status.text = disabled ? "disabled" : "enabled";
    });
  </script>

  <p>I am <slot name="#status.text"></slot>.</p>
</custom-element>

Edit this page on GitHub · View as Markdown