feat(input): add helper and error text

core/src/components/input/input.ios.scss

@@ -6,6 +6,8 @@
   --padding-end: #{$input-ios-padding-end};
   --padding-bottom: #{$input-ios-padding-bottom};
   --padding-start: #{$input-ios-padding-start};
+  --border-width: #{$hairlines-width};
+  --border-color: #{$item-ios-border-color};
 
   font-size: $input-ios-font-size;
 }

core/src/components/input/input.md.scss

@@ -10,6 +10,8 @@
   --padding-end: #{$input-md-padding-end};
   --padding-bottom: #{$input-md-padding-bottom};
   --padding-start: #{$input-md-padding-start};
+  --border-width: 1px;
+  --border-color: #{$item-md-border-color};
 
   font-size: $input-md-font-size;
 }

core/src/components/input/input.scss

@@ -23,10 +23,10 @@
    * @prop --highlight-color-valid: The color of the highlight on the input when valid
    * @prop --highlight-color-invalid: The color of the highlight on the input when invalid
    *
-   * @prop --border-color: Color of the input border
-   * @prop --border-radius: Radius of the input border
-   * @prop --border-style: Style of the input border
-   * @prop --border-width: Width of the input border
+   * @prop --border-color: Color of the border below the input when using helper text, error text, or counter
+   * @prop --border-radius: Radius of the input
+   * @prop --border-style: Color of the border below the input when using helper text, error text, or counter
+   * @prop --border-width: Color of the border below the input when using helper text, error text, or counter
    */
   --placeholder-color: initial;
   --placeholder-font-style: initial;
@@ -38,13 +38,13 @@
   --padding-start: 0;
   --background: transparent;
   --color: initial;
+  --border-style: solid;
+  --highlight-color-focused: #{ion-color(primary, base)};
+  --highlight-color-valid: #{ion-color(success, base)};
+  --highlight-color-invalid: #{ion-color(danger, base)};
 
-  display: flex;
   position: relative;
 
-  flex: 1;
-  align-items: center;
-
   width: 100%;
 
   /* stylelint-disable-next-line all */
@@ -58,6 +58,13 @@
   z-index: $z-index-item-input;
 }
 
+:host(.legacy-input) {
+  display: flex;
+
+  flex: 1;
+  align-items: center;
+}
+
 :host-context(ion-item:not(.item-label)) {
   --padding-start: 0;
 }
@@ -200,3 +207,54 @@
 
   opacity: 1;
 }
+
+// Input Wrapper
+// ----------------------------------------------------------------
+.input-wrapper {
+  display: flex;
+
+  flex-grow: 1;
+
+  align-items: center;
+}
+
+// Input Bottom Content
+// ----------------------------------------------------------------
+
+.input-bottom {
+  @include padding(5px, 0, 0, 0);
+
+  display: flex;
+
+  justify-content: space-between;
+
+  border-top: var(--border-width) var(--border-style) var(--border-color);
+
+  font-size: 12px;
+}
+
+// Input Hint Text
+// ----------------------------------------------------------------
+
+/**
+ * Error text should only be shown when .ion-invalid is
+ * present on the input. Otherwise the helper text should
+ * be shown.
+ */
+.input-bottom .error-text {
+  display: none;
+
+  color: var(--highlight-color-invalid);
+}
+
+.input-bottom .helper-text {
+  display: block;
+}
+
+:host(.ion-invalid) .input-bottom .error-text {
+  display: block;
+}
+
+:host(.ion-invalid) .input-bottom .helper-text {
+  display: none;
+}

core/src/components/input/input.tsx

@@ -512,6 +512,31 @@ export class Input implements ComponentInterface {
     return this.getValue().length > 0;
   }
 
+  /**
+   * Renders the helper text or error text values
+   */
+  private renderHintText() {
+    const { helperText, errorText } = this;
+
+    return [<div class="helper-text">{helperText}</div>, <div class="error-text">{errorText}</div>];
+  }
+
+  /**
+   * Responsible for rendering helper text,
+   * error text, and counter. This element should only
+   * be rendered if hint text is set or counter is enabled.
+   */
+  private renderBottomContent() {
+    const { helperText, errorText } = this;
+
+    const hasHintText = helperText !== undefined || errorText !== undefined;
+    if (!hasHintText) {
+      return;
+    }
+
+    return <div class="input-bottom">{this.renderHintText()}</div>;
+  }
+
   private renderInput() {
     const { disabled, readonly, inputId } = this;
     const mode = getIonMode(this);
@@ -526,57 +551,60 @@ export class Input implements ComponentInterface {
           'has-focus': this.hasFocus,
         })}
       >
-        <label htmlFor={inputId}>{this.label}</label>
-        <input
-          class="native-input"
-          ref={(input) => (this.nativeInput = input)}
-          id={inputId}
-          disabled={disabled}
-          accept={this.accept}
-          autoCapitalize={this.autocapitalize}
-          autoComplete={this.autocomplete}
-          autoCorrect={this.autocorrect}
-          autoFocus={this.autofocus}
-          enterKeyHint={this.enterkeyhint}
-          inputMode={this.inputmode}
-          min={this.min}
-          max={this.max}
-          minLength={this.minlength}
-          maxLength={this.maxlength}
-          multiple={this.multiple}
-          name={this.name}
-          pattern={this.pattern}
-          placeholder={this.placeholder || ''}
-          readOnly={readonly}
-          required={this.required}
-          spellcheck={this.spellcheck}
-          step={this.step}
-          size={this.size}
-          type={this.type}
-          value={value}
-          onInput={this.onInput}
-          onChange={this.onChange}
-          onBlur={this.onBlur}
-          onFocus={this.onFocus}
-          onKeyDown={this.onKeydown}
-          {...this.inheritedAttributes}
-        />
-        {this.clearInput && !readonly && !disabled && (
-          <button
-            aria-label="reset"
-            type="button"
-            class="input-clear-icon"
-            onPointerDown={(ev) => {
-              /**
-               * This prevents mobile browsers from
-               * blurring the input when the clear
-               * button is activated.
-               */
-              ev.preventDefault();
-            }}
-            onClick={this.onClearButtonClick}
+        <div class="input-wrapper">
+          <label htmlFor={inputId}>{this.label}</label>
+          <input
+            class="native-input"
+            ref={(input) => (this.nativeInput = input)}
+            id={inputId}
+            disabled={disabled}
+            accept={this.accept}
+            autoCapitalize={this.autocapitalize}
+            autoComplete={this.autocomplete}
+            autoCorrect={this.autocorrect}
+            autoFocus={this.autofocus}
+            enterKeyHint={this.enterkeyhint}
+            inputMode={this.inputmode}
+            min={this.min}
+            max={this.max}
+            minLength={this.minlength}
+            maxLength={this.maxlength}
+            multiple={this.multiple}
+            name={this.name}
+            pattern={this.pattern}
+            placeholder={this.placeholder || ''}
+            readOnly={readonly}
+            required={this.required}
+            spellcheck={this.spellcheck}
+            step={this.step}
+            size={this.size}
+            type={this.type}
+            value={value}
+            onInput={this.onInput}
+            onChange={this.onChange}
+            onBlur={this.onBlur}
+            onFocus={this.onFocus}
+            onKeyDown={this.onKeydown}
+            {...this.inheritedAttributes}
           />
-        )}
+          {this.clearInput && !readonly && !disabled && (
+            <button
+              aria-label="reset"
+              type="button"
+              class="input-clear-icon"
+              onPointerDown={(ev) => {
+                /**
+                 * This prevents mobile browsers from
+                 * blurring the input when the clear
+                 * button is activated.
+                 */
+                ev.preventDefault();
+              }}
+              onClick={this.onClearButtonClick}
+            />
+          )}
+        </div>
+        {this.renderBottomContent()}
       </Host>
     );
   }
@@ -607,6 +635,7 @@ For inputs that do not have a visible label, developers should use "aria-label"
           [mode]: true,
           'has-value': this.hasValue(),
           'has-focus': this.hasFocus,
+          'legacy-input': true,
         })}
       >
         <input

core/src/components/input/test/bottom-content/index.html

@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Input - Bottom Content</title>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
+    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
+    <script src="../../../../../scripts/testing/scripts.js"></script>
+    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
+    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+    <style>
+      .grid {
+        display: grid;
+        grid-template-columns: repeat(3, minmax(250px, 1fr));
+        grid-row-gap: 20px;
+        grid-column-gap: 20px;
+      }
+      h2 {
+        font-size: 12px;
+        font-weight: normal;
+
+        color: #6f7378;
+
+        margin-top: 10px;
+      }
+      @media screen and (max-width: 800px) {
+        .grid {
+          grid-template-columns: 1fr;
+          padding: 0;
+        }
+      }
+
+      ion-input.custom-error-color {
+        --highlight-color-invalid: purple;
+      }
+    </style>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Input - Basic</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content id="content" class="ion-padding">
+        <div class="grid">
+          <div class="grid-item">
+            <h2>No Hint</h2>
+            <ion-input label="Email"></ion-input>
+          </div>
+
+          <div class="grid-item">
+            <h2>Helper Hint</h2>
+            <ion-input label="Email" helper-text="Enter your email"></ion-input>
+          </div>
+
+          <div class="grid-item">
+            <h2>Error Hint</h2>
+            <ion-input class="ion-invalid" label="Email" error-text="Please enter a valid email"></ion-input>
+          </div>
+
+          <div class="grid-item">
+            <h2>Custom Error Color</h2>
+            <ion-input
+              class="ion-invalid custom-error-color"
+              label="Email"
+              error-text="Please enter a valid email"
+            ></ion-input>
+          </div>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>