Without Livewire
>= 1.5.3TallStackUI Form Components Without Livewire.
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')); // ... }}