Input

Input Component

The Input component renders a styled text input field with optional label, hint, icon, validation messages, and tooltip support. It is built for accessibility and Livewire integration, with configurable display of required indicators and error feedback.

Example Usage

<x-input label="Username" required tooltip="Enter your username" icon="icon-user" />

Props

• label (string|null)
  Optional label text displayed above the input field.

• hint (string|null)
  Optional hint text shown below the input for additional guidance.

• showRequired (bool, default: true)
  Toggles the display of a required asterisk when the input is marked as required.

• showValidation (bool, default: true)
  Enables or disables validation error messages shown below the input.

• icon (string|null)
  CSS class for an icon displayed inside the input on the left side.

• tooltip (string|null)
  Tooltip text shown when hovering over the input field.

Overview

This Input component provides a customizable text input with accessible labeling and error handling compatible with Livewire forms. It supports an optional icon inside the input, tooltips for additional info, and dark mode styling with Tailwind CSS. Unique IDs ensure correct label-input association for screen readers.