Lara Blade

Forms

Layouts

The web's feng shui masters, arranging pixels with such precision.

Contributors for this component
<div class="w-full"> <x-lb.form submit="updateChanges"> <x-lb.form.section class="col-span-6 lg:col-span-2"> <x-lb.form.section-header title="Project Details" description="Enter the project details below." /> </x-lb.form.section> <x-lb.form.section class="col-span-6 lg:col-span-4" hasBorder="true"> <x-lb.input.group for="project.name" label="Disabled Input"> <x-lb.input type="text" value="Example text" disabled="true" /> </x-lb.input.group> <x-lb.input.group for="project.name" label="Name"> <x-lb.input type="text" wire:model.defer="project.name" /> </x-lb.input.group> <x-lb.input.group for="tasks" label="Tasks" class="col-span-6 lg:col-span-3"> <x-lb.input wire:model.defer="tasks" type="number" min="1" step="3" /> </x-lb.input.group> <x-lb.input.group for="date" label="Date" class="col-span-6 lg:col-span-3"> <x-lb.input.datepicker wire:model.defer="date" /> </x-lb.input.group> <x-lb.input.group for="project.status" label="Status"> <x-lb.input.select wire:model.defer="project.status"> <x-lb.input.select.option value="active" label="Active" /> <x-lb.input.select.option value="paused" label="Paused" /> <x-lb.input.select.option value="backlog" label="Backlog" /> <x-lb.input.select.option value="completed" label="Completed" /> <x-lb.input.select.option value="disabled" label="Disabled" disabled="true" /> </x-lb.input.select> </x-lb.input.group> <x-lb.input.toggle model="isPublic"> <x-lb.input.toggle.label label="Public View" description="If anyone with the link can view the project." /> <x-lb.input.toggle.simple :initialize="$isPublic" /> </x-lb.input.toggle> <x-lb.input.group for="notes" label="Notes"> <x-lb.input.textarea wire:model.defer="notes" /> </x-lb.input.group> <x-lb.form.footer> <x-lb.form.action-panel type="update" /> </x-lb.form.footer> </x-lb.form.section> </x-lb.form> </div>

Livewire form example with validation

Project Details

Enter the project details below.

If anyone with the link can view the project.