
##################
HoopsSwitchElement
##################

.. js:class:: ui.hoopsSwitch.HoopsSwitchElement

   A switch component.
   
   .. rubric:: Examples
   
   
   .. code-block:: html
   
      <hoops-switch checked label="Enable feature"></hoops-switch>
      <hoops-switch disabled label="Disabled option"></hoops-switch>
      
      <script>
        const switchElement = document.getElementsByTagName("hoops-switch")[0];
        switchElement.addEventListener('change', (event) => {
          console.log('Switch state:', switchElement.checked);
        });
      </script>
   
   .. rubric:: Custom Element
   
   
   ``hoops-switch``
   
   .. rubric:: Attributes
   
   
   **checked**
   
   
      The switch state
   
   
   **disabled**
   
   
      Whether or not the switch is disabled
   
   
   **label**
   
   
      The switch label
   
   
   .. rubric:: Events
   
   
   **change**
   
   
      Emitted when the switch state changes
   
   
   .. rubric:: CSS Properties
   
   
   **--hoops-accent-foreground-active**
   
   
      The color of the switch when checked
   
   
   .. rubric:: Since
   
   
   ``2025.7.0``
   
   
   Index
   =====
   
   .. rubric:: Constructors
   
   
   .. rst-class:: api-xref-list
   
   
   * :js:func:`~ui.hoopsSwitch.HoopsSwitchElement.constructor`
   
   .. rubric:: Properties
   
   
   .. rst-class:: api-xref-list
   
   
   * :js:data:`~ui.hoopsSwitch.HoopsSwitchElement.checked`
   * :js:data:`~ui.hoopsSwitch.HoopsSwitchElement.disabled`
   * :js:data:`~ui.hoopsSwitch.HoopsSwitchElement.label`
   
   



.. rst-class:: kind-group kind-constructors

.. rubric:: Constructors
   :class: kind-group-title


.. js:method:: ui.hoopsSwitch.HoopsSwitchElement.constructor

      .. rst-class:: sig-pretty-signature
      
         | HoopsSwitchElement(): :js:class:`HoopsSwitchElement <ui.hoopsSwitch.HoopsSwitchElement>`
      
      **Returns**\ : :js:class:`HoopsSwitchElement <ui.hoopsSwitch.HoopsSwitchElement>`
      



.. rst-class:: kind-group kind-properties

.. rubric:: Properties
   :class: kind-group-title


.. js:data:: ui.hoopsSwitch.HoopsSwitchElement.checked

      .. rst-class:: sig-pretty-signature
      
         | checked: *boolean*
      



.. js:data:: ui.hoopsSwitch.HoopsSwitchElement.disabled

      .. rst-class:: sig-pretty-signature
      
         | disabled: *boolean*
      



.. js:data:: ui.hoopsSwitch.HoopsSwitchElement.label

      .. rst-class:: sig-pretty-signature
      
         | label: *string*
      
      The label will appear as a tooltip when hovering over the switch (using title attribute). It will also be used as the aria-label for accessibility.
      




