.. role:: clio-optional
   :class: clio-flag clio-flag-optional


###############
HoopsTabElement
###############

.. js:class:: ui.tabs.HoopsTabElement

   A single tab panel component to be used within ``hoops-tabs``\ .
   
   This component represents a single tab with its label and content. It should always be used as a child of ``hoops-tabs``\ .
   
   .. rubric:: Examples
   
   
   .. code-block:: html
   
      <hoops-tab label="Settings" value="settings">
        <div>Settings content here</div>
      </hoops-tab>
   
   .. rubric:: Custom Element
   
   
   ``hoops-tab``
   
   .. rubric:: Attributes
   
   
   **label**
   
   
      The label text displayed in the tab header
   
   
   **value**
   
   
      Optional value identifier for the tab
   
   
   **icon**
   
   
      Optional icon to display in the tab header
   
   
   **disabled**
   
   
      Whether the tab is disabled
   
   
   .. rubric:: Slots
   
   
   **- Default slot for the tab panel content**
   
   .. rubric:: Since
   
   
   ``2026.1.0``
   
   
   Index
   =====
   
   .. rubric:: Constructors
   
   
   .. rst-class:: api-xref-list
   
   
   * :js:func:`~ui.tabs.HoopsTabElement.constructor`
   
   .. rubric:: Properties
   
   
   .. rst-class:: api-xref-list
   
   
   * :js:data:`~ui.tabs.HoopsTabElement.disabled`
   * :js:data:`~ui.tabs.HoopsTabElement.label`
   * :js:data:`~ui.tabs.HoopsTabElement.icon`
   * :js:data:`~ui.tabs.HoopsTabElement.value`
   
   



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

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


.. js:method:: ui.tabs.HoopsTabElement.constructor

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



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

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


.. js:data:: ui.tabs.HoopsTabElement.disabled

      .. rst-class:: sig-pretty-signature
      
         | disabled: *boolean*
      
      Whether the tab is disabled and cannot be selected.
      
      .. rubric:: Default
      
      
      `````ts
      false
      `````
      



.. js:data:: ui.tabs.HoopsTabElement.label

      .. rst-class:: sig-pretty-signature
      
         | label: *string*
      
      The label text displayed in the tab header.
      
      .. rubric:: Default
      
      
      `````ts
      ''
      `````
      



.. js:data:: ui.tabs.HoopsTabElement.icon

      .. rst-class:: clio-flags
      
         :clio-optional:`optional`
      
      .. rst-class:: sig-pretty-signature
      
         | icon: *string*
      
      Optional icon to display before the label in the tab header.
      
      .. rubric:: Default
      
      
      `````ts
      undefined
      `````
      



.. js:data:: ui.tabs.HoopsTabElement.value

      .. rst-class:: clio-flags
      
         :clio-optional:`optional`
      
      .. rst-class:: sig-pretty-signature
      
         | value: *string*
      
      Optional value identifier for the tab. Can be used with ``selectByValue()`` on the parent ``hoops-tabs``\ .
      
      .. rubric:: Default
      
      
      `````ts
      undefined
      `````
      




