HoopsSwitchElement

class ui.hoopsSwitch.HoopsSwitchElement()

A switch component.

Examples

<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>

Custom Element

hoops-switch

Attributes

checked

The switch state

disabled

Whether or not the switch is disabled

label

The switch label

Events

change

Emitted when the switch state changes

CSS Properties

–hoops-accent-foreground-active

The color of the switch when checked

Since

2025.7.0

Index

Constructors

Properties

Constructors

ui.hoopsSwitch.HoopsSwitchElement.constructor()
HoopsSwitchElement(): HoopsSwitchElement

Returns: HoopsSwitchElement

Properties

ui.hoopsSwitch.HoopsSwitchElement.checked
checked: boolean
ui.hoopsSwitch.HoopsSwitchElement.disabled
disabled: boolean
ui.hoopsSwitch.HoopsSwitchElement.label
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.