# Reference


<table class="ui-table --variant-1 my-4">
  <colgroup>
    <col style="width: 130px;">
    <col>
    <col>
  </colgroup>
  <tbody>
    <thead>
      <tr>
        <th colspan="2">Update The Dom</th>
        <th>Use With</th>
      </tr>
    </thead>
    <tr>
      <td style="width: 150px;">
        <span class="font-bold">ui-text</span>
      </td>
      <td>
        Sets the inner text of an element
      </td>
      <td>
        &lt;div&gt;, &lt;span&gt;, &lt;p&gt;, etc.
      </td>
    </tr>
    <tr>
      <td>
        <span class="font-bold">ui-value</span>
      </td>
      <td>
        Sets the value of a form input or textarea
      </td>
      <td>
        &lt;input&gt;, &lt;select&gt;, &lt;textarea&gt;, etc.
      </td>
    </tr>
    <tr>
      <td>
        <span class="font-bold">ui-checked</span>
      </td>
      <td>
        Sets a checkbox or radio button state
      </td>
      <td>
        &lt;input type="checkbox"&gt;,<br> &lt;input type="radio"&gt;
      </td>
    </tr>
    <tr>
      <td>
        <span class="font-bold">ui-disabled</span>
      </td>
      <td>
        Sets the disabled state of a form input
      </td>
      <td>
        &lt;input&gt;, &lt;select&gt;, &lt;textarea&gt;, etc.
      </td>
    </tr>
    <tr>
      <td>
        <span class="font-bold">ui-placeholder</span>
      </td>
      <td>
        Sets the placeholder of a form input
      </td>
      <td>
        &lt;input&gt;, &lt;textarea&gt;
      </td>
    </tr>
    <tr>
      <td>
        <span class="font-bold">ui-class</span>
      </td>
      <td>
        Sets the class of an element
      </td>
      <td>
        &lt;div&gt;, &lt;span&gt;, &lt;p&gt;, etc.
      </td>
    </tr>
    <tr>
      <td>
        <span class="font-bold">ui-src</span>
      </td>
      <td>
        Sets the src of an image, video, or iframe.
      </td>
      <td>
        &lt;img&gt;, &lt;video&gt;, &lt;iframe&gt;
      </td>
    </tr>
    <tr>
      <td>
        <span class="font-bold">ui-href</span>
      </td>
      <td>
        Sets the href of a link.
      </td>
      <td>
        &lt;a&gt;
      </td>
    </tr>
    <tr>
      <td>
        <span class="font-bold">ui-style</span>
      </td>
      <td>
        Sets the style of an element
      </td>
      <td>
        Any element.
      </td>
    </tr>
    <tr>
      <td>
        <span class="font-bold">ui-hidden</span>
      </td>
      <td>
        Sets the hidden state of an element
      </td>
      <td>
        Any element.
      </td>
    </tr>
    <tr>
      <td>
        <span class="font-bold">ui-data-[key]</span>
      </td>
      <td>
        Set a data attribute
      </td>
      <td>
        &lt;div&gt;, &lt;span&gt;, &lt;p&gt;, etc.
      </td>
    </tr>
    <tr>
      <td>
        <span class="font-bold">ui-aria-[key]</span>
      </td>
      <td>
        Set an aria attribute
      </td>
      <td>
        &lt;div&gt;, &lt;span&gt;, &lt;p&gt;, etc.
      </td>
    </tr>
    <tr>
      <td>
        <span class="font-bold">ui-[key]</span>
      </td>
      <td>
        Set any attribute
      </td>
      <td>
        Any element you like
      </td>
    </tr>
  </tbody>
</table>


<table class="ui-table --variant-1 my-4">
  <colgroup>
    <col style="width: 130px;">
    <col>
  </colgroup>
  <tbody>
    <thead>
      <tr>
        <th colspan="2">Respond To User Interaction</th>
      </tr>
    </thead>
    <tr>
      <td>
        <span class="font-bold">ui-change</span>
      </td>
      <td>
        Use on form elements to listen for changes in their value.
      </td>
    </tr>
    <tr>
      <td>
        <span class="font-bold">ui-click</span>
      </td>
      <td>
        Triggered when the element is clicked. 
      </td>
    </tr>
    <tr>
      <td>
        <span class="font-bold">ui-clickme</span>
      </td>
      <td>
        Triggered when the element is clicked, but not if the click is on a child element.
      </td>
    </tr>
    <tr>
      <td>
        <span class="font-bold">ui-clickout</span>
      </td>
      <td>
        Triggered when a click happens outside of the element.
      </td>
    </tr>
    <tr>
      <td>
        <span class="font-bold">ui-focus</span>
      </td>
      <td>
        Triggered when an input or textarea is focused.
      </td>
    </tr>
    <tr>
      <td>
        <span class="font-bold">ui-blur</span>
      </td>
      <td>
        Triggered when an input or textarea is blurred.
      </td>
    </tr>
    <tr>
      <td>
        <span class="font-bold">ui-submit</span>
      </td>
      <td>
        Add to form elements to listen for form submission.
      </td>
    </tr>
    <tr>
      <td>
        <span class="font-bold">ui-mouseenter</span>
      </td>
      <td>
        Triggered when the mouse hovers over the element.
      </td>
    </tr>
    <tr>
      <td>
        <span class="font-bold">ui-mouseleave</span>
      </td>
      <td>
        Triggered when the mouse stops hovering over the element.
      </td>
    </tr>
    <tr>
      <td>
        <span class="font-bold">ui-touchstart</span>
      </td>
      <td>
        Triggered when a touch starts on the element (mobile only).
      </td>
    </tr>
    <tr>
      <td>
        <span class="font-bold">ui-touchend</span>
      </td>
      <td>
        Triggered when a touch ends on the element (mobile only).
      </td>
    </tr>
    <tr>
      <td>
        <span class="font-bold">ui-dragstart</span>
      </td>
      <td>
        Triggered when a drag starts on the element.
      </td>
    </tr>
    <tr>
      <td>
        <span class="font-bold">ui-dragend</span>
      </td>
      <td>
        Triggered when a drag ends on the element.
      </td>
    </tr>
    <tr>
      <td>
        <span class="font-bold">ui-press</span>
      </td>
      <td>
        Triggered on either A. Click, B. Touch, or C. Pressing the Enter key.
      </td>
    </tr>
  </tbody>
</table>

<br>
<br>
<br>