Class Input

core/src/components/input/input.tsx:46–972

  scoped: true,
})
export class Input implements ComponentInterface {
  private nativeInput?: HTMLInputElement;
  private inputId = `ion-input-${inputIds++}`;
  private helperTextId = `${this.inputId}-helper-text`;
  private errorTextId = `${this.inputId}-error-text`;
  private labelTextId = `${this.inputId}-label`;
  private inheritedAttributes: Attributes = {};
  private isComposing = false;
  private slotMutationController?: SlotMutationController;
  private notchController?: NotchController;
  private notchSpacerEl: HTMLElement | undefined;

  private originalIonInput?: EventEmitter<InputInputEventDetail>;

  /**
   * `true` if the input was cleared as a result of the user typing
   * with `clearOnEdit` enabled.
   *
   * Resets when the input loses focus.
   */
  private didInputClearOnEdit = false;

  /**
   * The value of the input when the input is focused.
   */
  private focusedValue?: string | number | null;

  /**
   * The `hasFocus` state ensures the focus class is
   * added regardless of how the element is focused.
   * The `ion-focused` class only applies when focused
   * via tabbing, not by clicking.
   * The `has-focus` logic was added to ensure the class
   * is applied in both cases.
   */
  @State() hasFocus = false;

  /**
   * Track validation state for proper aria-live announcements
   */
  @State() isInvalid = false;

  @Element() el!: HTMLIonInputElement;

  private validationObserver?: MutationObserver;

  /**
   * The color to use from your application's color palette.
   * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
   * For more information on colors, see [theming](/docs/theming/basics).
   */
  @Prop({ reflect: true }) color?: Color;

  /**
   * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.
   * Available options: `"off"`, `"none"`, `"on"`, `"sentences"`, `"words"`, `"characters"`.
   */
  @Prop() autocapitalize = 'off';