Those little boxes you tick to choose one or more options, like selecting toppings for your pizza.
php artisan spur:add forms/checkbox
If you use this to add the component, it will automatically add it to config/spur.php and auto-fetch the components files.
"components": [
'forms/checkbox',
]If you manually add the component in config/spur.php you would need to run
php artisan spur:fetch to import the component
<x-spur.checkbox /><x-spur.field id="accept-terms">
<x-spur.label>Email Address</x-spur.label>
<x-spur.checkbox name="accept-terms" />
</x-spur.field>Please read the terms and conditions carefully before proceeding
We promise not to spam your email
<x-spur.field id="accept-terms" type="checkbox">
<x-spur.label>Accept Terms & Conditions</x-spur.label>
<x-spur.checkbox name="accept-terms" />
<x-spur.description>Please read the terms and conditions carefully before proceeding</x-spur.description>
</x-spur.field>
<x-spur.field id="accept-marketing" type="checkbox">
<x-spur.label>Accept to receive marketing emails</x-spur.label>
<x-spur.checkbox name="accept-marketing" />
<x-spur.description>We promise not to spam your email</x-spur.description>
</x-spur.field>Please read the terms and conditions carefully before proceeding
We promise not to spam your email
<x-spur.field id="accept-terms" type="checkbox">
<x-spur.label>Accept Terms & Conditions</x-spur.label>
<x-spur.checkbox name="accept-terms" checked />
<x-spur.description>Please read the terms and conditions carefully before proceeding</x-spur.description>
</x-spur.field>
<x-spur.field id="accept-marketing" type="checkbox">
<x-spur.label>Accept to receive marketing emails</x-spur.label>
<x-spur.checkbox name="accept-marketing" />
<x-spur.description>We promise not to spam your email</x-spur.description>
</x-spur.field>Please read the terms and conditions carefully before proceeding
We promise not to spam your email
<x-spur.field id="accept-terms" type="checkbox" disabled>
<x-spur.label>Accept Terms & Conditions</x-spur.label>
<x-spur.checkbox name="accept-terms" />
<x-spur.description>Please read the terms and conditions carefully before proceeding</x-spur.description>
</x-spur.field>
<x-spur.field id="accept-marketing" type="checkbox">
<x-spur.label>Accept to receive marketing emails</x-spur.label>
<x-spur.checkbox name="accept-marketing" />
<x-spur.description>We promise not to spam your email</x-spur.description>
</x-spur.field>To process please accept terms & conditions
<x-spur.field id="accept-terms" type="checkbox" invalid>
<x-spur.label>Accept Terms & Condition</x-spur.label>
<x-spur.checkbox name="accept-terms" />
<x-spur.description>To process please accept terms & conditions</x-spur.description>
</x-spur.field><x-spur.checkbox />
<x-spur.checkbox color="indigo" />
<x-spur.checkbox color="blue" />
<x-spur.checkbox color="green" />
<x-spur.checkbox color="yellow" />
<x-spur.checkbox color="red" />You can use any custom html as checkbox button, by adding your desired HTML in the enclosed checkbox tag.
Spur provides a modifier to style the checked state of the checkbox `spur-checked`.
Can be used like so spur-checked:bg-red-300
<x-spur.checkbox id="insurance">
<div class="bg-white hover:bg-gray-50 dark:bg-neutral-700 dark:hover:bg-neutral-50/20 p-2 cursor-pointer gap-1 flex rounded h-full transition border-neutral-200 dark:border-neutral-200/40 border justify-between">
<div class="flex-col flex">
<span class="font-medium text-sm dark:text-white">Insurance</span>
<span class="text-xs dark:text-white/90">48 Months insurance package</span>
</div>
<span><x-icons.check-circle class="size-4 text-brand-yellow invisible spur-checked:visible"/></span>
</div>
</x-spur.checkbox>
<x-spur.checkbox id="delivery">
<div class="bg-white hover:bg-gray-50 dark:bg-neutral-700 dark:hover:bg-neutral-50/20 p-2 cursor-pointer gap-2 flex rounded h-full transition border-neutral-200 dark:border-neutral-200/40 border justify-between">
<span class="self-center"><x-icons.check-circle class="size-4 text-brand-yellow invisible spur-checked:visible"/></span>
<div class="flex-col flex">
<span class="font-medium text-sm dark:text-white">Premium Delivery</span>
<span class="text-xs dark:text-white/90">24 hours delivery promise</span>
</div>
</div>
</x-spur.checkbox>To be able to use the `spur-checked` modifier you would need to add it to tailwind.config.js
export default {
plugins: [
plugin(function({addVariant}) {
addVariant('spur-checked', '.group\\/spur-field:has(:checked) &')
})
]
}