diff --git a/angular/src/directives/proxies.ts b/angular/src/directives/proxies.ts
index c72ceeb3a28..97c1ef3c149 100644
--- a/angular/src/directives/proxies.ts
+++ b/angular/src/directives/proxies.ts
@@ -856,14 +856,14 @@ where the user's interaction is typing.
@ProxyCmp({
defineCustomElementFn: undefined,
- inputs: ['accept', 'autocapitalize', 'autocomplete', 'autocorrect', 'autofocus', 'clearInput', 'clearOnEdit', 'color', 'debounce', 'disabled', 'enterkeyhint', 'inputmode', 'max', 'maxlength', 'min', 'minlength', 'mode', 'multiple', 'name', 'pattern', 'placeholder', 'readonly', 'required', 'size', 'spellcheck', 'step', 'type', 'value'],
+ inputs: ['accept', 'autocapitalize', 'autocomplete', 'autocorrect', 'autofocus', 'clearInput', 'clearOnEdit', 'color', 'counter', 'counterFormatter', 'debounce', 'disabled', 'enterkeyhint', 'errorText', 'fill', 'helperText', 'inputmode', 'label', 'labelPlacement', 'max', 'maxlength', 'min', 'minlength', 'mode', 'multiple', 'name', 'pattern', 'placeholder', 'readonly', 'required', 'shape', 'size', 'spellcheck', 'step', 'type', 'value'],
methods: ['setFocus', 'getInputElement']
})
@Component({
selector: 'ion-input',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '',
- inputs: ['accept', 'autocapitalize', 'autocomplete', 'autocorrect', 'autofocus', 'clearInput', 'clearOnEdit', 'color', 'debounce', 'disabled', 'enterkeyhint', 'inputmode', 'max', 'maxlength', 'min', 'minlength', 'mode', 'multiple', 'name', 'pattern', 'placeholder', 'readonly', 'required', 'size', 'spellcheck', 'step', 'type', 'value']
+ inputs: ['accept', 'autocapitalize', 'autocomplete', 'autocorrect', 'autofocus', 'clearInput', 'clearOnEdit', 'color', 'counter', 'counterFormatter', 'debounce', 'disabled', 'enterkeyhint', 'errorText', 'fill', 'helperText', 'inputmode', 'label', 'labelPlacement', 'max', 'maxlength', 'min', 'minlength', 'mode', 'multiple', 'name', 'pattern', 'placeholder', 'readonly', 'required', 'shape', 'size', 'spellcheck', 'step', 'type', 'value']
})
export class IonInput {
protected el: HTMLElement;
diff --git a/core/api.txt b/core/api.txt
index 17fd18ae3c6..64229865812 100644
--- a/core/api.txt
+++ b/core/api.txt
@@ -527,10 +527,17 @@ ion-input,prop,autofocus,boolean,false,false,false
ion-input,prop,clearInput,boolean,false,false,false
ion-input,prop,clearOnEdit,boolean | undefined,undefined,false,false
ion-input,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record | undefined,undefined,false,true
+ion-input,prop,counter,boolean,false,false,false
+ion-input,prop,counterFormatter,((inputLength: number, maxLength: number) => string) | undefined,undefined,false,false
ion-input,prop,debounce,number,0,false,false
ion-input,prop,disabled,boolean,false,false,false
ion-input,prop,enterkeyhint,"done" | "enter" | "go" | "next" | "previous" | "search" | "send" | undefined,undefined,false,false
+ion-input,prop,errorText,string | undefined,undefined,false,false
+ion-input,prop,fill,"outline" | "solid" | undefined,undefined,false,false
+ion-input,prop,helperText,string | undefined,undefined,false,false
ion-input,prop,inputmode,"decimal" | "email" | "none" | "numeric" | "search" | "tel" | "text" | "url" | undefined,undefined,false,false
+ion-input,prop,label,string | undefined,undefined,false,false
+ion-input,prop,labelPlacement,"end" | "fixed" | "floating" | "stacked" | "start",'start',false,false
ion-input,prop,max,number | string | undefined,undefined,false,false
ion-input,prop,maxlength,number | undefined,undefined,false,false
ion-input,prop,min,number | string | undefined,undefined,false,false
@@ -542,6 +549,7 @@ ion-input,prop,pattern,string | undefined,undefined,false,false
ion-input,prop,placeholder,string | undefined,undefined,false,false
ion-input,prop,readonly,boolean,false,false,false
ion-input,prop,required,boolean,false,false,false
+ion-input,prop,shape,"round" | undefined,undefined,false,false
ion-input,prop,size,number | undefined,undefined,false,false
ion-input,prop,spellcheck,boolean,false,false,false
ion-input,prop,step,string | undefined,undefined,false,false
@@ -554,7 +562,14 @@ ion-input,event,ionChange,InputChangeEventDetail,true
ion-input,event,ionFocus,FocusEvent,true
ion-input,event,ionInput,Event | InputEvent,true
ion-input,css-prop,--background
+ion-input,css-prop,--border-color
+ion-input,css-prop,--border-radius
+ion-input,css-prop,--border-style
+ion-input,css-prop,--border-width
ion-input,css-prop,--color
+ion-input,css-prop,--highlight-color-focused
+ion-input,css-prop,--highlight-color-invalid
+ion-input,css-prop,--highlight-color-valid
ion-input,css-prop,--padding-bottom
ion-input,css-prop,--padding-end
ion-input,css-prop,--padding-start
diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index 27d3d7405e3..4b5a222fc83 100644
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -1073,6 +1073,14 @@ export namespace Components {
* 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).
*/
"color"?: Color;
+ /**
+ * If `true`, a character counter will display the ratio of characters used and the total character limit. Developers must also set the `maxlength` property for the counter to be calculated correctly.
+ */
+ "counter": boolean;
+ /**
+ * A callback used to format the counter text. By default the counter text is set to "itemLength / maxLength".
+ */
+ "counterFormatter"?: (inputLength: number, maxLength: number) => string;
/**
* Set the amount of time, in milliseconds, to wait to trigger the `ionInput` event after each keystroke.
*/
@@ -1085,14 +1093,34 @@ export namespace Components {
* A hint to the browser for which enter key to display. Possible values: `"enter"`, `"done"`, `"go"`, `"next"`, `"previous"`, `"search"`, and `"send"`.
*/
"enterkeyhint"?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
+ /**
+ * Text that is placed under the input and displayed when an error is detected.
+ */
+ "errorText"?: string;
+ /**
+ * The fill for the item. If `'solid'` the item will have a background. If `'outline'` the item will be transparent with a border. Only available in `md` mode.
+ */
+ "fill"?: 'outline' | 'solid';
/**
* Returns the native `` element used under the hood.
*/
"getInputElement": () => Promise;
+ /**
+ * Text that is placed under the input and displayed when no error is detected.
+ */
+ "helperText"?: string;
/**
* A hint to the browser for which keyboard to display. Possible values: `"none"`, `"text"`, `"tel"`, `"url"`, `"email"`, `"numeric"`, `"decimal"`, and `"search"`.
*/
"inputmode"?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
+ /**
+ * The visible label associated with the input.
+ */
+ "label"?: string;
+ /**
+ * Where to place the label relative to the input. `'start'`: The label will appear to the left of the input in LTR and to the right in RTL. `'end'`: The label will appear to the right of the input in LTR and to the left in RTL. `'floating'`: The label will appear smaller and above the input when the input is focused or it has a value. Otherwise it will appear on top of the input. `'stacked'`: The label will appear smaller and above the input regardless even when the input is blurred or has no value. `'fixed'`: The label has the same behavior as `'start'` except it also has a fixed width. Long text will be truncated with ellipses ("...").
+ */
+ "labelPlacement": 'start' | 'end' | 'floating' | 'stacked' | 'fixed';
/**
* The maximum value, which must not be less than its minimum (min attribute) value.
*/
@@ -1141,6 +1169,10 @@ export namespace Components {
* Sets focus on the native `input` in `ion-input`. Use this method instead of the global `input.focus()`.
*/
"setFocus": () => Promise;
+ /**
+ * The shape of the input. If "round" it will have an increased border radius.
+ */
+ "shape"?: 'round';
/**
* The initial size of the control. This value is in pixels unless the value of the type attribute is `"text"` or `"password"`, in which case it is an integer number of characters. This attribute applies only when the `type` attribute is set to `"text"`, `"search"`, `"tel"`, `"url"`, `"email"`, or `"password"`, otherwise it is ignored.
*/
@@ -4879,6 +4911,14 @@ declare namespace LocalJSX {
* 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).
*/
"color"?: Color;
+ /**
+ * If `true`, a character counter will display the ratio of characters used and the total character limit. Developers must also set the `maxlength` property for the counter to be calculated correctly.
+ */
+ "counter"?: boolean;
+ /**
+ * A callback used to format the counter text. By default the counter text is set to "itemLength / maxLength".
+ */
+ "counterFormatter"?: (inputLength: number, maxLength: number) => string;
/**
* Set the amount of time, in milliseconds, to wait to trigger the `ionInput` event after each keystroke.
*/
@@ -4891,10 +4931,30 @@ declare namespace LocalJSX {
* A hint to the browser for which enter key to display. Possible values: `"enter"`, `"done"`, `"go"`, `"next"`, `"previous"`, `"search"`, and `"send"`.
*/
"enterkeyhint"?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
+ /**
+ * Text that is placed under the input and displayed when an error is detected.
+ */
+ "errorText"?: string;
+ /**
+ * The fill for the item. If `'solid'` the item will have a background. If `'outline'` the item will be transparent with a border. Only available in `md` mode.
+ */
+ "fill"?: 'outline' | 'solid';
+ /**
+ * Text that is placed under the input and displayed when no error is detected.
+ */
+ "helperText"?: string;
/**
* A hint to the browser for which keyboard to display. Possible values: `"none"`, `"text"`, `"tel"`, `"url"`, `"email"`, `"numeric"`, `"decimal"`, and `"search"`.
*/
"inputmode"?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
+ /**
+ * The visible label associated with the input.
+ */
+ "label"?: string;
+ /**
+ * Where to place the label relative to the input. `'start'`: The label will appear to the left of the input in LTR and to the right in RTL. `'end'`: The label will appear to the right of the input in LTR and to the left in RTL. `'floating'`: The label will appear smaller and above the input when the input is focused or it has a value. Otherwise it will appear on top of the input. `'stacked'`: The label will appear smaller and above the input regardless even when the input is blurred or has no value. `'fixed'`: The label has the same behavior as `'start'` except it also has a fixed width. Long text will be truncated with ellipses ("...").
+ */
+ "labelPlacement"?: 'start' | 'end' | 'floating' | 'stacked' | 'fixed';
/**
* The maximum value, which must not be less than its minimum (min attribute) value.
*/
@@ -4959,6 +5019,10 @@ declare namespace LocalJSX {
* If `true`, the user must fill in a value before submitting a form.
*/
"required"?: boolean;
+ /**
+ * The shape of the input. If "round" it will have an increased border radius.
+ */
+ "shape"?: 'round';
/**
* The initial size of the control. This value is in pixels unless the value of the type attribute is `"text"` or `"password"`, in which case it is an integer number of characters. This attribute applies only when the `type` attribute is set to `"text"`, `"search"`, `"tel"`, `"url"`, `"email"`, or `"password"`, otherwise it is ignored.
*/
diff --git a/core/src/components/input/input.scss b/core/src/components/input/input.scss
index b08914f1b1d..570407df233 100644
--- a/core/src/components/input/input.scss
+++ b/core/src/components/input/input.scss
@@ -18,6 +18,15 @@
* @prop --placeholder-font-style: Font style of the input placeholder text
* @prop --placeholder-font-weight: Font weight of the input placeholder text
* @prop --placeholder-opacity: Opacity of the input placeholder text
+ *
+ * @prop --highlight-color-focused: The color of the highlight on the input when focused
+ * @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
*/
--placeholder-color: initial;
--placeholder-font-style: initial;
diff --git a/core/src/components/input/input.tsx b/core/src/components/input/input.tsx
index 528871a9a5c..5c5ec9cd2f6 100644
--- a/core/src/components/input/input.tsx
+++ b/core/src/components/input/input.tsx
@@ -90,6 +90,17 @@ export class Input implements ComponentInterface {
*/
@Prop() clearOnEdit?: boolean;
+ /**
+ * If `true`, a character counter will display the ratio of characters used and the total character limit. Developers must also set the `maxlength` property for the counter to be calculated correctly.
+ */
+ @Prop() counter = false;
+
+ /**
+ * A callback used to format the counter text.
+ * By default the counter text is set to "itemLength / maxLength".
+ */
+ @Prop() counterFormatter?: (inputLength: number, maxLength: number) => string;
+
/**
* Set the amount of time, in milliseconds, to wait to trigger the `ionInput` event after each keystroke.
*/
@@ -117,6 +128,17 @@ export class Input implements ComponentInterface {
*/
@Prop() enterkeyhint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
+ /**
+ * Text that is placed under the input and displayed when an error is detected.
+ */
+ @Prop() errorText?: string;
+
+ /**
+ * The fill for the item. If `'solid'` the item will have a background. If
+ * `'outline'` the item will be transparent with a border. Only available in `md` mode.
+ */
+ @Prop() fill?: 'outline' | 'solid';
+
/**
* A hint to the browser for which keyboard to display.
* Possible values: `"none"`, `"text"`, `"tel"`, `"url"`,
@@ -124,6 +146,26 @@ export class Input implements ComponentInterface {
*/
@Prop() inputmode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
+ /**
+ * Text that is placed under the input and displayed when no error is detected.
+ */
+ @Prop() helperText?: string;
+
+ /**
+ * The visible label associated with the input.
+ */
+ @Prop() label?: string;
+
+ /**
+ * Where to place the label relative to the input.
+ * `'start'`: The label will appear to the left of the input in LTR and to the right in RTL.
+ * `'end'`: The label will appear to the right of the input in LTR and to the left in RTL.
+ * `'floating'`: The label will appear smaller and above the input when the input is focused or it has a value. Otherwise it will appear on top of the input.
+ * `'stacked'`: The label will appear smaller and above the input regardless even when the input is blurred or has no value.
+ * `'fixed'`: The label has the same behavior as `'start'` except it also has a fixed width. Long text will be truncated with ellipses ("...").
+ */
+ @Prop() labelPlacement: 'start' | 'end' | 'floating' | 'stacked' | 'fixed' = 'start';
+
/**
* The maximum value, which must not be less than its minimum (min attribute) value.
*/
@@ -176,6 +218,11 @@ export class Input implements ComponentInterface {
*/
@Prop() required = false;
+ /**
+ * The shape of the input. If "round" it will have an increased border radius.
+ */
+ @Prop() shape?: 'round';
+
/**
* If `true`, the element will have its spelling and grammar checked.
*/
diff --git a/packages/vue/src/proxies.ts b/packages/vue/src/proxies.ts
index 38214f38e75..420bbe8ff20 100644
--- a/packages/vue/src/proxies.ts
+++ b/packages/vue/src/proxies.ts
@@ -396,10 +396,17 @@ export const IonInput = /*@__PURE__*/ defineContainer('ion-input',
'autofocus',
'clearInput',
'clearOnEdit',
+ 'counter',
+ 'counterFormatter',
'debounce',
'disabled',
'enterkeyhint',
+ 'errorText',
+ 'fill',
'inputmode',
+ 'helperText',
+ 'label',
+ 'labelPlacement',
'max',
'maxlength',
'min',
@@ -410,6 +417,7 @@ export const IonInput = /*@__PURE__*/ defineContainer('ion-input',
'placeholder',
'readonly',
'required',
+ 'shape',
'spellcheck',
'step',
'size',