Lara Blade

Forms

Check Boxes

To be checked or not to be checked, that is the question.

Contributors for this component
@props([ 'baseClass' => 'rounded border-neutral-200 text-primary-500 shadow-sm focus:ring-primary-500', 'class' => '', ]) <input type="checkbox" {{ $attributes->merge(['class' => $baseClass . ' ' . $class]) }}>

Checkbox LaraBlade Example

<div> <label class="flex items-center space-x-3"> <x-lb.input.checkbox /> <span class="text-gray-300"> {{ $slot }} </span> </label> </div>

LaraBlade example of preview 

<div>
    <label class="flex items-center space-x-3">
        <x-lb.input.checkbox />
        <span class="text-gray-300">
            {{ $slot }}
        </span>
    </label>
</div>

Data and Props

Propreties and props that are avaiable for this component

type
defines a checkbox wherein users can have it ticked (checked) when activated
class
allows changes on the baseClass

Other Examples

<div x-data="{ checked: false }"> <label class="flex items-center space-x-3"> <x-lb.input.checkbox x-model="checked" class="form-checkbox rounded border-neutral-300 text-primary-500 shadow-sm focus:ring-primary-500" /> <span :class="{ 'text-gray-300': checked, 'italic': checked, 'line-through': checked }"> {{ $slot }} </span> </label> </div>

Instruction

<div x-data="{ tasks: [ { name: '5 cups Porcini mushrooms', checked: false } ], newTask: '', addTask: function() { if (this.newTask.trim() !== '') { this.tasks.push({ name: this.newTask, checked: false }); this.newTask = ''; } }, deleteTask: function(index) { this.tasks.splice(index, 1); } }"> <ul class="list-outside w-80"> <template x-for="(task, index) in tasks" :key="index"> <li> <div class="flex justify-between items-center mb-2"> <label class="flex items-center space-x-3"> <input type="checkbox" class="rounded border-neutral-300 text-primary-500 shadow-sm focus:ring-primary-500" x-model="task.checked" :style="'transition: transform 0.2s; ' + (task.checked ? 'transform: scale(1.1);' : '')" /> <span :class="{ 'text-gray-300': task.checked, 'italic': task.checked, 'line-through': task.checked }" x-text="task.name"></span> </label> <button class="px-2 py-1 text-neutral-500" @click="deleteTask(index)"> <x-lb.heroicon.o-x-mark class="w-5 h-5" /> </button> </div> </li> </template> </ul> <div class="flex justify-between items-center"> <input type="text" x-model="newTask" class="block w-full px-3 py-2 mb-4 border border-neutral-300 rounded-lg focus:ring-0 focus:outline-none" placeholder="Add new task"> <button class="px-2 pb-4 text-green-500 rounded ml-2" @click="addTask"> <x-lb.heroicon.o-plus class="w-5 h-5" /> </button> </div> </div>

To Do

<div x-data="{ tasks: [ { name: '5 cups Porcini mushrooms', checked: false } ], allChecked: false, newTask: '', addTask: function() { if (this.newTask.trim() !== '') { this.tasks.push({ name: this.newTask, checked: this.allChecked }); this.newTask = ''; } }, deleteTask: function(index) { this.tasks.splice(index, 1); this.updateAllChecked(); }, updateAllChecked: function() { this.allChecked = this.tasks.every(task => task.checked); }, toggleAll: function() { this.tasks.forEach(task => task.checked = this.allChecked); } }"> <div class="flex justify-between items-center mb-2"> <label class="flex items-center space-x-3"> <x-lb.input.checkbox x-model="allChecked" @change="toggleAll()" /> <span class="font-bold">All Tasks</span> </label> </div> <ul class="list-outside w-80"> <template x-for="(task, index) in tasks" :key="index"> <li> <div class="flex justify-between items-center mb-2"> <label class="flex items-center space-x-3"> <x-lb.input.checkbox x-model="task.checked" @change="updateAllChecked()" /> <span :class="{ 'text-gray-300': task.checked, 'italic': task.checked, 'line-through': task.checked }" x-text="task.name"></span> </label> <button class="px-2 py-1 text-neutral-500" @click="deleteTask(index)"> <x-lb.heroicon.o-x-mark class="w-5 h-5" /> </button> </div> </li> </template> </ul> <div class="flex justify-between items-center"> <input type="text" x-model="newTask" class="block w-full px-3 py-2 mb-4 border border-neutral-300 rounded-lg focus:ring-0 focus:outline-none" placeholder="Add new task"> <button class="px-2 pb-4 text-green-500 rounded ml-2" @click="addTask"> <x-lb.heroicon.o-plus class="w-5 h-5" /> </button> </div> </div>

List

action panels inputs