V2 is now our main version. V1 is considered EoL!

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