New version 1.30.0 is now available 🎉 Introducing a useful command to search for component usage.

Powerful suite of Blade components for TALL Stack apps.

Without Livewire

>= 1.5.3

TallStackUI Form Components Without Livewire.

TallStackUI is a component library that was designed for Livewire 3, but after various requests from the entire user community, starting from version 1.5.3 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.

Can be used out of Livewire component ✅

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

Can't be used out of Livewire component ❌

  • Loading
  • Upload
  • Reactions
  • 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.

<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 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'));
 
// ...
}
}

Code highlighting provided by Torchlight