Input

The Input component allows users to enter and edit text values in forms and pages. It provides various customization options for appearance, behavior, layout, validations, and actions.

1. Basic Properties

• Name: The unique identifier of the input field (e.g., Input1).
• Label: The text label displayed above or inside the input field.
• Default Value: The initial value of the input field when it loads.
• Placeholder: A hint displayed inside the field until the user enters a value.

Field States

• Read only: Makes the input non-editable but still visible.
• Disabled: Disables the input field completely, preventing interaction.
• Hidden: Hides the input from the interface but keeps it available in logic.

2. Layout

The Layout settings control how the component is displayed across different screen sizes and how it aligns with other components.

• Breakpoints: Defines how the input behaves across responsive screen sizes (e.g., 12 12 12 12).
• Spacing: Controls the spacing and alignment with surrounding components.

📘 For a full explanation of Layout settings, please refer to Common Properties → Layout.

3. Events

The input supports multiple event handlers:

• onChange: Triggered when the value changes. You can attach custom actions or logic here.
• onBlur: Triggered when the input loses focus.

4. Validations

Validation rules ensure that the input value meets the required conditions (e.g., not empty, valid email format, specific length, etc.).

You can define:

• Required fields
• Custom validation logic
• Format checks (email, URL, emoji, etc.)
• Range and string checks (min, max, includes, startsWith, endsWith)

📘 For a full list of rules, usage examples, and error message customization, please refer to Common Properties → Validations.

5. Actions

The Actions section allows you to attach custom behaviors to the Input component.
For example, you can trigger a notification, call an API, or update another component when the input value changes.

📘 For a complete explanation and usage examples, please refer to Common Properties → Action.

6. Additional Options

• Auto Focus: Automatically focuses on the input when the page loads.
• Multiline: Turns the input into a textarea for multi-line text.
• Loading: Displays a loading state inside the input.
• Color: Choose between primary or secondary color themes.

7. Style

Custom CSS styles can be applied for further customization.

📘 For more details, see Common Properties → Style.

Example Usage

1. Required field with custom message
   • Rule: required
   • Message: "This field is required"
2. Custom validation {{currentUser.name == "veli"}} Message: "Only Veli can submit this field"
3. Attach onChange event
   • Example: Call API or set a variable whenever the user types something.

✅ With these settings, the Input component becomes a highly flexible element that can be used in forms, search fields, or dynamic applications.