Input Component

Properties

• value (string):
  The value of the input field. If a store is used, this parameter will be ignored.
• placeholder (string):
  The text that will be displayed in the input field when it is empty.
• readonly (boolean, default: false):
  Determines whether the input field is read-only.
• disabled (boolean, default: false):
  Disables the input field, making it inactive.
• name (string):
  The name of the input field. Used when interacting with the store if provided.
• leftIcon (string | Node | jsx.JSX.ArrayElement):
  An icon displayed to the left of the input field. It can be a string (icon name) or a React element.
• rightIcon (string | Node | jsx.JSX.ArrayElement):
  An icon displayed to the right of the input field. It can be a string (icon name) or a React element.
• waiting (boolean, default: false):
  If true, a spinner indicating waiting will be displayed instead of the right icon.
• autofocus (boolean, default: false):
  Automatically focuses the input field when the component is mounted.
• formId (string):
  The identifier of the form to which this input field is bound.
• store ([get: any, set: (field: string, value: string) => void]):
  Connection to an external data store. The first element of the array is responsible for getting data, and the second for updating it.
• stopPropagation (boolean, default: false):
  If true, blocks further propagation of click and mouse events.
• onInput ((value: string, event?: InputEvent) => void):
  A handler function called when the value of the input field changes. It returns the current value and the event.

Events

• onInput ({value: string, event?: InputEvent} => void)
  A handler that is called on every change of value in the input field. It updates the field's value in the store if provided and calls the user-defined props.onInput function if passed.
• onClick ({event: MouseEvent} => void)
  A click handler for the input field. If the field is wrapped in a container with icons (or without), this handler may not be directly assigned to the field itself but will be used to stop event propagation when clicking on the wrapper if the stopPropagation property is set.
• onMouseDown ({event: MouseEvent} => void)
  A mouse button down event handler. If the stopPropagation property is set to true, the event will not propagate further (for example, to prevent other clicks on parent elements).
• onMount *()
  A handler that triggers when the component is mounted. Used to automatically set focus on the input field if the autofocus property is provided.
• stopPropagationHandler ({event: MouseEvent} => void)
  A special function to prevent the propagation of click and mouse down events if the stopPropagation property is set. It blocks the transmission of these events to parent elements.

Key Points

• onInput is the main event that handles changes in the input field value and passes updates to the store or external handlers.
• onClick and onMouseDown are used to prevent the propagation of click and mouse down events to parent elements if required.
• onMount ensures autofocus if the autofocus property is set to true.

Usage Examples