How to Set the Laravel Checkbox Component as Checked

using components in Laravel helps us keep the UI code clean and reusable in other places.

imagine we have a component we created for a checkbox:

//resources/views/components/checkbox.blade.php

<input type="checkbox" >

we use it in a blade file like this:

<x-checkbox />

we should be able to check or uncheck the checkbox based on some value in the blade file. in order to do that we need to specify a variable inside the component file. we use @props directive to do that:

@props(['checked'=> ''])
<input type="checkbox" {{$checked}} >

I named the variable “checked” and set the default value to empty so by default, the checkbox is not checked.

To ensure that the checkbox is marked we use this variable($checked) inside the input tag. :

<x-checkbox checked="checked"/>

Radio Buttons

we can do the same for mark radio buttons as checked.

if we have a component for a radio button we just need to add a variable to the component:

@props(['checked'=> ''])
<input name="radio_button1" type="radio" {{$checked}} >

then we use it as an attribute in the component:

<x-radio-btn checked="checked" />