Switch

Use cases:

• Toggling visibility of a UI section
• Disabling & enabling features

Example

Switch:

Genesis

Declaration

<rapid-switch></rapid-switch>

Usage

@customElement({
  name: 'my-element',
  template: html`
    <rapid-switch
      @change=${(x, ctx) => x.switchChanged(ctx.event)}>
      Theme
      <span slot="checked-message">Dark</span>
      <span slot="unchecked-message">Light</span>
    </rapid-switch>
  `,
})
export class MyElement extends GenesisElement {
    switchChanged(e: Event) {
        console.log('switch changed', (e.target as HTMLInputElement).checked)
    }
}

React

Declaration

<rapid-switch></rapid-switch>

Usage

export function MyComponent() {

  const [switchValue, setSwitchValue] = useState(false);

  const handleSwitchChange = (event) => {
    const target = event.target as HTMLInputElement;
    console.log(target.value);
    setSwitchValue(target.value);
  };

  return (
    <rapid-switch onChange={handleSwitchChange}>
      <span slot="checked-message">Dark</span>
      <span slot="unchecked-message">Light</span>
    </rapid-switch>
  );
}

Angular

Declaration

<rapid-switch></rapid-switch>

Usage

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
@Component({
  selector: 'my-root',
  template: `
    <rapid-switch
      (change)="handleSwitchChanged($event)"
    >
        <span slot="checked-message">Dark</span>
        <span slot="unchecked-message">Light</span>
    </rapid-switch>
  `,
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppComponent {

    switchValue: boolean;

    handleSwitchChanged(event: Event) {
        const target = event.target as HTMLInputElement;
        console.log('switch changed', target.checked);
        this.switchValue = target.checked;
    }
}

API

Property and attribute binding examples for Genesis Component syntax (closing tag omitted).

Name	Type	Description	Example
checked	boolean	Sets or retrieves the current state of the component. Default: false	<rapid-switch ?checked=${sync(x => x.isSelected, 'boolean')}>
readonly	boolean	Configures the component so the user cannot alter the state via the web browser.	<rapid-switch readonly>
disabled	boolean	Same functionality as readonly, and additionally greys out the component.	<rapid-switch disabled>
form	string	Associates this component to a form. Form id needs to be passed. If no Id informed, then it will be associated with the ancestor form.	<rapid-switch form="myForm">

Slots

Slot	Use
switch	The control element.

Parts

Part	Description
label	The label text.
checked-indicator	The checked indicator.
checked-message	The text label when the switch is selected.
switch	The input control.
unchecked-message	The text label when the switch is not selected.

Events fired

Name	Description
change	Fires the event when the radio component changes its state

Events fired

Event	Type	Use	Example
change	event	Emits a custom change event when the component state changes. Access the value on the event via .target.checked.	<rapid-switch @change="${(x) => x.myChangeHandler(event)}">

Events listened to

This component doesn't listen to any events.

Further details

This component is an implementation of an HTML switch element.