There are still dozens of new things to be done in 2025 in TallStackUI v2. Stay tuned for every release!

Powerful suite of Blade components for TALL Stack apps.

Without Livewire

TallStackUI Form Components Without Livewire.

TallStackUI is a component library designed for Livewire 3, but after many requests from the community, we have adapted TallStackUI to work perfectly well outside of Livewire components. Below is a list of some components that can be used outside 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
  • Select
  • Tag
  • TextArea
  • Time
  • Toggle

Examples of components that CANNOT be used out of Livewire component ❌

  • KeyValue
  • Loading
  • Reactions
  • Signature
  • Table
  • Upload

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.

<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>

Some components, such as: select.styled, date, tags and some 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 form:

<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) Intercepting the request and parsing it using 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)
{
$tagFrameworks = json_decode($request->get('frameworks'));
 
$selectOptions = json_decode($request->get('select_options'));
 
$vacationDates = json_decode($request->get('vacation'));
 
dd($tagFrameworks, $selectOptions, $vacationDates);
 
// ...
}
}

Code highlighting provided by Torchlight