TallStackUI, Without Livewire

# Concept

TallStackUI is a component library that was designed for Livewire 3, but after various requests from the entire user community, you can use form components out of Livewire components. Check below the list of all components that can be used out of Livewire components, and also those that cannot.

List of components that CAN be used out of Livewire component ✅

Checkbox
Color
Date
Input
Number
Password
Pin
Radio
Range
Tag
Time
Textarea
Toggle
Select

List of components that CAN NOT be used out of Livewire component ❌

Loading
Upload
Reactions
Signature
Table

Many other components can be used out of Livewire components, such as alert, modal, dropdown, etc. These are components that do not contain any logic that depends on Livewire.

# Example

<form action="{{ route('users.profile') }}" method="post">
    @csrf
 
    <x-input label="Name" name="input" :value="old('name')" />
 
    <x-password label="Password" name="pass" :value="old('pass')" />
 
    <x-textarea label="Description" name="textarea" :value="old('textarea')" />
 
    <x-number label="Quantity of Users" name="number" :value="old('number')" />
 
    <x-pin label="Security Code" length="4" name="pin" :value="old('pin')" />
 
    <x-color label="Favorite Color" name="color" :value="old('color')" />
 
    <x-range label="Minimum Quantity" name="range" :value="old('range')" />
 
    <x-checkbox label="Accept the Terms" name="checkbox" :value="old('checkbox')" />
 
    <x-radio label="Receive Notification" name="radio" :value="old('radio')" />
 
    <x-toggle label="Enable Notifications" name="toggle" :value="old('toggle')" />
 
    <x-select.styled :options="['TALL', 'LIVT']"
                     label="Select One Option"
                     name="select_options"
                     searchable
                     :value="old('select_options')" />
 
    <x-select.styled :request="route('api.users')"
                     select="label:name|value:id"
                     label="Search User Through API"
                     name="search_api"
                     :value="old('search_api')" />
 
    <x-tag label="Frameworks" name="frameworks" :value="['Laravel', 'Symfony', 'CodeIgniter']" />
 
    <x-date label="DoB" name="dob" value="2024-02-27" />
 
    <x-time label="Preferred Hour" name="hour" value="02:30 PM" />
 
    <x-button type="submit">
        Submit
    </x-button>
 
</form>

# Parse Request Value

Some components, such as select.styled, date, tags and others, send an array to the backend when the form is submitted. In these cases you must use the PHP json_decode function to access the items of the array.

1) Preparing the Blade:

<form action="{{ route('users.profile') }}" method="post">
    @csrf
 
    <x-tag label="Frameworks"
           name="frameworks"
           :value="['Laravel', 'Symfony', 'CodeIgniter']" />
 
    <x-select.styled :options="['TALL', 'LIVT']"
                     label="Select One Option"
                     name="select_options"
                     searchable
                     multiple
                     :value="old('select_options')" />
 
     <x-date label="Vacation Dates"
             name="vacation"
             range
             :value="['2024-02-26', '2024-02-27']" />
 
    <x-button type="submit">
        Submit
    </x-button>
 
</form>

2) Using the PHP json_decode to access the array of items:

namespace App\Http\Controllers;
 
use Illuminate\Http\Request;
 
class RegisterController extends Controller
{
    // ...
 
    public function store(Request $request)
    {
        $selectOptions = json_decode($request->get('select_options')); 
 
        $tagFrameworks = json_decode($request->get('frameworks')); 
 
        $vacationDates = json_decode($request->get('vacation')); 
 
        // ...
    }
}