File

File Component

The File component renders a styled file input field with optional label, hint, validation messages, and tooltip support. It is designed to provide an accessible and user-friendly file upload UI, compatible with Livewire for reactive forms.

Example Usage

<x-file label="Upload Document" required tooltip="Select a file to upload" />

Props

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

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

• showRequired (bool, default: true)
  Controls whether a required asterisk is shown when the input is marked as required.

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

• tooltip (string|null)
  Tooltip text shown on hover over the file input.

Overview

This File component provides a fully styled file input element with customizable labels and hints. It automatically generates a unique ID for accessibility linking the label and input. Validation messages integrate with Livewire error handling. Tailwind CSS and Alpine.js are used to ensure consistent styling and interactive tooltip support, including dark mode compatibility.