hy-checkbox.tsx

import {Component, Host, h, Prop} from '@stencil/core';

@Component({
  tag: 'hy-checkbox',
  styleUrl: 'hy-checkbox.scss',
  shadow: false,
})
export class HyCheckbox {
  @Prop() checkboxId: string | number;
  @Prop() checkboxValue: string | number;
  @Prop() checkboxLabel: string;
  render() {
    return (
      <Host class="hy-checkbox">
        <input
          type="checkbox"
          class="hy-checkbox__checkbox"
          id={`${this.checkboxId}`}
          value={`${this.checkboxValue}`}
        />
        <label class="hy-checkbox__label" htmlFor={`${this.checkboxId}`}>
          <span class="hy-checkbox__checkmark">
            <hy-icon class="hy-checkbox__label-icon" icon={'hy-icon-done'} size={23} aria-hidden="true" />
          </span>
          {this.checkboxLabel}
        </label>
      </Host>
    );
  }
}