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. Before version 1.5.3 you could already use the form components, but some did not work well and the error validation messages required a certain "workaround" to work. Now all components can be used, including selects. See the examples below to learn how to use it.
<form action="{{ route('user.register') }}" 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-button type="submit">
Submit
</x-button>
 
</form>

As you can see in the example above, all form components can be used in a form out of the Livewire context. If you notice that something is not working correctly, we ask that you help us by submitting a bug report. The only requirement, as shown in the example above, is that the components receive the name attribute, including so that validation error messages are displayed correctly. Specifically for the select , pin and tag components, a "hidden" input will be added to the page with the name of the attribute passed to these components. Still talking about the select component, it is expected that you can use it with all available options, similar to how we use it via Livewire.

For cases where you want to use the select.styled component with the multiple option, or tag component, then obtaining the value in the controller must do the json_decode of the value:

1) Blade:

<form action="{{ route('user.register') }}" 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-button type="submit">
Submit
</x-button>
 
</form>

2) Controller:

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

Code highlighting provided by Torchlight