Working with Input Components

1. Using IonInput Component

Property	Values	Description
value	`string`	The value of the input field.
type	`text`, `email`, `password`, `number`, `search`, `tel`, `url`	Specifies the type of input element.
placeholder	`string`	Hint to display when the input is empty.
disabled	`true`, `false`	Disables the input field if set to true.
readonly	`true`, `false`	Makes the input field read-only if set to true.
clearOnEdit	`true`, `false`	Clears the input field when the user starts editing.

Example: Basic IonInput Usage

<ion-input placeholder="Enter your name"></ion-input>

Example: IonInput with Type and Value

<ion-input type="email" value="john@example.com"></ion-input>

2. Handling Input Value

Property	Description	Values	Notes
value	Current value of the input	`string`	Used for two-way data binding
disabled	Disables the input field	`true` / `false`	Prevents user interaction
readonly	Makes input read-only	`true` / `false`	Allows selection but not editing

Example: Binding input value to a variable

import { Component } from '@angular/core';

@Component({
  selector: 'app-input-example',
  template: &#x27;<ion-input [(ngModel)]="userInput" placeholder="Enter text"></ion-input>&#x27;
})
export class InputExampleComponent {
  userInput: string = &#x27;&#x27;;
}

Example: Using ionChange event to handle value changes

import { Component } from '@angular/core';

@Component({
  selector: 'app-input-change',
  template: &#x27;<ion-input (ionChange)="onInputChange($event)" placeholder="Type something"></ion-input>&#x27;
})
export class InputChangeComponent {
  onInputChange(event: any) {
    console.log(&#x27;Input changed to:&#x27;, event.detail.value);
  }
}

3. Using Input Types

Type	Description	Usage	Notes
text	Standard text input	`<ion-input type="text"></ion-input>`	Default input type
password	Hides input characters	`<ion-input type="password"></ion-input>`	Use for sensitive data
email	Validates email format	`<ion-input type="email"></ion-input>`	Browser validation enabled
number	Numeric input with validation	`<ion-input type="number"></ion-input>`	Allows decimal numbers
tel	Phone number input	`<ion-input type="tel"></ion-input>`	Use for phone number entry
url	URL input with validation	`<ion-input type="url"></ion-input>`	Validates URL format
search	Search input field	`<ion-input type="search"></ion-input>`	Optimized for search
date	Date picker input	`<ion-input type="date"></ion-input>`	Uses native date picker
time	Time picker input	`<ion-input type="time"></ion-input>`	Uses native time picker
datetime-local	Local date and time input	`<ion-input type="datetime-local"></ion-input>`	Does not include timezone

Example: Email Input with Validation

<ion-item>
  <ion-label position="floating">Email</ion-label>
  <ion-input type="email" required></ion-input>
</ion-item>

Example: Password Input with Toggle

<ion-item>
  <ion-label position="floating">Password</ion-label>
  <ion-input type="password" id="password"></ion-input>
  <ion-button slot="end" fill="clear" (click)="togglePassword()">
    <ion-icon name="eye"></ion-icon>
  &ion-button>
</ion-item>

4. Implementing Input Validation

Property	Description	Values	Notes
validate	Function to validate input	`() => boolean`	Return true if valid, false otherwise
validators	Array of validator functions	`Array<Function>`	Each function returns `true` or `false`
errorText	Error message to display when validation fails	`string`	Shown below input field

Example: Basic Validation

import { IonInput } from '@ionic/react';

const validateEmail = (value: string): boolean => {
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  return emailRegex.test(value);
};

const EmailInput = () => {
  return (
    <IonInput
      type="email"
      placeholder="Enter email"
      validate={validateEmail}
      errorText="Please enter a valid email"
    />
  );
};

Example: Multiple Validators

const validatePassword = (value: string): boolean => {
  return value.length >= 8;
};

const validateUppercase = (value: string): boolean => {
  return /[A-Z]/.test(value);
};

const PasswordInput = () => {
  return (
    <IonInput
      type="password"
      placeholder="Enter password"
      validators={[validatePassword, validateUppercase]}
      errorText="Must be at least 8 characters with uppercase"
    />
  );
};

Note: Validation occurs on input change and when the field loses focus.

5. Using IonTextarea Component

Property	Values	Description
autoGrow	`false`	Whether the textarea should auto grow based on its content.
autoGrow	`true`	Enables auto-growing textarea.
cols	`undefined`	The number of columns for the textarea.
disabled	`false`	Whether the textarea is disabled.
disabled	`true`	Disables the textarea component.
fill	`solid`	Style of the textarea: `solid` or `outline`.
fill	`outline`	Outline style for the textarea.
form	`string`	The form ID the textarea belongs to.
maxlength	`number`	Maximum number of characters allowed in the textarea.
minlength	`number`	Minimum number of characters required in the textarea.
name	`string`	Name used to identify the textarea in forms.
placeholder	`string`	Placeholder text for the textarea.
readonly	`false`	Whether the textarea is read-only.
readonly	`true`	Makes the textarea read-only.
required	`false`	Whether the textarea is required in forms.
required	`true`	Marks the textarea as required.
spellcheck	`false`	Whether spellcheck is enabled.
spellcheck	`true`	Enables spell checking for the textarea.
value	`string`	The current value of the textarea.
rows	`number`	Number of rows to display in the textarea.
size	`small`	Size of the textarea: `small`, `medium`, or `large`.
size	`medium`	Medium size for the textarea.
size	`large`	Large size for the textarea.

Example: Basic IonTextarea Usage

<ion-textarea
  placeholder="Enter your message"
  rows="4"
  cols="50">
</ion-textarea>

Example: IonTextarea with Validation

<ion-textarea
  name="message"
  placeholder="Type your message here"
  required=""
  minlength="10"
  maxlength="500">
</ion-textarea>

Example: IonTextarea with Auto Grow

<ion-textarea
  auto-grow=""
  placeholder="Type here...">
</ion-textarea>

6. Implementing Input Events

Event	Description	Usage
ionChange	Fires when the input value changes and loses focus	`<ion-input value="Initial Value" onIonChange="handleChange"></ion-input>`
ionInput	Fires as the user types or modifies input	`<ion-input onIonInput="handleInput"></ion-input>`
ionFocus	Fires when the input gains focus	`<ion-input onIonFocus="handleFocus"></ion-input>`
ionBlur	Fires when the input loses focus	`<ion-input onIonBlur="handleBlur"></ion-input>`

Note: Use ionInput for real-time updates and ionChange for validation or submission.

7. Using Clear Input

Property	Values	Description
clearInput	`true` \| `false`	Enables or disables the clear button in the input field.
clearOnEdit	`true` \| `false`	If set to `true`, clears the input when the user starts editing.

Example: Using Clear Input in Ionic

<ion-input clearInput="true" placeholder="Enter text"></ion-input>

Note: The clear button appears only when clearInput is set to true.

8. Setting Input Label

Property	Values	Description
label	`string`	Sets the label text for the input component.
labelPlacement	`'floating' \| 'stacked' \| 'fixed'`	Controls how the label is displayed: floating (default), stacked, or fixed.
labelId	`string`	Assigns a custom ID to the label element for accessibility.

Example: Setting Input Label

<ion-input label="Username" labelPlacement="floating"></ion-input>

Note: The labelPlacement property affects how the label appears visually and can be used to enhance form layout and user experience.

9. Using Input Slots

Slot Name	Description	Usage Example
start	Content placed before the input element	`<ion-input> <div slot="start">$ </div> </ion-input>`
end	Content placed after the input element	`<ion-input> <div slot="end">@ </div> </ion-input>`

Example: Using Input Slots with Icons

<ion-item>
  <ion-input placeholder="Email">
    <ion-icon name="mail" slot="start"></ion-icon>
    <ion-icon name="close-circle" slot="end"></ion-icon>
  </ion-input>
</ion-item>

10. Styling Input Components

Property	Values	Description
--background	`color`	Background color of the input component
--border-color	`color`	Border color of the input component
--border-radius	`size`	Border radius of the input component
--border-width	`size`	Border width of the input component
--color	`color`	Text color of the input component
--padding	`size`	Padding inside the input component

Example: Customizing Input Styling

.custom-input {
  --background: #f0f0f0;
  --border-color: #333;
  --border-radius: 8px;
  --border-width: 2px;
  --color: #000;
  --padding: 10px;
}

Note: These CSS variables can be applied to any Ionic input component like <ion-input> or <ion-textarea>.