🧩 Components

🧩 TomSelect

This component replaces Select2.js with a vanilla JS alternative, so it does not depend on jQuery.

• Install

Use either CDN method or npm which described in Configuration page.

I'll use modern and prefered way in this tutorial .

npm install tom-select

Then, in your app.js import the packages:

import "tom-select/dist/css/tom-select.css";
import TomSelect from "tom-select";
window.TomSelect = TomSelect;

• Basic Usage

<x-hwkui-tom-select
  class="h-full"
  wire:model="customer_id"
  label="Customer"
  placeholder="Select customer..."
>
  <!-- Default empty option -->
  <option value="">Select Customer...</option>

  <!-- Dynamic options -->
  @foreach ($customers as $c)
  <option value="{{ (string) $c->id }}" wire:key="{{ $c->id }}">
    {{ $c->name }}
  </option>
  @endforeach
</x-hwkui-tom-select>

• Passing Additional TomSelect Options

You can pass extra options via the :options attribute:

<x-hwkui-tom-select
  wire:model="customer_id"
  label="Customer"
  :options="[
        'maxItems' => 3,
        'create' => true,
        'plugins' => ['remove_button']
    ]"
>
</x-hwkui-tom-select>

More information about TomSelect setup can be found at the official website Tom Select

---

🧩 FlatPicker ( DateTime picker )

This component provides an elegant datetime picker powered by FlatPickr, ready to use in your Laravel Livewire app with a clean, customizable Blade syntax.

• Install

Use either CDN method or npm which described in Configuration page.

I'll use modern and prefered way in this tutorial .

npm install flatpickr

edit app.js

import flatpickr from "flatpickr";
import "flatpickr/dist/flatpickr.min.css";
import monthSelectPlugin from "flatpickr/dist/plugins/monthSelect";
import "flatpickr/dist/plugins/monthSelect/style.css";
window.flatpickr = flatpickr;
window.monthSelectPlugin = monthSelectPlugin;

• Basic Usage

<x-hwkui-flat-picker
  id="datetimePicker"
  label="Flatpicker"
  placeholder="Select Date"
  wire:model="setDatetime"
/>

You can configure default picker options globally in config/hwkui.php

<?php

'flat-picker' => [
    'defaultOptions' => [
        'enableTime' => true,
        'dateFormat' => 'Y-m-d H:i',
        'time_24hr' => true,
        'allowInput' => false,
        'altInput' => true,
        'altFormat' => 'Y-m-d H:i',
        'minuteIncrement' => 5,
    ]
],

You can explore all available options on the Options page and see what you can add.

• Override Options Per Component

to Override settings for individual instances using the :options attribute:

<x-hwkui-flat-picker
  id="datetimePicker"
  label="Select Date"
  placeholder="Select Date"
  wire:model="month"
  :options="[
                'enableTime' => false,
                'dateFormat' => 'Y-m',
                'altFormat' => 'Y-m',
            ]"
/>

if you want to select only months you must then pass it as :options argument

<x-hwkui-flat-picker
  id="datetimePicker"
  label="Select Month"
  placeholder="Select Month"
  wire:model="month"
  :options="[
        'enableTime' => false,
        'dateFormat' => 'Y-m',
        'altFormat' => 'Y-m',
        'plugins' => [
    [
        'type' => 'monthSelect',
        'config' => [
            'shorthand' => true,
            'theme' => 'dark',
        ],
    ],
],
    ]"
/>

If you want to use Year Select plugin which FlatPicker doesnt provide it directly you must install third party plugin

npm install @mikesha/flatpickr-year-select-plugin

then add it

import yearSelectPlugin from "@mikesha/flatpickr-year-select-plugin";
window.yearSelectPlugin = yearSelectPlugin;

@import "../../node_modules/@mikesha/flatpickr-year-select-plugin/build/yearPlugin.css";

use it in blade

<x-hwkui-flat-picker
  id="datetimePicker"
  label="Select Year"
  placeholder="Select Year"
  wire:model="year"
  :options="[
        'enableTime' => false,
        'dateFormat' => 'Y',
        'altFormat' => 'Y',
        'plugins' => [
            [
                'type' => 'yearSelect',
            ],
        ],
    ]"
/>

---

🧩 Drag & Drop File Upload

A premium, accessible, and reactive file upload component designed for Laravel, Livewire, and Tailwind CSS. It supports drag-and-drop mechanics, real-time client-side max file limitations, progress indication bars, and inline image/document previews.

---

No setup is required since its depends on AlpineJs which comes with Livewire.

• Basic Usage

<x-hwkui-upload wire:model="avatar" preview />

<!-- Multiple Files with Previews & Constraints -->
<x-hwkui-upload
  wire:model="documents"
  multiple
  max="3"
  accept="image/*,.pdf"
  hint="Only images or PDFs are allowed. Max 3 files."
/>

• Component API

| Attribute | Type | Default | Description | | :----------- | :-------- | :--------- | :--------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------ | | wire:model | string | Required | The backing Livewire public property array/file handler string name. | | multiple | boolean | false | Enables selection or dragging of multiple files simultaneously. | | max | integer | null | Imposes client-side file count safety validations (works exclusively with multiple). | | preview | boolean | false | Renders dynamic thumbnail galleries for images or itemized layout lists for non-images. | | hint | string | null | null | Overrides the default helper sub-text positioned beneath upload prompts. | | accept | string | * | Valid standard file mime-type constraint filters forwarded directly to native browser dialogs. |

---

🧩 Password Strength Indicator

A lightweight, client-side password strength indicator.

Attribute	Type	Default	Description
name	string	password	The name or wire:model of the target input.
checklist	boolean	true	Whether to display the list of password rules.
rules	array	(See below)	The specific rules to validate against.

• Customizing Rules

By default, the component checks for Length (8), Uppercase, Lowercase, Numbers, and Symbols.

You can override these rules by passing an array. Set a rule to false to disable it entirely (it will be removed from both the UI and the scoring logic). Set length to an integer to define the minimum character count.

<!-- Example: Require only 6 characters and a number -->
<x-hwkui-password-strength
  name="password"
  :rules="[
        'length' => 6, 
        'uppercase' => false, 
        'lowercase' => false, 
        'number' => true, 
        'symbol' => false
    ]"
/>

• Basic Usage

Place the <x-hwkui-password-strength> component directly below your password input. Ensure the name prop matches either the name or wire:model attribute of the target input.

<flux:field class="mb-4">
  <flux:input wire:model="password" type="password" />
  <!-- Connects to wire:model="password" -->
  <x-hwkui-password-strength name="password" />
</flux:field>

---

🧩 Select2

• Install

Use either CDN method or npm which described in Configuration page.

I'll use modern and prefered way in this tutorial .

npm install jquery select2

// For select and jquery component
import $ from "jquery";
import "select2/dist/js/select2.full.min.js";
import "select2/dist/css/select2.min.css";
window.$ = $;
window.jQuery = $;
window.Select2 = $.fn.select2;

• Basic usgae

<x-hwkui-select
  wire:model="selectedItem"
  label="Select User to PLay"
  placeholder="Select a user Babe"
>
  @forelse ($users as $user)
  <option wire:key="{{ $user->id }}" value="{{ $user->name }}">
    {{ $user->name }}
  </option>
  @empty
  <option value="">No options available</option>
  @endforelse
</x-hwkui-select>

Make sure to include Livewire and the component's scripts on your page.

you can pass options for Select2 like via component

<x-hwkui-select
  wire:model="selectedUser"
  label="Choose User"
  :options="$options"
>
</x-hwkui-select>

or direct array

<x-hwkui-select
  wire:model="selectedUser"
  label="Choose User"
  :options="[
         'placeholder' => 'Select an option',
        'allowClear' => true,
        'multiple' => true,
    ]"
>
</x-hwkui-select>

🧩 DateTime Picker

This component provides an elegant datetime picker powered by Tempus Dominus v6, ready to use in your Laravel Livewire app with a clean, customizable Blade syntax.

Developer might abandoned this Project

As stated in official website This project is no longer active or supported

• Install

Use either CDN method or npm which described in Configuration page.

I'll use modern and prefered way in this tutorial .

npm install @popperjs/core @eonasdan/tempus-dominus

// For datetime picker from tempus-dominus ( this is abandond now no new releases)
import * as Popper from "@popperjs/core";
import { TempusDominus } from "@eonasdan/tempus-dominus";
import "@eonasdan/tempus-dominus/dist/css/tempus-dominus.min.css";
window.Popper = Popper;
//use this if you used cdn assets
window.tempusDominus = TempusDominus;
// or use this if you used npm
window.tempusDominus = {
  TempusDominus,
};

• Basic Usage

<x-hwkui-datetime
  id="test-datetime"
  label="Test DateTime"
  placeholder="Select Date"
  wire:model="setDatetime"
/>

You can configure default picker options globally in config/hwkui.php

<?php


'datetime' => [
        'defaultOptions' => [
            'display' => [
                'viewMode' => 'calendar',
                'components' => [
                    'calendar' => true,
                    'date' => true,
                    'year' => true,
                    'month' => true,
                    'clock' => true,
                ],
                'calendarWeeks' => false,
            ],
            'debug' => false,
            'useCurrent' => true,
            'stepping' => 1,
            'localization' => [
                'format' => 'yyyy-MM-dd hh:mm',
                'locale' => app()->getLocale(),
            ],
        ],
    ],

You can explore all available options on the Options page and see what you can add.

• Override Options Per Component

Override settings for individual instances using the :options attribute:

<x-hwkui-datetime
  id="test-datetime"
  :options="[
        'display' => [
            'components' => [
                'date' => false,
                'year' => true,
                'month' => true,
                'clock' => false,
            ],
        ],
        'localization' => [
            'format' => 'yyyy-MM h:i:s',
            'locale' => app()->getLocale(),
        ],
    ]"
  class="border-amber-500"
  label="Test DateTime"
  placeholder="Select Date"
  wire:model="setDatetime"
/>

🧩 Text Editor

A rich-text editor component powered by Quill.js, built for Laravel Livewire 3. Fully supports customization, toolbar control, themes, and Livewire model binding. In your config/hwkui.php, activate the editor plugin:

<?php

'plugins' => [
    'Editor' => [
        'active' => true,
        'files' => [
            [
                'type' => 'css',
                'asset' => false,
                'location' => '//cdn.quilljs.com/1.3.6/quill.snow.css',
            ],
            [
                'type' => 'js',
                'asset' => false,
                'location' => '//cdn.quilljs.com/1.3.6/quill.min.js',
            ],
        ],
    ],
],

• Basic Usage

<x-hwkui-editor id="editor" wire:model="content">
  Default content goes here...
</x-hwkui-editor>

• Toolbar Customization

Use the toolbar attribute to define your desired tools.

<x-hwkui-editor
  id="editor"
  wire:model.live="content"
  theme="snow"
  toolbar="bold|italic|underline|link|image|code-block|blockquote|list|clean"
>
</x-hwkui-editor>

🔹 You can customize the toolbar using Quill toolbar options separated by |.

---