Method render

core/src/components/checkbox/checkbox.tsx:322–407

()

  }

  render() {
    const {
      color,
      checked,
      disabled,
      el,
      getSVGPath,
      indeterminate,
      inheritedAttributes,
      inputId,
      justify,
      labelPlacement,
      name,
      value,
      alignment,
      required,
    } = this;
    const mode = getIonMode(this);
    const path = getSVGPath(mode, indeterminate);

    renderHiddenInput(true, el, name, checked ? value : '', disabled);

    // The host element must have a checkbox role to ensure proper VoiceOver
    // support in Safari for accessibility.
    return (
      <Host
        role="checkbox"
        aria-checked={indeterminate ? 'mixed' : `${checked}`}
        aria-describedby={this.hintTextId}
        aria-invalid={this.isInvalid ? 'true' : undefined}
        aria-labelledby={this.hasLabelContent ? this.inputLabelId : null}
        aria-label={inheritedAttributes['aria-label'] || null}
        aria-disabled={disabled ? 'true' : null}
        aria-required={required ? 'true' : undefined}
        tabindex={disabled ? undefined : 0}
        onKeyDown={this.onKeyDown}
        onFocus={this.onFocus}
        onBlur={this.onBlur}
        onClick={this.onClick}
        class={createColorClasses(color, {
          [mode]: true,
          'in-item': hostContext('ion-item', el),
          'checkbox-checked': checked,
          'checkbox-disabled': disabled,
          'checkbox-indeterminate': indeterminate,
          interactive: true,
          [`checkbox-justify-${justify}`]: justify !== undefined,
          [`checkbox-alignment-${alignment}`]: alignment !== undefined,
          [`checkbox-label-placement-${labelPlacement}`]: true,
        })}
      >
        <label class="checkbox-wrapper" htmlFor={inputId}>
          {/*
            The native control must be rendered
            before the visible label text due to https://bugs.webkit.org/show_bug.cgi?id=251951
          */}
          <input
            type="checkbox"